Visual Design for Ardvark's UI

A visual user interface proposal for a design news website


Overview

Problem

This is a visual design interface where the challenge was to design the home page for a news website

Solution

I designed the home page for a community based design news website called Ardvark.

Project Duration

This project was undertaken in August 2017 as a part of the on-line course called UI Design offered by Design Lab.

My Role

This was an individual project

Design Process

Mood board and inspirations

I have designed Ardvark to be a community design news website where people can post, like and bookmark articles based on UX and HCI. I started creating a mood board for Ardvark where I put in interesting color palettes, typography and navigation layouts. I also closely observed the layout for Google news since it has a very good categorization approach as well as UxMag, Dear Design Student and Designer News since they are very closely linked to the functionality of Ardvark being a design news website. The images below show the color palettes, typography inspirations and navigation layouts.

Learning Visual Hierarchies

I then learnt about visual hierarchy by assessing different websites such as 48hills, dear design student and twitter to get a sense of how important things are arranged. I then created a visual hierarchy for a social news reader as a warm up exercise. This exercise taught me how to develop a hierarchy without any color. I played with font sizes and buttons to give more importance to elements such as the title and upvote button. I decided that the most important features would be the search bar, titles and voting icons.

Ardvark's Grid Based Low-Fi Mock-up

After observing different layouts and hierarchies I created a low-fi mock up of Ardvark's homepage for desktop. I learnt about applying grids to designs and I practiced creating the mock up on a grid. The image below shows the same.

Responsive Design Mock-ups

I then analyzed the mobile designs for a few websites. I created mock- up screens for tablet and mobile as well.

Color and Typography Style Tile

I then designed style tiles for the website. Given below is the first style tile I made. It was in shades of purple and orange giving the brand a lively, vibrant and creative look. I used quicksand font style for the header and open sans for reading text. These are the images of the style tile and the website in color.


I further designed another style tile in shades of blue and pink that gave the brand a calm and refreshing effect. Since the news articles on this website would be different and refreshing from general news articles, I thought this style tile would be more suitable, and I applied these colors to the wireframe. I used Lato font style for the headers since quicksand was too round, which is unsuitable for websites with a lot of text. I stayed with open-sans for the reading text. Given below are images of the style tile and wireframe.


Iconography

I went through icons on Dribble and Behance to get an idea about how icons are made. I then came up with these icons for the website. They are simple and clean, adhering to the overall design of the website.

Final Hi Fidelity Mock Ups

I created the final prototype by making a few changes to the low-fi mock up. I plugged in the colors, typography and icons. I added content to the page as well. The two images below show the hi-fi mock up for the home screen on desktop.


The image below on the left shows the home screen when an article is liked or bookmarked. The image on the right shows a menu drop down for 'my profile'.


The two images below show the hi-fi mock ups for the tablet and mobile version respectively.


Invision Prototype

I also created a working prototype on Invision, showing few of the interactions such as clicking on my profile, clicking on the next icon on the header images, bookmarking an article and liking an article. the video below is a screen capture of the Invision prototype.