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

Labels:

Reacties

Een reactie posten

Populaire posts van deze blog

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

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

Visual Design - Color

This summer I want to bring you a set of blog posts about Visual Webdesign. Recently I started noticing basic design knowledge is lost in the digital world. In the responsive era many webdesigns have become... well... kinda boring. Its all colored boxes. Many sites look quite similar. The only difference between the wireframes and the design is color. And I think Visual Webdesigners can do better. We've become lazy. This series is intended to stop designers for a single moment to realize we can do better. Visual Design is so impressive and so valuable to every project - that you need to get the basics right. Visual Webdesign I think there are 5 elements to visual webdesign: color, typography, shapes, pictures and motion. I want to dive into these elements one by one. My aim is to put a blog online weekly for the next 5 weeks - diving into one of the elements every week. This week we'll start with Color. Color There are many aspects to color. Did you kn...
Een reactie posten
Meer lezen