CRYPTOBAR
CRYPTOBAR
Web Design + Build
Embedded Files
THE BRIEF
A one page website design as an initial MVP to bring awareness and provoke response.
CLIENT
Secretstudio/Cryptobar
MY ROLE
Design and Art Direction
UI Design
Website development and build
TOOLS USED
Notebook & pen
Figma, Photoshop, Webflow
SUMMARY
I created wireframes, mid and hi fidelity designs in Figma, and built a functioning website in Webflow.
APPROACH
Thinking about brand style and direction and having discussed some thoughts and preferences, I often start by sketching ideas and wireframes on paper before working in software.
Having figured out a few approaches I went with the design that best suited the content and refined this a little more to create a cleaner version.
In this layout I went for a left to right style of text/image to balance the page.
MID-FIDELITY
Having spent some time with pen and paper sketching out Lo - Fi wireframes I launched Figma and began to work on Mid - Fidelity mocks.
I work quickly using black and white tones plus shades and basic shapes to build out the layout for each section.
Refining the layout spacing and changing some sections around and adding additional elements is part of the pocess.
HI-FIDELITY
Following initial review and positive feedback on the base layout I then moved into Hi - Fidelity layouts and explored adding in elements that had not emerged in the Lo-Fi phase of design. This approach in exploration and iterations played an important role in decision making on the direction that would be rolled out for the brand.
DESKTOP & MOBILE
It is usual in designing websites that in addition to the Desktop layout, alternatives and variations for other device dimensions are created for Tablet and Mobile.
In this project as I would be going a stage further beyond Figma and actually develop and build the website using Webflow, my preference was to design only for Desktop in Figma, and then use Webflow to create the alternative layouts based on 4 x breakpoints for Desktop, Tablet, Mobile Landscape, and Mobile Portrait. I make decisions to best shape the design per breakpoint as I work.
In addition to the work involved in creating the breakpoint variations, during the development and build phase I also implemented features and elements that were not part of the original brief or design propoals, such as button hover states and animations that I felt contributed to the look and feel.
TYPOGRAPHY
I had the freedom to consider font options and during the development of the Hi-Fidelity mocks I explored a combinations few pairings but had already establised a pairing I liked for its contrast of weights.
Poppins
Poppins is a design favorite, I enjoy its clean look and versatility with 18 styles, great for headlines and titles.
Roboto
Roboto is another sans serif clean looking font that has a good range of weights and easily paired. I used for sub headers and body text.
ILLUSTRATION STYLE & COLOUR
I wanted to create a look and style for the site using illustrations with some depth to them and chose a stock library resource called Nikuu giving a slightly quirky look plus these led direction in colour options with a pastel style of tones which suits the nature of the financial category.
CONCLUSION
From Lo - Fidelity notebook sketches, to Mid and Hi-Fidelity Figma designs and layouts, leading to actual website development and build, I managed and produced this project from start to finish.
Page updated
Google Sites
Report abuse