Technical Web Design for Graphic Designers

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