Template Design

Template Design

I think the phrase I’ve heard, and said the most these last years are: “Be consistent!”.
And I think this is an important rule in any type of design, but most importantly in Interface Design.

Consistency is especially important because we as users already have a mental model and an expectation on where things should be placed, and how they should function. When there is a mismatch between the users mental model and the system/designs functionality we add to the users cognitive load and the user will not have a very good experience.

Templates are a great tool to ensure that we stay consistent at all times and across all platforms. They also make the life of a designer at bit easier, and speeds up the design process. Template design often uses the atomic design method to build the structure – atoms -> molecules -> organism -> template. You can read more about Atomic Design here.


So what are templates?

Templates are layouts of webpages or applications consisting of the complete page that designers can reuse. Templates includes brand elements like logos, images, buttons etc and the placement of these are already decided by the designer responsible for the design.

One example of using template design is a email newsletter. By using an existing email design template, the designer only has to worry about adding the content the business wants to share with the customers. Another example of template design is e-commerce and product pages. When you have hundreds or thousands of products you want displayed to potential customers, it doesn’t make sense to make a layout for each one – not to mention how time consuming that would be. Instead it makes sense to have one or two templates and only make small adjustments as needed. The last example I would like to mention is dashboards, which is another excellent example of template design. In a dashboard most information is presented in graphical form, and having to design all those elements can be very time consuming. So having a dashboard template, wouldn’t only save time, but also make us more effective and help us stay consistent.


Example of template

As an example on how to use or make tempates I’ve included a quick module assignment I did a little while ago.

The assignment was to design an email and form template for WWF – Wildlife conservation. There were two requirements in this assignment:

1 – They need an emailer to go out to supporters to encourage them to donate.

2 – They need a fresh online form design to capture the information about the donation.

Before starting I visited the WWF website to get a feel for their identity and how they present themselves online. I wanted to incorporate as much as I could of their graphic profile and tone of voice.

I then started the process by making low-fidelity wireframes of both templates.

Email template

The email/newsletter should entice the users to click the call to action and go and donate on the WWF website. I tried to include the WWF branding with the logo and colors. I kept the call to action above the form, and to guide the eye towards the donate-button. I also wanted the text and images to evoke an emotional response, stay true to the cause and get donations. The template is pretty standard and by just changing the content it can be used again and again.

Donate page

I kept the same style and tone of voice to keep the connection between the email and the donation page. The main goal with the page was to make it easy to use, informative and effective in collecting donations – while also being visually appealing and evoking emotions. The donation blocks should be prominent, and the form should only include the necessary form – and payment fields. There is no need to gather more information, and long forms will only make it harder and more tedious to fill out. I’m hoping that donations would increase by making it as easy and appealing as possible

WWF newsletter template
Donation page template

Making and using templates can make a huge difference. It saves you both time and money, they ease your workload and are just plain easy to use. They also makes it easier for new designers that start a new job and they reduce errors. But most importantly it keeps your designs consistent.

The importance of good UI design

The importance of good UI design

A digital age

These days almost everything happens online. We read our news online, we do much of our shopping online and we meet and interact with many of our friends online. We also do our research online. Buying a new car? search online. Need a new vacuum? search online. Want to go to a restaurant? turn on geolocation and see what’s near you, with reviews. We put our trust in ratings and customer reviews, and in many cases these are what determines what product we buy or where we go out to eat.

Our digital habits means that it is important that businesses have a strong online presence, but just being there is not enough.


Good UI

Visual storytelling is a great way to connect with your audience, and can be achieved with good UI. It helps create a user-friendly interface that can build the customers confidence and reduces confusion. It gives the business an opportunity to answer frequently asked questions, and address their customers’ pain points. Credability can be established with good UI and will more than likely convert users into paying customers and get them to return. Returning customers can become brand advocates as they spread the brands’ message to their other potential customers.


But what does “good UI” mean, exactly?

Good design should be simple and straightforward and it is not only about attractive visuals and elements. UI should in fact be nearly invisible, so that it doesn’t overwhelm the user with too many colors, crazy fonts, animations and other design elements. It should clearly broadcast the right message to the user, and meet both their needs and wants.

Each element in the design should serve a purpose, and most importantly – be consistent. Consistency ensures that the user quicly learn how to interact with your website/product, which in turn increases their confidence and makes their journey towards their goal more effortless and time-consuming.


10 principles of good design

Dieter Rams’ is a German industrial designer and has been involved in design for seven decades. He has recieved many honorary titles through his career, and his 10 principles of good design can be applied to any design.
After all, design is design.


Good design …

.. is Innovative
.. must be Useful (makes a product useful)
.. is Aesthetic
.. makes a product Understandable
.. is Unobtrusive
.. is Honest
.. is Long-lasting
.. is Consistent in every detail/thorough down to the last detail
.. is Environmentally friendly
.. is as Little Design as possible