Hi here’s the video
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.
- 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.
Apps you can use to design websites.
Some good suggestions:
- Adobe XD
Some OK suggestions
- Adobe InDesign
- Affinity Publisher
Some meh suggestions
- Adobe Photoshop
- 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
- 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
- Try to keep consistency
- things stretch vertically, not horizontally, so when preparing for extra content or adding more content, always pull down, never change the widths.
- 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: //www.nngroup.com/articles/homepage-links/
- no split buttons – read: //www.nngroup.com/articles/split-buttons-navigation/
- new tabs – read: //www.nngroup.com/articles/new-browser-windows-and-tabs/
- accordions – read: //www.nngroup.com/articles/accordions-complex-content/
- video – read: //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
Google Fonts GDPR