Friday 31 October 2014

OUGD503: Study Task 2 - YCN Yahoo brief 2013

In small groups we worked on a YCN brief from last year, to redesign the homepage for Yahoo so it's more engaging with 13-18 year olds.

One aspect which was a clear problem is the busy nature of the homepage.  It tries to cram everything on to this page; news, weather, email, and more.  It looks really cluttered and unclear, as well as having an advert taking up the majority of the top part of the page.



Some key factors we thought were important about the design which need to be addressed are the 'trending now' links, colour scheme of links and the order and position of the different sections on the site.  We also recognised that there are two sets of main links - the left sidebar and the smaller purple bar at the head of the page.  So close to each other it's not necessary for them both to exist and can make the user confused.  As there's such a wide selection of categories, from Mail to Cars, and not all will appeal to the intended target audience of 13-18 year olds, we decided that a design where the user can make the homepage individual to them would be most appropriate.  This way both 13 and 18 year olds who may have completely different needs from the website can access the information they want easily and quickly.

Solution:



A homepage where users can drag and drop the individual categories Yahoo offers, creating a personal homepage where only the topics that user wants to see are shown.  This makes scanning and searching through the website easier and more enjoyable, and cuts down on the amount of time spent browsing through irrelevant information.

Thursday 30 October 2014

OUGD503: Royal Mint Competition


In 2017 the new, 12-sided one pound coin will be released with the tails design of the winning entrant to the Royal Mint competition.  The deadline for this brief is the end of October so I'm going to complete my first responsive brief by then.



The first step in my design process was of course, to research into what represents Britain, so after coming up with initial ideas and words relating to Britain, I asked a few people what being British meant to them so I have wider variety of answers.

Two questions included: What do you consider to be distinctly British? What are the best aspects of Britain in the 21st century?





The latter response containing some less obvious answers about Britain has made me think slightly differently about the solution to this brief, and whether the traditional coin designs that are familiar to the nation are a pattern I should try and follow with the new coin.


__________________
Ideas

To broaden my knowledge on the history of Britain and the key symbolic properties, I researched further into the royal emblems, traditions and key events from the past few centuries.  The notes in my sketchbook are fairly self-explanatory and show my direct thought processes.



After collecting research from various sources, I came up with a few concepts that I believe would work as a design for the coin.  One main idea is to incorporate the traditional aspects of Britain and the elements of the modern day society to introduce something that would represent the roots of Britain as well as the advancements in British culture from the early 21st century.




I want to create a futuristic design that incorporates the elements of diverse British culture today and what is to come of Britain in the years ahead.  As the design will cover the pound coin for a long time into the future, it should represent the diversity of the nation and the direction the island is heading for in terms of becoming increasingly multi cultural as a society.




__________________
Further research

Research into existing or previous designs is key when aiming to find a solution to a brief.  Since the 1980s the designs have followed a similar pattern - using royal emblems or floral designs representative of each country within Britain.  The millennium saw a slight change of direction, and the reverse side of the coin depicted bridges or railways.  The most recent illustrations following 2010's release are more detailed, and have all four capital cities within each design, one prominently covering the top centre of the design in a larger size.







I also read some articles published about the state of Britain and what the future consists of for the UK.  I want my design to represent the ever-changing society and integration of cultures across the nations.  In this modern day, multiculturalism and diversity are far more evident than 100 years ago, for example, so thinking futuristically I want to encourage inclusion rather than exclusion and I think having a design that portrays this on the pound coin is something that will be looked back on as a true representation of the beginning of the 21st century in Britain.

What will Britain become?


Obviously I want to show a positive view on multiculturalism, and create a design that's symbolic of the connections and unity across the Isles, which can be associated with the British heritage and monarchy, as well as the sought after equality and harmonious integration between different cultures living in Britain.




Drawing away from the intricate, realistic style designs from previous years, I've experimented with geometric shapes to depict the British Isles - something that can easily be recognised as Britain. This idea then led on to become a mixed up overlay of the separate sections I divided the triangular shape into, in an attempt to represent the gradual change into multiculturalism.  This may not be the best way to convey this idea though...

I also considered using an iconic landmark instead of the geographical shape, though nothing stood out to me as being a singular symbol of Britain - other than the Houses of Parliament/Big Ben which seem a bit too obvious, and are only symbolic of the capital city of England rather than all the nations.

Although the traditional heritage of Britain should be portrayed in the design, I hope to create a modern aesthetic, though still referencing the history of British culture.  



I played with the range of ideas I'd come up with already and made notes about the concept I want to visualise... fixating on the fact the new coin has 12 sides.  This is a distinct change to the will-be-modernised pound coin, so I want to make use of this feature in the design.  Ways to do this could be to embody aspects of a clock face to match the 12 sides.


__________________
Developed ideas

Another idea I developed while mulling over the representation of Britain's multicultural society was to integrate the subcultures of the late 20th century into the design, which I believe have had a massive influence on the post-subculture lifestyle of Britain in the 21st century, where there are no distinct, separate subcultures, but many different cultures existing in harmony on the island.

These were my thoughts for showing connections and integration throughout the UK, using simplified geometric shapes and lines that reflect the contemporary design of many modern directions of the 21st century.


Connect the dot style visuals show integration and movement throughout the country, showing that different cultural groups are not separated from each other, but interlink and work as a functioning society.

I developed this into a more fragmented image of Britain, fitting within the 12 sections of the coin.  I want to incorporate this element of the design into the image as I feel it is of some significance due to the re-introduction of this shape from the threepenny piece, a symbol of the currency pre-decimilisation.

I also looked at representing growth of Britain through use of a spiral formation, though not sure whether to take this idea further.



I decided not to continue with the development of the broken, geometric shapes as this could portray negative connotations and symbolise a fragmented culture, whereas I am trying to affirm the opposite.

________________________________



From these sketches I began working on the digital design using Illustrator, testing it out using the template on the entry form. I created an outline of Britain in a more simplified format, as well as creating a suggestion of the islands' shape using curved lines which land at random points within the area.  This flows continuously from the top of Scotland down to the southern border, representing the connections between social and cultural groups across the unified nations.






I also tried different variations of type around the image, playing with the angles at which the required 'one pound' could be displayed on the coin.  I tried to keep the text at the same angle as two of the dividing lines running across the diameter as this flows with the direction of the image and fits well around it.  This is also to add a modern twist to this design as most text on previous coins curve with the border.

Although this design suggests the geographical picture of Britain, I felt that it needed something else to create a more solid image.  Bringing in elements from previous sketches, I began creating separate geometric shapes that cover the general land area which will sit beneath the other drawing.






The 12 sided feature of the new coin brings back memories from Britain's 3 pence piece, and I've used this attribute as a grid for a more contemporary design for the coin.  Originally I had intended to use the segments as a guide for the irregular shapes that make up the land, however this depiction wasn't as obvious and distorted the image a bit more.  Instead, I've used the grid I formulated from the 12 points as a guide, making all the sides of the central image parallel to one of these.  Therefore there's only six possible angles that make up the shape in the middle.

I also changed the colour of the overlaying image to a lighter grey to give the impression that it's raised, and the darker grey for the block image to show it is pushed back - which is how I picture the design would look on the coin.





I tried out a few more variations with the type, after deciding against the more abnormal positioning as the diagonal type didn't look as good.  Instead, to make better use of the border on this side I tried out a few options using two of the straight edges as a base for the rotation of each word.

Once I'd mocked up the design on the template, I added the grid structure back in because it seemed empty without, and seeing as the design is integrated with this it seemed appropriate to include.




connections and interactions















Wednesday 29 October 2014

OUGD504 (Brief 03): Study Task 7 - User Experience Design

What is user experience design? (UXD)

- effectiveness
- efficiency
- emotional satisfaction
- quality of relationship with entity that created product/service

It enhances customer satisfaction and loyalty to the product or service, by proving that it's easy and enjoyable to use.  Self identity and relation to others is important so to create a successful product -these factors need to be taken into consideration.

Examples:
- dyson hand dryer/normal automatic dryer
- yahoo/google

The Dyson hand dryer's design gives the user an effective and efficient experience of drying their hands - it's easy to use, and works well, compared with other hand dryers that may not work very fast or have nothing that appeals to the possible user.
Google's identity is built based on what you ask it, rather than yahoo who communicates an identity based on what it values as important news.


Look at competing organisations and how they create different user experiences.  Which is better?

Supermarkets
- the layout of the store
- tone of voice
- how easy is it for customer to find what they want?

eBay / Amazon
iTunes / windows media player
Safari / chrome / firefox



How do websites create a positive user experience?

Creating an environment which will sustain user needs, means designing in the mindset that it will work in context, therefore designing not just to display the content, but so the user has a positive experience when using the website.


application of user research in the development and production of user interface. 
user centred design



Garrett's model of UXD










Methods

User research:

- observations
- questionnaires

what are the goals of particular user groups? attitudes and behaviours


Personas:

a useful tool to build a picture of what they want to get from a system or product

documents that describe a user type based on research
who they are, why they do what they do,
what their motivations and attitudes are when interacting

- photos in action
- key goals

do they find it confusing or frustrating when browsing through a particular site?


Content strategy:

What is the necessary content? 
- hierarchy


User journeys
wireframes - architecture of the site


User experience is:

- identity
- use value
- purpose tasks
- interface design
- satisfaction
- affect/emotions
- empathy
- usability
- user expectations
- efficiency



Try applying UXD methods to your web design process.
End up with a wireframe based on these considerations

Tuesday 28 October 2014

OUGD504 (Brief 03): Design for web - Development

Some varied designs using the diagonal cut/ perspective concept are shown below, and were designed with the Van de Graaf page layout theory in mind.  These thumbnails show where the images text and possible logo could go and follow a grid that splits the page into different sections suitable for the content.

Below these I've drawn out a site map which includes the homepage and 5 pages linked from there; one for each city the groups of photos are from.  This way the user can navigate around the site based on which city they want to see the architecture of.

I've decided I don't want to create a timeline showcasing the architecture from different eras as this is a common way of showcasing information about something with as large a historical background as architecture.  Instead, the architectural styles will be grouped by city they're in.



Crit

In the crit today it was suggested that I establish a specific target audience and/or purpose of the website.  I want my photos and additional research to inform and educate the user.
I could also include a summary of the building styles of one city and include on the separate pages.

Other considerations:
- make it responsive
- suggestions to compose the photos so that when cropped to fit perspective style the angular composition fits with adjacent photos
- when hovered over would reveal full image




Experimentation with perspective scrolling and design:



site map including 5 different pages of the different cities led to 
experiments with layout using that content/idea

even more below
interactive / roll of film on a reel..


Another idea to include an archive of all photographs for easier access could be done by creating a contact sheet style page to display them, which would have the photos cropped to the smaller irregular shapes (shown in sketch below).  Again, when hovered over would reveal enlarged version of full image.


Scamps

Using more defined measurements I mocked up three of the ideas onto squared paper to get a better idea of what they'd look like.









________________________

Working with idea of comparison.. needed something that would showcase photographs at a suitable size which i felt couldn't be achieved as well with the perspective scrolling.

Horizontal comparative views allows you to view two separate series of photos from different cities and navigate through either left or right.  You can select a city using the squares at the side so only photos from that city are shown in that section.  The home page is split down the middle horizontally.


I also decided to add the heading in on the left hand side rotated at a 90degree angle so make use of the space there which gives the photos more room on the page.


I want to create an entrance page for the website using a symbol I thought of earlier in the project  which uses the diagonal lines of the letterforms to separate the page.  Not fully thought about this in detail but thought to use it as a more formal page to come to when typing in the web address before entering the homepage which showcases the photos.


The homepage will have two horizontal rows of photos on a loop, which can be filtered to a certain city by using the square buttons in the left hand side bar.  This idea works a lot better than my other ones as the site has a clear purpose and navigation and allows the photos to be shown at a larger size.  An alternate viewing page will be split vertically down the middle to compare two photographs.