Designing webpages as a non-graphic designer
Updated: Aug 23, 2018
Steps to make your design look good inside and out using Adobe XD
I have never been keen on graphic design. When I decided to switch roles from a developer to user experience designer, my first concern was — should I learn to make pretty designs now? But later I realised, UX is a vast domain and visual design just one component of it. My interest in UX was more in decoding human psychology and designing interactions. However I decided to acquaint myself with the fundamentals of graphic design to get the basics right. And I owe a great deal to these guys for making it simple enough for dummies like me to understand.
As a kid I learnt to draw by tracing. I would keep a piece of paper on a picture and trace the outline. After a couple of attempts the shapes were embedded in my memory and I could create a decent replica. I applied the same principles for designing web pages as well.
I chose to work on Airbnb homepage as the design was simple and clean.
I analysed the site and made a rough sketch on paper.
Then I used Balsamiq and created a digital wireframe. I love the ease of use and the speed at which you can create mockups once you get the hang of it. I completed the below one in less than 10 minutes.
Next up was the challenging part. Creating a prototype as close as the original. I like to keep things simple, so I adopt the below shortcuts.
Use a standard 12 grid framework (default option).
Use the default font (Helvetica Neue). I use different sizes and strength (bold, italic, opacity, etc) to create visual hierarchy. Font pairing is best left to pros! I follow David Kadavy’s 3:4 typographic scale and have a set of fixed font sizes to work with. Starting with a 40 px for H1 (heading 1), I computed the sizes for the rest of hierarchy.
H1 — 40 px
H2 – 30 px
H3 — 22.5 px
H4 — 17 px
H5 — 13 px
H6 – 10 px
I highly recommend David’s free email course called ‘Design Pitfalls’ to learn more shortcuts for simplifying design decisions.
Use the color picker tool to steal the colors from the Airbnb website.
Icons from FlatIcons.com
After a few hours of fiddling around, I must say I am impressed with what I could cook up. Looks close enough to the original ☺️.
The design looks pretty on the outside but looks like this on the inside.
When I was a programmer, at times I spent more time coming up with variable names than writing an algorithm. I knew I had to clean up the design assets. Even I couldn’t figure out how to make any changes without breaking the entire thing. I found a couple of videos and articles that explained how to name the assets, nesting and other stuff to make the design pretty on the inside. Most of the articles are written for Sketch but the logic holds true to Adobe XD as well as the interface and the structuring of design elements are almost similar.
So after two hours of grouping, nesting, renaming and a lot of double-clicking (XD has no shortcut to rename 😭), ta-da!
Making use of the Character and Color styles helped me get rid of a lot of inconsistencies like various shades of grey, improper font size, etc. If you are a freelancer/your own boss, feel free to define your own naming conventions. Or if your company has one, stick to it. It takes some time to get the hang of it, but soon it becomes second nature. This activity helped me to get rid of many unused controls added by mistake and also come up with a better way to group the elements to minimise clutter.
I really hope this gives confidence to folks without a background in graphic design to dabble in prototyping. We can still make decent prototypes without it having to be pixel perfect. Let us leave that job to our visual designer friends :)