Technical Web Design for Graphic Designers

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.


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


  • 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

General Font sizing

How fonts render

Google Fonts GDPR

Leave a Reply

Your email address will not be published. Required fields are marked *

  1. I am designing a site in Squarespace 7.1
    Do I need to learn all of these technical details?

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

New tutorials

Why no ads?

Hi, I'm PK, and I maintain and publish content on this site for two reasons.

  1. To give back to the community. I learned so much from people's tutorials and StackOverflow that I wanted to contribute and help others.

  2. To provide a more structured learning experience. People struggle to find the course that guides them from start to finish, based off of real life experience, and my courses provide that.

The only "ads" I have here are for my own courses, and maybe an affiliate link, but that's it. They fund the website resources and provide more motivation for me to produce better content.

Any bit of interest helps. Even sharing with your friends, suggesting my courses to your developer or designer, or subscribing to my YT channel, or joining our Discord. Thanks and I'll see you around!

There's a newsletter!

Sign up to the newsletter for the occasional updates on courses, products, tutorials, and sales.