Generic selectors
Exact matches only
Search in title
Search in content

Technical Web Design for Graphic Designers

Here's a tutorial on the technical stuff related to 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

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

Default image
PK

Hi, I'm a front-end WordPress developer, and UI/UX designer living in Australia, and I made this website to share thoughts and tips about web design and everything related to it. If you want to work with me come check out my web development agency.

Articles: 77

2 Comments

    • 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!

Leave a Reply