Ep 012 – I Thought I Knew It All

This episode talks about providing a design proof (or mockup) for the client. It’s probably the most important step in the web creation process, but it’s unfortunate that it gets overlooked quite often.

This episode talks about providing a design proof (or mockup) for the client. It’s probably the most important step in the web creation process, but it’s unfortunate that it gets overlooked quite often. This causes way more problems than you’d think. Tune in for some insights and tips about creating web design proofs for the client!

Some things to consider when building a proof.

For the client
– Stick with branding and personality
– Inspirations
– Layout first and slowly fill up with text and images

For yourself
– make them easily exportable
– make things clear for you to understand
– make mental notes of where micro animations should be.

Some extra tips
– I like using proofs that are 1600px across with a grid of 12 columns for a container that is 1200px across.
– Suggested apps: Adobe XD (free), Adobe InDesign (Adobe paid subscription), Affinity Publisher (one time fee), Sketch (Yearly subscription)

 

News & Articles

Good read about what makes websites look shady/abandoned
https://www.smashingmagazine.com/2019/10/signs-website-haunted-house-welcoming-home/

Chrome. ugh. Firefox. yay. Brave. yay.
https://www.forbes.com/sites/kateoflahertyuk/2019/05/30/google-just-gave-2-billion-chrome-users-a-reason-to-switch-to-firefox/

AirBnB ugh. (Fascinating read)
https://www.vice.com/en_us/article/43k7z3/nationwide-fake-host-scam-on-airbnb

 

Resources

Animated icons!!!!
https://lordicon.com/icons

Some really cool CSS tricks
https://ishadeed.com/article/unusual-use-cases-pseudo-elements/

Divi blog post template builder tutorial
https://www.elegantthemes.com/blog/divi-resources/how-to-use-the-post-content-module-in-the-divi-theme-builder

 

The Title

Megadeth!!!

https://www.youtube.com/watch?v=K5ze4DDvWgE

2 Comments

Great podcast! After breaking it down for us, I see now why starting with a proof is clutch and best practice. Following the method you are sharing just makes sense. Quick question – If I design a proof with a width of 1600, what is the proper height of the first fold/hero section? If I use the same ratio of 1920/1080 (1.77778) applied to a width of 1600, I get a height of 900. Do I then subtract 100 or so pixels to take into account the browser nav bar? 1600/800ish for the first fold/hero section?

Hi Zach, thank you for the kind words. \m/

Concerning your question, I think 1600 width with a first fold of around 750-950 is fine. It can vary depending on how it’s going to be used.. but depending on how it’s going to be presented, anywhere between those heights work.

For example, I feel that 750-800 heights can represent the best size accuracy while a taller fold like 850-900 has a better aesthetic (although not as accurate).

So depending on the design – for example, if you have an image that’s cleanly cut off, then staying closer to the actual size is better whereas having a solid background color which scrolls (and is seamlessly connected to the next section) can afford a taller fold in the proof.

As for the presentation – if the client is checking on their laptop, taller works a bit better, but if they are checking on their desktop, most likely shorter.

Hope that makes sense? Thanks!

Leave a Reply