Getting Started with Graphics Design for the Web

Advertise here with BSA

Graphic design is such an engrossing topic because it requires an enormous amount of time and practice to learn. This is similar with web development, but coding is often seen as more logical and straightforward. Design has structured guidelines, but it is much more of an art than a science. You should learn these basic guidelines and understand why certain graphics or colors work together before starting to breaking those rules.

If you have passion and perseverance then nothing can truly stop you from becoming a great designer. The first step is to recognize how the process works and where your energy needs to be focused. I want to share my thoughts about graphic design for website layouts and offer a few bits of advice for anyone interested in the field.

Practice your Weaknesses

A lot of people hate to hear this advice, myself included, but it’s the absolute truth. Objectively speaking it’s the best and quickest method I’ve found to see rapid improvement. You need to understand what you can already do and what you can’t do. Focusing on a weakness will be awkward at first, but eventually you’ll hit a stride and the task becomes much more comfortable.

If you stay caged in a single process then you never really advance beyond that skillset. So you may know how to use a small segment of Photoshop/Illustrator but you can’t really create any type of graphic for the web. You should try to understand the shape tools and layer effects – and yeah the pen tool is a huge plus. Most designers are not comfortable with the pen tool so that’s a great place to start.

When you’re brand new almost everything could be considered a weakness, so any time spent designing is time spent practicing. I’ll go out on a limb and guess that nobody is paying you to practice so it’s okay to screw up. Once you accept this fact your hours of toil will seem less stressful. There is a final goal to achieve and it’s not perfection. You should work to become more enlightened about any subject that will help you create better graphics.

Keep this in mind when you start each practice session. Any subject that you consider a weakness will stay a weakness unless you can tackle it head-on. Better to learn while you’re still new rather than once you’ve landed a job or started doing freelance work.

Study Great Websites

If you have a lot of weaknesses and don’t know exactly where to start I’d recommended keeping a list of brilliant website graphics. Save bookmarks to anything that catches your eye from a menu bar to a footer or anything in-between. This will give you a nice visual library of design ideas that could be practiced.

Often times you’ll stumble onto a beautiful graphic or effect that you wish to recreate, but have no idea how to do so. Hit Google first with some keywords and see what comes up. You may be surprised at how many similar tutorials can help you recreate the effect. Otherwise I’d recommend the Graphic Design Stack Exchange forum where you can post up detailed questions and typically get some helpful responses.

This graphic design Q&A forum will be more helpful as you learn the basics and keep practicing. The designers on Stack Exchange are quite knowledgeable but prefer to answer more specific questions rather than vague “help me design this” requests.

Retina Displays

Keep in mind that modern web graphics have changed a lot over the past 5 or 10 years. Retina displays were never a thing before Apple created the iPhone 4. Then some Android devices started following with HiDPI resolutions and now even MacBooks are using this display. Retina screens fit double the amount of pixels into the same physical space.

This means your icons and graphics will look the same size, but require more pixels to appear “crisp” on retina screens. So if you’re creating a 50×50 icon it will always be 50×50 pixels on the website. But retina screens need 100×100 pixels to make that same 50×50 icon, otherwise it looks blurry and stretched out.

As you continue practicing get into the habit of designing @2x sizes whenever possible. It’s usually easier to scale down rather than scale up with pixel graphics. But even if you don’t create 2 sets of graphics it might be better to use a double-sized icon fitted into a 50×50 square rather than a smaller icon forced to appear larger.

You can find many blog posts discussing this trend and how you might design for retina screens. It’s obviously possible to design @1x first and scale up if you have the ability to use vector shapes. Scaling down requires elements that use even-numbered dimensions because odd numbers will get split in half on a subpixel. Try both and see what you like best. Just keep in mind that retina is likely here to stay so it’s worth creating both sets of graphics.

SVG Icon Design

Another modern trend worth mentioning is the popularity of SVG icons. These are Scalable Vector Graphics which behave much like a vector in Photoshop or Illustrator. Except now you can embed these into a website and have them respond to the layout size. Pretty neat huh?

Older browsers still do not fully support SVGs and unfortunately not everyone is running an updated browser. But since you can also animate SVGs they bring a lot to the table. It’s not something that you need to learn in order to design website graphics. Just keep in mind it is an option and it’s a fun graphic style to learn whenever you have some extra time.

Starter Tutorials

The quickest way to improve your skillset is to start with a few online tutorials. Designers frequently publish free tutorials which relate to web design, icons, banners, logos, and many similar topics. If you already have access to Adobe Photoshop or Illustrator then you’ve got everything you need.

Although there are hundreds of amazing tutorials out there, I’ve put together this brief collection which is perfect for new designers who want to build graphics for the web. All you need to do is follow along and really try to retain the information. If you keep up with lots of tutorials then you’ll eventually find yourself getting more comfortable designing graphics from scratch.