Concept
The idea was to create a website template for a creative agency. This template was to be aimed at a young spirited team with positive energy.
My Role
I needed to design and develop a website template to show an agency's potential clients their work and provide website visitors with a convenient way to contact the team.
In addition it was necessary to write a detailed documentation for the template, so that the customization of it was an enjoyable experience.
Process
I started with a research on what a creative agency website requires and prepared the list of necessary pages for the website. However, after some brainstorming I came to a conclusion that a single page design would suit such an agency best.
I made a list of sections which were crucial for the website.
- Navigation
- Header
- About
- Services
- Team
- Portfolio
- Contact
- Footer
Next I sketched a layout to think through all necesary elements for the page and have a visual reference later on. In other scenario it would be a wireframe of the website I would show to a client, but this time it was only for my own use.
Before moving on to designing the page I needed to think of a name for the template and check on its availability. I named the template Livet, which means "life" in Swedish. It was a perfect name for the type of website I wanted to create. I meant it to be lively, bright and fresh. Livet fitted it well without questions.
After that nothing was holding me back from working on design.
Design
As the first step I made a colour pallet which would consist of: turquoise, two shades of grey, midnight green and white.
I chose turquoise as the primary colour for it is associated with energy, joy, creativity and loyalty. This colour would match the team behind Livet perfectly.
Fonts
For the section headers I planned to use uppercase letters therefore I went for Hind sans-serif font which looked clean and uncluttered.
Looking for a font for the website copy I stopped on Open Sans sans-serif font. It is described as neutral yet friendly as well as being optimized for print, web and mobile devices and having excellent legibility characteristics.
Assets
Looking for suitable assets I was led by the same mood selecting only images which expressed creativity, positive energy and had some shades of blue, yellow or torquoise in them. I wanted them to be warm and welcoming.
UI/UX
Enjoyable user experience was my priority when working on the template. I wanted to make sure the website is easy to navigate, has clear visual hierarchy and has familiar patterns throughout the page.
I made a fixed navigation at the top of the page to make the website menu be accessible for the visitors at all times. Also I placed a call to action button in the header section to make the clients be able to get in touch with the agency fast.
I created a few image separators in the page to help sections be more distinguish. Also setting the images in separators as fixed backgrounds with a moving text over them added a point of interest to the template.
I made a section concentrated on technical skills of Livet's team with a unique on hover animation. I felt it was a great way to visually present this kind of information making it easy for the clients to find. Additionally, not going too deep into details just presenting the facts, made it less overwhelming and more convenient for the clients.
Documentation
As the template was ready, I started my work on the documentation. I went for a HTML version, the one to be viewed in the browser.
I prepared all the needed information such as: main features, getting started, structure, how to, credits etc. I tired my best to make this documentation as detailed and as clear as possible, taking into account that the user might not be familiar with HTML and coding in general.
To make it even more useful, I added lots of screenshots going along my explanations, because "a picture worth a thousands words" as they say.
Conclusion
Working on Livet template was a great learning process for me. I managed to design and develop a template from scratch which certainly advanced my skills and understanding of web design.
This template is focused on its visitors. At the same time giving the agency an opportunity to present themselves in the best possible way to convert the website visitors into potential clients.