pexels tranmautritam 326501

How to be a Pro web designer? (Part 1)

visual designer

In a previous article, we talked about what to expect web designers to do and what to expect web developers to do. To better understand each and every job, we will start a series of posts describing every single one of them in detail.

So visual editing, as the name suggests, is related to visuals and that can be translated into logos, colors, images, videos, animation effects, and typography.

1- Color palette

The first question is of course, how to pick colors, what matches what, and how to combine them together in the design.

So for starters is how to pick a good color? well, there are two classifications for this. First, is this color for you or for your client? if it is for you then choose whichever you want, everyone has a different preference. and please don’t start saying that you will ask them what they want as the website colors. They won’t understand the significance of colors compared to you. So do the heavy lifting and choose for them and tell them what each color will mean.

And you need to be knowledgeable about what different colors indicate. To make it easy I will offer you a site where you can read more, empower yourself with color psychology, is a good go-to site to know what each color means and on which occasion you can use it.

To match colors with one another, adobe color makes things easier for designers. (though there may be a similar application, I prefer adobe color).

Just by dragging the primary color you chose, you can get a matching one or more secondary colors and create your own color palette.

Adobe Color Wheel

So how will you apply them to the website? I usually follow the 60, 30, and 10 rule. which usually means to apply the main color by 60% to the design and the secondary color by 30% and the accent color by 10%. Remember that there is no need to be very accurate. Just go with the feeling of it.

2- Logo design

To be completely honest, I don’t do logo designs but there is this guy (Will Paterson) that I follow on YouTube and I think he is amazing, so I will leave the link here so you can watch him.

3-Images

Images are a big part of the websites we design as the internet is primarily a visual medium. I use adobe photoshop (below is a link where you can buy it, which I offer as an amazon affiliate). And to choose the right image, there are 3 steps you have to follow:

1. Choose the right style

And that can be either in the 3 forms

  • Photography: This portrays a realistic idea to the viewers.
  • Illustration: It offers an abstract idea, and is usually used to metaphor a complex story.
  • 3D images: Combine real life with fiction.
2. Pick the right image

There are 2 ways to do that. Whether for free or paid, whether you or your client deals with this aspect, they will have to deal with these 2 options. To get it for free, I would suggest pexels.com or pixabay.com

To get paid images, you go for a professional photographer or buy them online and here I suggest istockphoto.com or shutterstock.com

3. Use it correctly

There are some stuff to remember to consider before using images by either photoshopping them or just applying them directly:

  • make sure it is of a high quality
  • make sure its subject is clear
  • make sure there is a space for text
  • make sure there is a contrast in the background that would not draw attention from the point you want to deliver, so you either blur it or apply a mono color to the background

4- Videos

Videos are not as widely used as images as you typically want to leave a fast impression on the user before leaving the site, and videos are usually long to get that impression. But there are some examples where you can use them, like on the about page where you introduce the business owner or the staff.

5- Animation

I similarly don’t have expertise with animation but for the programs to recommend. You can choose to work with After Effects, Principle, or other similar software.

6- Typography

The purpose of the font:

  • Deliver information (that means it has to be easy to read)
  • Communicate values (Aesthetics)

The two main kinds of Font styles we use as web designers (that doesn’t mean we don’t use other types): Serif and Sans-serif. Here are some basic information to keep in mind when choosing which type to use.

7760769
Serif
  1. Have a certain decoration aspect to it
  2. Used when you want to convey something established and have some kind of history to it, for example with banks and organizations along the line
Sans-serif
  1. Cleaner and have a more modern feel to it
  2. Used when you want to convey something cool and modern.

Regarding the font size, you can go to typescale.com and try to see the font type and sizes “feel” and choose the right size for the type you chose.

Another important aspect is the font weight. If you want people to notice something before the rest of the text, make it bolder as it grabs the attention of the reader and that’s why we use headings and bolder to convey the main idea of things because users usually scan the text more than read it.

Remember that the famous Massimo Vignelli only used 6 types of fonts throughout his career as a designer and he has one of the most successful and famous works out there in the world. Here is a link to view more of his font typefaces and work.

Summary

Visual Designers usually deal with most of the visual aspects of the website including

1- Choosing the right colors and building a color palette

2- How to choose images according to their purpose, and how to use them (either by editing software like Adobe photoshop, Pixler, Gimp, and others)

3- Vector design (Icons and logos are basically vector-based) and editing (using Inkscape, Adobe illustrator, Apache open office draw and others)

4- Video editing (using Loom, YouTube, or other software)

5- Animation building using (After Effects, Principle or other software applications)

6- Typography which includes the choice of font style, size, and weight.

Leave a Comment

Your email address will not be published.