Web design written on gear wheel

Principles of web design

First, let’s not forget basic principles of graphic design. In addition to those, web design has its own set of defined guides, principles. This is where we go further in creating great work. We are now entering one of many branches of graphic design, web design.

Keep in mind that these are just the tip of the iceberg, each needs to be studied deeper.

Here we go:

Know what for you are creating.

There are numerous types of websites, so you need to know its purpose and goals first, in order to even start thinking about design. Is it a business website? What business? What is the primary goal (selling, marketing, getting subscribers …)? How is the brand represented, or how the client wants the brand to be represented? Research about that branch of business, analyze what works, what doesn’t.  This is your main and most important step for creating a good website.

Ideas
Research

Gestalt principles

Ok, I’m going to try to be short here. In a nutshell Gestalt principles are a part of psychology of human perception of elements. It means how we understand and put together things that we see around us, and that understanding is crucial in designing.

There are ten overlapping principles, but I’ll talk about main four.

  • Law of closure. People prefer complete shapes, but if there are holes, our brain automatically tries to fill them out in order to make the best sense of the shape. So, if you have incomplete circular shape, brain will fill out the gaps and assume it is a circle. We tend to see forest before trees individually. This means that you can use negative space to create interesting elements in different ways, but preserving the meaning of a shape or element.
  • Law of common region. Talking about seeing forest first; If we put a bunch of related elements together in close proximity, or on the same path, or background, people will perceive this as a whole. The common region of elements is the key to seeing them as one, we have unity that occurs.
Law of closure
Common region
  • Law of proximity. Elements don’t have to be the same shape to be perceived as united. If we group different elements in a consistent manner, we will achieve the goal for the observer to perceive them as a group and connected.
  • law of figure/ground. This is about positive/negative and how shapes and space is perceived as figure or ground. The point is, human eye has a tendency to separate elements, objects/figures from their surroundings/ground. We use that to create interesting work that includes positive/negative. Think of Jin Jang symbol.  Everything that is not a figure is automatically considered to be ground, so we have opportunity to create shapes that make up a stunning visual composition.
Ethnic floral seamless pattern. Abstract ornamental pattern
Proximity
Black silhouette of a sitting German Shepherd
Figure/ground

Simplicity

We are getting into the user experience/UX. You could make a great composition and work of art, but if the user does not understand where he is, or how to navigate through the website you have a big problem. People depend on habits and memory to make their life easier, so if they encounter a website that they need to crack like a safe or Enigma code, they’ll just quit, and in the end, you lost. Keep it simple, clean. Color, typography, imagery must be understood easily. Choose your color pallet carefully, typography should be expressing your brand, make statements, draw attention, and be inviting for people to read texts, pleasant to the eye. Imagery must be placed with a specific meaning in mind, why there, what is its purpose, what is it doing for the observer and where it guides? Keep it meaningful and simple as possible.

simplicity
Simplicity

Grid layout

Grid is important when you need to create basic structure of a website. It creates boundaries and positions for your content in an organized, recognizable structure. Grid layout is a skeleton of your website. If you do not plan ahead by making basic architecture (wireframes), you could get completely lost with content and make a mess.

Content

Content should be seen as main element that makes up a website. Your layout and all of the design should serve the content, and be in unity with it, connected.

Responsive design

Today we have many devices that your website could be visited from. Those devices are of different sizes and shapes. You need to design with all of them in mind. Make your website accessible to everyone. It doesn’t matter if you start with mobile devices or desktop computers, but you need to cover them all.

responsive-design
Responsive Design
White space

These are the basics, like I said before; you need to dive in and study deeper.

Sofia

Sofia

Share on facebook
Share on twitter
Share on linkedin