What I’d Tell My Younger Self About Learning Web Design

Posted: 11 Aug 2014 05:20 AM PDT

I can still remember how much there was learn when I first set out to be a web designer and front end developer. I didn’t and don’t mind learning, but there was a lot to learn just to reach the minimum requirements to create a website. The time to learn the necessary skills would be measured in years.

It was a discouraging thought. Here I was ready to start out on a journey only to realize how long it would take just to get to the starting line. I looked for anything that would help direct my course of study to reach the necessary minimum as quickly as possible.

Notebook, pencil, and eraser

A recent comment by string1301 was seeking similar guidance and seeking some kind of learning path to follow.

Ideally that path would include learning more than web design and development. If your goal is a freelancer’s life you’ll want to learn marketing and copywriting and business in general. Anything that can help your freelance career is something you’ll want to learn to do better.

However, the question asked deals specifically with designing and developing websites. I collected some thoughts and here’s what I’d tell my younger self if I could. I’ll focus on three large subjects, with the understanding that I know much more about the first two than the last one.

Web design
Front end development
Back end development

We’ll get through web design today and come back to cover front and back end development over the next couple of weeks.

General Thoughts About Learning Web Design

First things first. If you want to be a web designer, you should step back and understand the big picture of what the job entails. Someone (a client, your boss, yourself) comes to you with a problem and it’s your job to solve that problem.

Bringing a critical eye to the designs you come across, and analyzing how the fundamentals are used will set you on your path

There’s a business or person behind every site with goals for the site to achieve. It’s your job to figure out how to design the site so it best achieves those goals. That can mean helping visitors complete tasks and it always means communicating a message or story.

Keep this big picture in mind. Being a web designer isn’t about making websites pretty, though making them beautiful can be part of the job.

Think first about the site’s content. What’s its purpose? What does it hope to accomplish? Think about information architecture and how you’ll organize the content. Once it’s organized, think how you’ll help visitors find particular pieces of content.

Most important is to keep at it. Some things won’t make sense until you’ve learned something else first. Some of the confusion you might feel is because you haven’t yet learned the missing part to help something make sense. Keep at it and you’ll pick up those missing parts.

Learning Graphic Design

Communicating a message or story is the graphic side of being a web designer. Your best place to start is with the fundamentals. Learn about the different elements you can use such as lines and dots and space itself. Learn what their attributes (color, size, texture) communicate. Learn about the principles and guidelines that suggest how to put everything together in a composition.

Learning design fundamentals will reinforce the big picture and it’ll begin to teach you the craft of graphic design. Read about the principles of design and practice incorporating them in your work. Start to look critically at your own work and the work of others.

If you’re studying how to work with space, pay attention to how designs you like use space. What does it communicate to you? Why do you think the designer chose to shape space the way they did? Apply the same critical thinking to your own work. Did the resulting space in a site you designed communicate what you wanted? If not why? What could you have done better?

Don’t ask others why. Think for yourself. Why do you think another designer did what he or she did? Why do you think something does or doesn’t work in one of your designs? In either case how can you improve it?

The continued study of fundamentals, bringing a critical eye to the designs you come across, and analyzing how the fundamentals are used will set you on your path, but there’s more to know.

After the fundamentals, you’ll want to dig deeper into three major areas of graphic design, typography, layout and grids, and color. I still feel like a beginner with all three, but I’ll do my best to offer some ideas for learning each.

Typography

Some aspects of typography are easy to understand, while others can’t provide an absolute answer. Spend some time learning the anatomy of type and how typefaces are classified and organized. What part of a letter is the bowl and what part is the counter? What makes one font sans-serif while another is slab serif? What does each category of typefaces communicate?

Learn to work with the basic proportions of type. Learn how size (font-size), measure (line length or width), and leading (line-height) work together to create harmonious type.

Harder, is trying to figure out what a given typeface communicates and which typefaces will work well with others. Which are more legible, more readable? Which will attract more attention? Which typefaces are better used as body type and which are better used as display type? What are the differences between body and display type?

Realize that there are no exact answers here. There isn’t a default font you reach for to communicate warmth or luxury. It’s up to you to choose one you think communicates what you’re looking for. There’s no exact science to deciding which fonts pair with others. There are guidelines and your own judgement, but there is no recipe.

The only way to get to the point where you trust your judgement is to practice working with type. You don’t have to spend years analyzing every typeface that exists. Identify a handful of typefaces you feel comfortable using. Find a few more you can pair with them and build a small palette of typefaces you can use on projects. Over time expand your palette.

And just as you did with the fundamentals turn a critical eye on how others use type and how you use it in your own work.

Layout and Grids

Grids (layout in general) help you visually organize content. Layout is where I started. It was a strength for me, at least in comparison to type and color. It seemed to be the easiest and quickest way for me to improve where I was as a designer.

An understanding of design fundamentals will improve your layouts, since the fundamentals lead up to principles of composition. Still there’s plenty to learn beyond the basics.

Type and layout combine nicely. Grids are formally known as typographic grids after all. The decisions you make about size and measure and leading are intertwined with column widths and perhaps row heights.

Think about the content your design will need to display and how to best organize it visually. See the connection between space and grids. Learn the different types of grids (manuscript, column, modular, hierarchical) and understand the pros and cons of each.

As with type much of this comes down to your judgement. It’s up to you to decide which grid to use and where to place information and design elements within it. You’ll gain that judgement by once again turning your critical eye to the layouts you see and through practice working with grids.

Color

As with typography and grids, the basics of color are fairly easy to comprehend. It’s working with all three that’s more difficult. Spend some time learning color systems and color theory basics and the relationships between color. Learn how to create a color wheel and learn why the colors sit on the wheel where they do.

Spend some time learning how color schemes and color palettes are built. Always keep in mind that individual colors are less important to a design than the combination of colors used.

I still struggle to put together a color palette for a project. I think the only way to get past these struggles is practice. Color relationships and combinations are far more important than the characteristics of any individual color and you have to explore those relationships by seeing the effects of one color against another.

Some colors are warmer while others are cooler. Some are bright while others are dull. Place colors in different surroundings and observe the effect. Certain color characteristics like temperature will be universal. The meaning of individual hues tends to be more cultural.

Work with color whenever and wherever possible. Observe the colors you see and try different colors in a design. Always train your critical eye on your work and the work of others.

A good place to start is to isolate the aspects that make up a color (hue, saturation lightness/brightness). Isolate the value of a color, how light or dark it is. Work monochromatically, even in grayscale, for a time. Build different hues back in once you have the values right.

Like type though, your skill with color is ultimately going to come from your experience and judgement.

Learn Anew With A More Experienced Perspective

As your skills with the fundamentals and with the big three of type, layout, and color improve, you’ll start putting it all together. Here’s where you might once again return to the fundamentals with a better understanding of how to harmonize various components of a design.

Perhaps you’ll have a better perspective for understanding how to form a concept based on the information a client gives you, or your practice with line and form has given you a greater appreciate of space.

Continue learning more about type and grids and color. There’s a never ending path to learning more about each. As you move from beginner to intermediate you’ll see more and you’ll see deeper. New things to learn will reveal themselves and old things will reveal layers you hadn’t noticed the first time around.

By this point you should have a pretty good idea where to go next. You’ll know where you’re strongest and weakest and can let both guide where you go next. The pattern should always be the same and it should always be ongoing.

Learn
Practice
Analyze

Let me leave you with one last thought. If you continue to do the three things above you will get better. Remember not to compare yourself to your favorite designers. It’s an unfair comparison. Only compare yourself to your past self. Your goal with all this learning, practice, and analysis is to become a better web designer than you are right now.

Next week I’ll pick things up again looking at the development side of crafting a website. I’ll share some thoughts about learning html and css, particularly in combination and in relation to real world problems and design principles.

Download a free sample from my book Design Fundamentals.

The post What I’d Tell My Younger Self About Learning Web Design appeared first on Vanseo Design.