Before designing the website, I took time to think what words describe the website. They were - family, bonds, sorrow, lost, mourn, love, together, memories, parents, friends, life. It helped me visualise some ideas and gasp the feelings the design should express.
Afterwards I browsed the internet for some visual inspiration, images or textures to express the emotions and mood. After gathering some material, I arranged the images and created the mood board, which is an effective tool as it gives the overall feel to visualise the future website design. I was quite happy with the outcome because I extracted the basic colours for the website and got inspired by the emotion it gave -pure, life, sadness, hope. All images are used from free stock site unsplash.com.
After gasping the overall feel of the design and getting some visual idea, wireframing step took place. Wireframing helps with positioning the content, buttons and navigations. Since cell phones are deeply embedded in our daily routines, I put a lot of thoughts and work into the site’s mobile version—making it accessible and easy to use was a must. Everything had to work perfectly and only then I scale up to tablet and desktop view.
The visual design had to fit with the possible emotional state of the users. That is why I made a simple structure where you can’t get lost, an easy navigation menu and plenty of negative space which ensures that the obituaries and different information do not fight with each other for attention.
The style tiles are a visual reference for the future websites. It defines the fonts, colours, shapes, icons, and buttons. It contains all the design ideas that will be used to create the digital solution.
Two distinguished fonts have been defined for the visual identity. They are both from the Google Font library and consequently they can be easily used for the web.
The typeface “Varela Round” is used for titles. The rounded corners of the font make it perfect for a soft and gentle feel and work great at any size.
The typeface “Roboto” is very modern and essentially combines the best aspects of classic fonts. It is also listed in the 12 most readable fonts, which I think is essential for body text.
Design principles I used while designing the website: Composition, Gestalt Laws – Proximity, Closure, Similarity, Common Region and Visual Contrasts.
The overall website layout has a good balance, it is aligned and consistent. Website design also consists of empty spaces which give the airy feeling.
The white spaces create a boundary between elements, visually dividing them. It helps the user to define what belongs together.
Headings, subheadings, body text, buttons and content holders look the same on all pages to help the users understand the hierarchy. It also minimizes the learning process and speeds up the search of needed information. You can check the finished website here: Afdoede website.
You can check the XD Prototype here: https://xd.adobe.com/view/ad094ae0-5967-499d-bf1f-a64c31319dee-f85a/
