Doorgaan naar hoofdcontent

Visual Design - Shapes

This is the third part of my summer blogs on Visual (Web)Design. After looking at colors and fonts we're diving into shapes.


What are shapes?


When I'm talking about shapes I'm actually talking about a lot of things. Most notably I try to look at the branding. A visual guideline for a brand often has some characteristics. When I look at Apple for instance, the design is clean and simple. The logo itself doesn't have a sharp corner on it. So I would define Apple as a soft, subtle, clear brand. If you were to add sharp corners in an Apple design it would look a bit odd.



The image above shows a hard shape and a soft shape. I generally look for these type of constants in a brand. If a brand is soft, the buttons will be rounded, I'll use lighter colors and such. If a brand is made up of sharp corners, I will adjust my design to match.

Logo's


Another part of shapes is the logo. A logo is usually a shape and some text. The stronger the shape of the logo - the less important the text becomes. Being a designer myself I love the brands that don't need text. Their symbols have become so mainstream that we all know the brand.



The image above shows a few of those brands. These type of brands don't need text to clarify the brand and often people know what these brands offer. Understand the brand and follow up in your design. If I would be designing a new website for Nike, I wouldn't need to include the word next to the swoosh. This saves space and allows me to create a clear and subtle design.

Guidance


In webdesign you can help guide the visitor. We already looked at color and typography in the previous blog-posts, but shapes add something to the mix. Once you've got your design you can user test it. User testing is something of the past years and its the best thing to happen to the business. You can test if a user is guided correctly through your website. Can he or she spot the buttons you want them to spot?



In the image above I am showing two types of buttons. This is the type of stuff I like to test with users. Which button feels like a button? There is no right answer by the way - it depends on a lot of things. Sometimes the top button might be the right one to use, sometimes the bottom one. But you can see how little things (like the corner radius on a button) can make a big difference.

Understanding a brand for webdesign in my mind also includes thinking about these kinds of things. I want the feel of the entire website to match the branding. Though having said that user testing often results in another solution. Often the opposites work for websites. So a straight, hard corner design often works well with rounded buttons. And a soft website often works well with the hard shaped button.

Responsive


All nice and well, but shapes are often lost in the responsive world. How do you get the same feel on a mobile device as you would on a desktop. Again, I would try to find shapes.



The image above shows the header of the website of 'Het NoordBrabants Museum' - a museum in 's-Hertogenbosch, where I live. The header is made up of the B and the image next to it. When scaling down you often see websites divide it into two boxes. This website does that too, but it adds a little shape from the corporate guidelines.

The mobile view (also pictured in this image) adds the white shape to the right. This shape is actually taken from the orange-red B. I think this is a fresh approach to try and create a similar feeling on all devices. Responsive takes some creative thinking every here and there. I don't really like how mobile design is always so boxed.

Subtle and consistent


I feel that adding these type of shapes and being consistent adds a lot to the visual design. Consistency actually helps your visitor in not seeing the subtle shapes you add. If you aren't consistent people will notice. And the visitor shouldn't notice, but feel it subconsciously.

Another thing to take into consideration is the loading. Its fine to add all kinds of subtle design elements to emphasize the brand - but they shouldn't make your website big to load.

Summary


Shapes are an important part of Visual (Web)Design. Get to know the brand and translate the feeling into your design. Does the brand use hard lines or is it soft? Are there any shapes you can clearly define and use constently? Be subtle and consistent and use what the brand guidelines have to offer.

And be sure to come back next week when I continu the summer blogs. Next week we'll be talking about pictures. I'll dive into why they are pivotal and not just supporting your webdesign.

All the best,
Corné
Labels:

Reacties

Een reactie posten

Populaire posts van deze blog

Visual Design - Typography

In my previous blog-post I explained I am blogging all through the summer about Visual (Web)Design. This is part 2, where we'll focus on typography. Typography According to Wikipedia typography is the art and technique of arranging type to make written language legible, readable and appealing when displayed. I feel typography is not often valued correctly. Typograpy is one of the key aspects to Visual Design. It helps in setting an emotion, when done well it helps in brand recognition. Looking at webdesign there are more things to take into consideration. Emotion Typography sets an emotion. Often people frown when I say this, but showing one particular font helps explain my message. Yes, I am using Comic Sans in this blog post! Which of the two words above looks more important? When you're using Comic Sans for the word 'help' I wonder how many people see the urgency of your request. When using the Impact font (especially in all-caps) it looks mo
3 reacties
Meer lezen

Embracing Design Principles

In this post I'd like to dive into Design Principles. To me, they are one of the best things ever in this line of business. What are Design Principles? Design Principles are a set of rules you define with your client. They provide direction in your design process. They give the design process a clear and shared vision and help in making decisions. Finally, they describe the meaning of your product or service to the customer. I myself mostly use them for the clear and shared vision and as an aid in making decisions. Principles first! It's important to write the Design Principles before starting the webdesign. You need everyone to agree to the Design Principles before you start your design task. There's a simple reason behind this: think first, act after. If you're developing the Design Principles during the design phase you'll most likely write them so they match what you're doing in the design. Example: I always have a Design Principle stating "Cu
2 reacties
Meer lezen

B2B, B2C, C2C what about H2H?

Lately I've been reading more and more about H2H, Human 2 Human communication. And the more I read about it, the more I feel there's a simple truth in it. B2B, B2C, ... A lot of companies are promoting a proposition of a B2B, B2C or even C2C leader. They claim a position in one or both of these markets. Thats actually pretty smart. I believe that choices are a good thing. You need to make choices and follow through. This article isn't going to tell you any of these choices are a bad thing. This article is trying to tell you that I think the differences between B2B and B2C aren't that big as they are all floating towards H2H. User centered These days we're often working with persona's, user journeys and user testing. Everyone is shouting we need to include real users in our working ways. Good call. Ten years ago we imagined what people wanted to see or experience. These days we include users to understand what they need, want or expect. We have really e
2 reacties
Meer lezen