Hi here’s the video
Text version:
Don’t skip the design stage!
First let’s get some common misconceptions out of the way.
Although it can be specified into many different steps, the most common misconception is the design part.
Let’s say once the briefing process is done, and you’ve already got the branding and (hopefully) content sorted, the next step is design.
Most people understand that, but they always seem to be fine mixing it with development.
If you are putting a website together, technically you are developing a website.
Regardless of the boundaries of “development,” the important issue is design.
I’ve noticed that a lot of people skip the design proofing stage.
While this may work for really small quick ultra low budget sites that don’t need or have much of a visual standard, it is really important for any reasonably sized website that has a budget higher than paying your nephew.
What kind of app? Why?
You have to use a design-centric app to design, and get that approved.
A web UI/UX app at that.
And this is not just from a “proper procedure” standpoint. This is from a visual design-centric standpoint as well.
Seriously, if you want your websites to look “designed” and not “thrown together” then you really need to actually design first.
Because:
- Things look same-y if you restrict yourself to just using the visual builder from the start
- The database will be messy and can cause problems later down the road (1200 revisions??? Random pixel sizes everywhere??)
- It’s not as quick as what design apps can do.
People say “budget” being a reason they skip the proper design phase, but I can guarantee, this saves so much more time later down the track.
Suggestions?
Apps you can use to design websites.
Some good suggestions:
- Adobe XD
- Sketch
- Figma
Some OK suggestions
- Adobe InDesign
- Affinity Publisher
Some meh suggestions
- Adobe Photoshop
- Pixelmator
- Vectornator
- Google Drawings
We’re going to be using XD because it’s the only one that actually has a viewport in the preview/feedback interface.
I actually cannot believe I prefer Adobe over everything else on this, and if Sketch actually had a locked down viewport for their preview I’d use that more.
Now that we’re going to start designing in XD, let’s talk about the technical aspects of it.
First off, the parts where XD is straight up wrong.
Using their defaults, which are 1920×1080. -> bad idea.
Using their default grid -> terrible idea haha
What’s a good screen size?
- vertical height: 800-850px
- width: 1600px
What kind of grid?
- container size: 1200px
- consistent spacing
- Set up a good grid
Extra answers to very common questions
Font size?
- Between 14-20 Start at 16px
- Hot tip: use even numbers – easier on low resolution monitors
What kinds of fonts?
- always check all the usages
- Google fonts > Adobe typekit > purchased fonts >>>> unfinished Dafont
Color schemes
- Try to keep consistency
Stretching
- things stretch vertically, not horizontally, so when preparing for extra content or adding more content, always pull down, never change the widths.
Mobile Responsive
- Get your columns in simple order
- Columns stack in a reverse N shape, and then Z shape. <- columns first
Quick UI tips
- home menu item – read: https://www.nngroup.com/articles/homepage-links/
- no split buttons – read: https://www.nngroup.com/articles/split-buttons-navigation/
- new tabs – read: https://www.nngroup.com/articles/new-browser-windows-and-tabs/
- accordions – read: https://www.nngroup.com/articles/accordions-complex-content/
- video – read: https://www.nngroup.com/articles/video-usability/
Would you like to dive deeper? I have a course!
Check out the course!
It’s almost 7 hours of learning how to design websites that are practical and efficient while maintaining your creative integrity.
References & Extra reading
Font sizes & even numbers
https://learnui.design/blog/mobile-desktop-website-font-size-guidelines.html
https://ux.stackexchange.com/questions/129973/why-rounding-odd-font-sizes-to-even
General Font sizing
https://w3-lab.com/website-font-size-guidelines/
https://learnui.design/blog/ultimate-guide-font-sizes-ui-design.html
How fonts render
https://www.smashingmagazine.com/2009/11/the-ails-of-typographic-anti-aliasing/
Google Fonts GDPR
https://blog.runcloud.io/google-fonts-gdpr
https://www.iubenda.com/en/help/20625-google-fonts-gdpr-how-to-be-compliant
https://www.jsdelivr.com/blog/how-the-german-courts-ruling-on-google-fonts-affects-jsdelivr-and-why-it-is-safe-to-use/
https://www.lifehacker.com.au/2018/06/how-to-be-gdpr-compliant-if-you-use-google-fonts-on-your-website/
https://github.com/google/fonts/issues/1495
lenore ava jaffe says:
I am designing a site in Squarespace 7.1
Do I need to learn all of these technical details?
PK says:
Hi Lenore,
I’ve already replied to you on FB, but I’ll copy paste the answer here to help others who might stumble across this post:
Squarespace! So sqs has a very strict 12 col grid (very similar to bootstrap). The container is the same, 1200px (1234px in actuality, but the 17px padding on each side of the modules essentially push the content inwards to result in 1200) and the gutters are 34px.
Sqs section spacing is not based on a set number, but a vmax (meaning it adjusts to the screen size) which is technically 3.3vmax resulting in 52.8px when viewed on a 1600px width browser.
So basic vertical spacing blocks -> 53px squares
Container -> 1200px
And gutters for columns -> 34px
Should give you a pretty good representation of the layout sizing.
Hope that helps!