Technical Web Design for Graphic Designers

Description

Are you a graphic designer?

Have you ever been unsure about some web design choices or layouts?

Not sure if it’s easy for the developer to develop or not?

Are you second guessing yourself on “best practices?”

Need a brush up on good general standards concerning web design?

Would you like some clarity on how to design templates?

Would you like to learn how to use XD to make some practical and efficient web designs?

Would you like to design websites that the developer can make pixel perfect?

If your answer to any of those questions was a YES, then this course might be for you.

Here’s a sample of what we’ll be covering in the form of a blog post + 45min video

I’ve been working with designers and their web design proofs for about a decade, and it’s safe to say, I’ve worked with designers of all skill levels. From first timers to national corporation head designers to agency art directors to clients’ own work.

I’ve been provided designs in Adobe XD, Photoshop, Sketch, Figma, Illustrator, PDF, Indesign, and even MS Powerpoint (not kidding).

And I have… thoughts.

This course is based off of my experience in helping graphic designers make the most efficient and effective decisions when designing for the web.

There are plenty of do’s, dont’s, and insights that I can provide, that will probably answer most of your questions.

Questions like

– What’s a good screen size to work with? (it’s probably not what you think)
– What content widths should I use?
– What kinds of colors are good to use?
– What fonts? What size? How many?
– What kinds of icons are good?
– How are icons animated? What do I need to do?
– What do I do with columns and gutters?
– How do I design templates? Templates that the developer won’t hate me for?
– How do I prepare for mobile?
– What files work better?
– What are my boundaries?
– Where do I start?

All those questions will be answered in this course.

Please remember, this is a technical course.

I’m not going to teach you how to design.

I’m going to teach you how to design websites that are practical, efficient, and easily develop-able.

That means less headaches down the road.

Some basic truths that we will need to establish before we start:

You are going to be providing the client a static design proof.

Once that proof is approved, you can hand it off to a developer, and if both parties do their job well, it can be pixel perfect.

The Curriculum

Introduction
CH01 – L01 – Introduction

Basics
CH02 – L01 – Important considerations
CH02 – L02 – Setting up XD
CH02 – L03 – What stretches what doesn’t (text and images)
CH02 – L04 – How CSS works

Designing Websites
CH03 – L01- What can be templated? + Sections
CH03 – L02- Fonts
CH03 – L03 – Colors
CH03 – L04 – Images, File Types, and Aspect Ratios
CH03 – L05 – Using SVGs, Making Vector Elements
CH03 – L06 – Asset management and Exporting
CH03 – L06 – Extra XD Tips

 
With a total of almost 7 hours of detailed explanations on the best practice for web design, you will be confident that your beautiful designs can be efficiently developed and stick with great basic ground rules.

If this is something you’re interested in, go ahead and pull the trigger because I’m confident you’ll get a bunch of useful advice.

For a graphic designer working in the 21st century, web design is Almost Inevitable.

Please note:
In the course, although what you learn can be applied anywhere, we will be mainly using Adobe XD. This is because I think it’s the most readily available for graphic designers since it comes with an Adobe CC subscription.