OUGD603 - Collaborative blog - Creating platforms & content

During research we realised that setting up social media accounts for a blog on platforms such as Facebook and Instagram is the best way to get the word out about the content we will be sharing. But unfortunately, we are really just guests in each social media space, and are limited by the operation of each site.We both felt it was necessary to create a Instagram to push the blog and to gain a bigger audience for the Tumblr through Instagram. By doing this the Instagram would require content to introduce the blog, then we'd backlog all the content we have on the blog onto Instagram.

We felt it was imperative to introduce the idea and ourselves then showcase the beginning of So-So through quick videos that show our idea generations for the name and logo.

OUGD603 - Photographers identity - Brief

Examples of Emma's work:

Brief breakdown

Time scale : 3 weeks

From examining the brief it is clear I need to bear in mind the photographers transitional style, I need to create something that is flexible and able to be applied to a number of photography styles. For this brief I don't want to create something cliche, and I'm sure the client will want to stay clear of the ever so common lens adaption within a logo, or the inclusion of framing etc. I look forward to applying the identity across both print and digital as the deliverables will test the photographers wish of flexibility of the identity.

OUGD603 - Collaborative blog - Testing and application of logo

Once we felt we were happy with the logo, we tested it as the masthead for the blog to test legibility and the impact it has on the viewer.

OUGD603 - Colloborative blog - Collation of logos & development

Once we felt we generated a sufficient amount of designs each, we had a collation of the ideas to review what we individually did. This was a very helpful process as we could give feedback and make alterations to certain ideas during the review. From this we then decided to exchange files so we could further develop each others ideas.

Luke's logo generation can be seen below:

My alterations made Luke's logo

Luke's alterations made to my logos

From Luke's alterations we both remarked on how we liked the the idea which looks like a link symbol crafted into a 'S'. From a visual and contextual standpoint we both agreed to take this logo forward to develop further, not only because it was a mixture of both our ideas. Additionally, because of the connotations to links which relates to our collective idea. From this we both went off again and developed the logo individually.

The logo was developed further and we were both rather happy with the logo above but we required feedback to test legibilty and effectiveness. We showed a number of our peers the logo and a few were uncertain on what it actually said due to the legibility of the 'S'. Other than the legibilty the logo received positive feedback with comments on how compact it is. We further tested the logo with a broader reach of people, with both of us asking friends and family what they thought. 

Again a lot of people were unsure on the 'S' so we needed to alter the 'S' to make it look a lot less like a G,8 or even a 9 which others commented on.

Changes were made to the counters of the 'S' which in turn made it more legible and understandable for audiences. 

Luke also designed a logo mark which is constructed with elements that made the 'S', the logo mark will act as secondary logo to accompany the logotype.

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.

OUGD603 - Grainger Market identity - Website inspiration & wireframes

The website should give people a true insight into the market and allow the Grainger Market to enter the digital age. It needed to be current and adequate for target audience yet stripped back and basic so a younger and older visitor can both use it. To gather some influences I looked through contemporary websites on the inspiration site 'Siteinspire'. The site hosts thousands of examples in different web categories such as corporate, editorial, minimal and luxury. From looking at examples it made me consider more about what is necessary to include and ways in which this can be applied for the broad audience.

I approached the wireframe designs for the website with the intention of sketching a number of templates that can be used for numerous pages. This creates a cohesive website but also saves time and effort creating singular designed pages. The wireframes are intended to be a visual guide that represent the skeletal framework of the website. A wireframe depicts the page layout or arrangement of a website’s or apps content, including interface elements and navigational systems, and how they work together. I focused on what the screen does, not what it looks like as this would come along later in the design composition.

My wireframe sketches focus on:

• The range of functions available
• The relative priorities of the information and functions
• The rules for displaying certain kinds of information
• The effect of different scenarios on the display

For the first sketches I only wanted to focus on the home page then I'd select one to further develop digitally, this would act as template for other pages to follow.

I selected a number of sketches to take further and create digitally as I wanted a more clear representation of wireframes, as to this point the sketches gave me guidance on what layout and rules to abide by when designing. 

For the second stage of wireframe development I continued to design home pages as I wanted to keep the process of allowing the design of the homepage influence later pages in the site. Each wireframe is clear and bold, aligning to contemporary web design which is standard at the moment. As I aimed to allow any user to use it, it had to be simple yet engaging so I wanted to include large scale images in the home page of the site along with big titles.

OUGD603 - Collaborative blog - Initial logo ideas

To begin the process of designing the logo I looked at a range of visual connotations of so-so to influence my thoughts when designing. The connotations were a mix with the kids game show 50-50 both making myself and Luke think of so-so. Other influences were typical links to the saying with images of straight faces and uncertainty.

I also furthered research into mastheads on blogs to see how logos of blogs feature. A majority of logos are simple allowing the content take centre stage so this was something to bear in mind when approaching the designs.

The logos range in style and legibilty but all communicate the core of blog. In some ideas you can see a mix of both Space Mono and Baskerville which are both respectively myself and Luke's favourite typefaces. These ideas blend appreciations and styles into one identity which the blog also does. I also liked the idea of playing with platforms and levels, relating to how the blog is a platform representing us. In some ideas you can see hyphens and dashes joining characters, I liked the thought of the hyphens representing a platform or something that is in between two people. Some logos have been obscured but are still created with the same characters.