OUGD603 - Grainger Market identity - Website production

For the production of the website I used Adobe XD which makes going from concept to prototype faster. It's timesaving features like repeat grid and flexible art boards allowed me to create everything from low-fidelity wireframes to fully interactive prototypes in minutes so it was a helpful tool to create the website.

For the grid I used a standard square grid that is available as it allows flexibility while also giving a strict system to work with.

I created a number of the wireframes in XD until I felt the design was suitable for the home page, from here I could experiment with other layouts which were inspired by the home page. I also set out to design templates rather than individual pages, so what I  designed can also be applied throughout the site to give it consistency.

I designed a number of variations of the 'history' page as I felt the amount of body copy used was making the site cramped. To solve this I needed to use negative space to free up content and allow the page to flow better. From feedback one of my peers suggested I look at the AGI website to see how the site handles blocks of body copy in more easy on the eye way. From this feedback it made me realise that a webpage can be as big as you like, and that extending pages is a normality to allow fluidity. So I decided to spread content out more and use negative space to focus the attention on images and copy, the negative space also allows the information to be clear and ordered which was lacking from early ideas.

Examples of the cramped content below:

Home Page: The home page is clear and welcoming with the image and tagline taking centre stage. The images transition on a image scroll so its responsive for the viewer which creates more engagment. I set out for the home page to introduce the market in a brief manner then the user has the option to further this subject through separate pages and I believe this aim is accomplished.  The site has a navigation bar which includes the logo, the pages, social media and a dropdown menu. The dropdown menu is necessary for users who may want to access information quickly, rather than look scroll pages. The home page also includes a footer which also helps with fluidity and allowing users to consume information quicker. The footer includes contact details, opening hours, policies, terms, conditions, press enquiries and a subscription option to the newsletter.

About page: The about page is a extensive scrolling page which can also act a template for the visit, news and contact pages. The about page continues the full scale image style with duotone archive imagery, along introductory copy about the market. The user then has the option to scroll down and learn more about the market.The page then becomes a history page which tells the Grainger Market story, along with supplying the user with video, archive and profile content.

This is the page I struggled with most earlier on development as I discussed before. However, when I fixed the problem by using more negative space I feel as though the design can be a modular template for other pages as its not too constricted.

Traders page: This page lists all the stalls of the market and is straight to the point by giving the option of search, alphabetical order or see a list of all stalls.

Individual stalls pages: These pages give the visitor more of an insight into the stalls of the market. The content tells the user all the about them, ranging from service to history. Negative space once agin came in handy as it allowed to me spread content out and have space for quotes and a image gallery.