OUGD504: Brief 3- User Experience Design

Experience isn't just usability it is a combination of different elements which forms as a role in an individuals life. 

Along with the functions of the product the individual must also have an emotional and strong connection to the brand which perhaps could reinforce their own representations of themselves through fashion products or other items they purchase. The product must aim to please the consumer in return of their purchase and therefore the user experience is vital to ensuring this return of satisfaction. The product should aim to suit the target audience's demographic and psychographic needs. 

We spoke about the idea of different websites having specific contrasting user experiences. Particular in terms of the relation to our current web design brief. We spoke about how different Ebay and Amazon are in their user experience. They both sell a wide variety of products but Ebay is perceived as being for the seller as it contains non professional photographs by individuals selling second hand products which is ideal for a quick sale. Whereas Amazon is mainly for the buyer and the idea of trust as the photographs are professional and the products have longer descriptions which generally provides a more trustworthy service where you would happily pay more for the product of choice. 

User needs/ product objectives: 

To provide correct and trustworthy information which can be consumed and used in their own practice. Audience of animal lovers who want to learn more about the skill set and create a stronger bond with their equine or potential owner. Purpose is to teach people the basics of horse care so they can understand themselves. 

Content requirements: 

Needs to include detailed information about each of the categories which will be a combination of images and text. It needs to be a friendly and non intimidating visual representation of the lifestyle created with owning a horse. The pages will include headings and imagery of each of the objects/products I will be describing. But will be mainly visual and small amounts of text because typical horse care books are intimidating with the amount of text. 

Interaction and navigation:

Home page needs to be simplistic as it the information beneath which will be the most important. Which is almost the same concept as google, because they keep everything hidden to the viewer at first. The links need to be able to be clicked to go onto the separate pages as the information needs to be split up for it to be read easily as it will be in small chunks rather than a scrolling website which could create the intimidating feeling people get from the current books. 

Sensory design:

The content on the page needs to be delicate and not too modern. This is because the issue is not hard hitting and should be seen as a friendly approach. It is a friendly environment where people should feel comfortable to view information at their leisure. The colour palette shouldn't be too bold because horses and equines as a whole are normally situated in the countryside and on farms and therefore this would somewhat link back to the skeuomorphic ideas I initially looked at. The images need to also reflect this natural and almost organic/ ego friendly design and therefore I feel as though the images should be sketched to merge illustration with web design. This would mean that it still contains a human element and doesn't move too far away from the hands on approach of the subject. 

Persona of someone who would view my website: 

Alice has a 15 year old daughter who is currently taking riding lessons and wants her own horse after being told about a few for sale in the local area. She wants to learn more about what owning a horse would be like before answering to her daughter. 

Her goals: 

Wants to learn more and be educated/ informed

Wants an honest opinion to inform her answer

Wants to learn basic information all in one place

Behaviours:

Gets bored by large amounts of texts

Wants correct information she can trust

Doesn't want information which is too in-depth

We (I) must: 

Clearly show separate and condensed subject matters

Provide visually pleasing and engaging design

Ensure concise body copy to be ready easily

Show annual costs and more in-depth advice on basic care

We (I) must never:

Include large amounts of text and bore the reader

Use language which is too complicated to understand

Make the navigation of the website complicated

Task flow: It is important to know that anyone accessing the website already has an interest in equines in some form. Or gain information because they wish to know more about a certain issue. Below is an example flow chart of possible viewers who will engage with the website:

OUGD504: Brief 3- Website Critique

The critique was based on the scamps we have created and whether these would be feasible, however it focused more on what the purpose of the website would be and forming/designing the content around the purpose. The feedback I received was that the information didn't seem to fit the target audience and that I didn't specify the audience. However the audience for horse care is any gender and more or less any age but mainly young adults. It was stated that using illustrations would be seen as quite childish and perhaps would undermine the adults viewing the website, but from looking at the content I have been in the process of creating, I don't think these look childish. 

They also stated that the information doesn't suggest places to buy or loan a horse but there is such a wide variety in links but the best places is to ask local veterinary surgeries. I also think talking about buying a horse is a completely different issue to teaching people about the basics of horse care, as this information can be consumed by people who are interested in animals, perhaps take part in ridings lessons or who want to own their own horse eventually. It was mentioned I could create a step by step guide to buying a horse too, but to add to the point previously buying a horse was not the purpose of my website. 

So from the critique I have been enable to pinpoint the exact purpose of my website.

Purpose, audience and aims:

To educate and inform people about basic horse care. HAPPA (horses and ponies protection association) spoke about ill-treatment and abuse happening because of lack of education and some forms of ignorance. Education about basic correct care could improve the current equine crisis in the UK as it prevents abuse. With the rise in cases eventually the charities will be unable to cope with demand. The website will educate mainly young people of any gender, but will actually be for adults and older teenagers alike. This is because horse owners tend to be older teenagers and adults with a larger disposable income. The website aims to educate people on five basic topics within horse care, as there are masses of information available it condenses these to basic stable management which I have learnt myself. I have also taught this information to children and adults on horse riding lessons in previous years and the knowledge improves the bond and trust between human and animal but also improves the riders confidence within lessons. There are other websites which have similar content available however their layout and designers aren't visually appealing and as a graphic designer I think it is important to continue with the important purpose but also make it aesthetically pleasing to the audience too. 

Examples of current websites: 

http://horses.about.com/od/basiccare/tp/Horse-Care-101-Horse-Care-Basics.htm

This website has all the right information but it is laid out to look quite boring and on opening the website there isn't much interest gained. 

http://www.basic-horse-care.com/health/poisonous-plants/

This website looks visually better but the distinct lack of some parts of the information isn't successful such as only naming a few of the vital brushes and not showing pictures as to what they look like could perhaps be a downfall. I think the content I will put into my website will work much better than this. 

OUGD503: Penguin

What makes a good book cover? What should it include?

http://www.hbook.com/2014/03/choosing-books/horn-book-magazine/makes-good-book-cover/#_

Responsibility to the book- this means that it must stay true to the book even through the artist's interpretation it must show the narrative in some way.

"A book cover’s paramount job is to communicate the book’s content and convey information concerning both what the book is about and what the book is like. The front and back flaps have something to say, and experienced readers may find clues in a summary statement or author’s note. But the text and graphics on the cover deliver the most immediate and indelible impression. A cover’s imagery can establish character, setting, and plot. A cover’s style can suggest tone, mood, and narrative quality. And extraordinary covers employ both elements in synergy."

"Responsibility to the publisher

While a book cover’s primary relationship is with the book it introduces, it also exists in relationship to all of the other covers on the shelf. Thousands of titles for young people are published every year, each competing for the attention of booksellers, librarians, and readers. The cover has a critical role to play in giving a book a unique identity. Also, it has to sell the book!"

http://www.wired.com/2014/09/makes-brilliant-book-cover-master-explains/#x

 “finding that unique textual detail that…can support the metaphoric weight of the entire book.” 

"That, of course, requires actually reading a manuscript closely enough to A) determine the metaphoric weight of the book and B) find a handful of relevant details within it. In other words, making a great book cover isn’t just about making. It starts with understanding."

“It’s very tempting to read a book only for visual cues when you’re a jacket designer,”

‘Oh, her hair is blond, and it’s a cold climate, and they live on a hill.’ That’s just really treacherous. Because if you read that way, you’ll miss the point of the book. And almost never are those kind of details the point of the book.”

Ideally, every dust jacket is unique to the book it’s wrapped around. But the realities of the marketplace often dictate how experimental a design can be. 

Therefore to start this brief I need to begin with reading the book and picking up on points I may want to portray through the cover. I don't think you can start thinking of ideas based from nothing so I am going to go through and write out the concepts which I think are relevant and perhaps ideas for visuals and sketches. 

OUGD504: Brief 3 Web workshop

Html is limited and must use CSS  (cascading style sheets) to design the website. 

wysiwyg (what you see is what you get) is how dream weaver works but will use a web browser instead because it is better to view. 

SEO search engine optimisation. 

http: hyper text transfer protocol. 

UI user interface 

UX user experience- must relate to the target audience and be entertaining and useful

limitations:

have to design for the lowest common denominator 

Web safe colours: 

216 web safe colours 

These are from the RGB colour set 

These colours are consistent across the web using html 

a three or six hexadecimal code

eg: red #FF0000 #FF0

When creating your website in dream weaver you must have chosen the colours beforehand in photoshop and illustrator. 

RGB is capable of reproducing and each colour has 256 unique shades of each value

 red: 256 x green 256 x blue 256= 16, 777, 216 

A wider range of colours can be created by using CSS rather than html. You specify the percentage of 256 per RGB. 100% red would be: rgb (256,0,0)

Need to consider who the target audience is in relation to colour. Does it need to be consistent or do you want to use a range of colours? only new computers can use RGB.

Websafe fonts:

Must chose a web safe font for designing. 

rather than choosing a font you chose a font family, if the browser doesn't support the first one it would go for the next one. 

Serif example:

Georgia, Serif

"Palatino Linotype", "Book Antique", Palatino, Serif

"Times New Roman", Times, Serif

Speech marks need to be put around a font which is longer than one word. 

Sans-serif example:

Arial, Helvetica, sans serif

Tahoma, Geneva, sans-serif

"Trebuchet MS", Helvetica, sans-serif

Verdana, Geneva, sans-serif

In CSS @font-face can install fonts to a website. However this can breach copyright laws for specific font foundries. Font Squirrel will show a list of fonts which would work, however need to ensure that the fonts are viable for use as well as distribution. 

Size of the website:

Computers used to be able to produce 640x480 

800 x 600 is also too small for a desktop

Most designers now choose to design at 1024x768- should start with this size

Although modern macs are now capable of 2880x1800(220ppi)

file formats for images

png, gif, pdf & jpeg 

jpeg doesn't use transparency, would have to use a png

moving images would need to be saved as an animated gif

resolution: generally accepted as 72ppi but is an outdated number 

but computers can now be 96ppi 

images can also be used at 220ppi but this would create a large file size

all images/work need to be saved into one file: called test
file needs to be lowercase and have no gaps/punctuation
In college the work needs to be saved into user work, but when leaving re-save the folder onto the desktop so the work is not lost

Setting up a document: 
Tell dream weaver where the root folder is. This folder should contain all of the content for the webpage. Each time you log in you must tell dreamweaver where the content folder is. 
site> new site
file> new> html> save as

homepage must be saved as index.html

html document just simply opened:

Coding in html would mean that each page would have to be coded for how it looks. This is why CSS is really useful as it creates a style sheet which can be applied for all the pages.

To add useful notes which are hidden write  /*wordsblahblah*/

set up CSS document: 

to close any line put ;

Link CSS document into html. CSS designer + attach existing css file

link file do not import. 

font size 10pt is 14px

create a container (size of the frame) in css.

div is created by typing   #container{

width:1024px;

height:768px;

The colour automatically appears to the left with a border. 

Position: absolute     (tells the computer you are commanding)

You must move the square to the left first before centring the imagery. Top 0 means that there is no gap at the top of the page. 

In the next session we will be dividing up the frame of the website and learning how to add particular sections to the format. This session was incredibly helpful and has given me some confidence to think that I am able to create a website as initially the thought of using html and css was quite daunting. 

OUGD504: Brief 3- Scamps

Scamp 1 based on skeuomorphism (photographs real life looking). Each object would be made clickable to go forth onto the next page which would contain content based on each of the topics. The quick sketch is meant to be a tack room which naturally would be placed near a barn and therefore contain all of these items to keep out of the cold and bad weather so therefore the idea of it being similar to real life would work. However the photographic elements would be quite difficult even though I love the idea and I think if I was more skilled with coding and digital design I would want to pursue this further. 

This idea is based on it being interactive in terms of the content so when an item is scrolled over it some of the information would appear at the side of each object. I think this would work best with bright colours and quite a fun and young/ quirky aesthetic which could appear to be quite young and therefore appeal to a slightly younger audience. 

This idea is the most structured because it is quite simply split up and I feel this would be the easiest to use in terms of its user experience and also when translating into a responsive design. I could also use this opportunity to spend longer on the actual aesthetic of the typography and imagery as the layout would be simple and easy to read. This would mean that with the simple layout it could be used by children as well as their parents or someone slightly older as horse owners (beginners) can be virtually any age. Within this scamp I have concentrated on the idea of the visuals being in natural colours to represent the fact that horse riding and farms are quite rustic and belong in the countryside and therefore are not generally brightly coloured. I want to use a friendly font because I feel as though a bold sans serif could be quite intimidating. 

OUGD504: Brief 3- Saddlery

·      Always buy the best quality tack you can afford as a badly fitted saddle can cause permanent damage to the horses back. There is a whole range of different saddles for different purposes but the most suitable for overall use is the general-purpose saddle. This has combined elements from dressage and jumping saddles. It is important that the saddle is fitted by a saddler to ensure that is comfortable for the horse. Many people use a numnah (pad) under the saddle, which help with weight distribution girths are used to ensure the saddle stays on the horse and can be bought in a variety of different materials.

·      The bit and bridle provide the basic lines of communication between horse and rider. There are many different types of bits but the most common is the snaffle. This is the most simple and popular bit and these also have different designs, which can remain still or have small movements in the horse’s mouth. The bridle shouldn’t be fitted too tight to the horses face and you should seek correct advice when buying the bridle of choice. A properly fitted head collar and lead rope should also be purchased to turn horses out into the field.

OUGD504: Canons and page construction

Van De Graaf and Muller Brockman grid:

His theory based on grids and page layouts determine the the type area based on the Van De Graaf method. The gutter shouldn't be bigger than the point size as the way the page is split up should line up perfectly. I also put in the vertical lines and split them again into 6 segments. However with this method it seems to leave a large amount of the page empty of content which in terms of page layouts could be useful as the main content could appear here but the extras pieces placed on the bottom. 

From looking at this way of finding how to split the page up we then looked at magazines and newspapers. I found that they non of the pages seem to have an identical grid but one which is modified for the content. For example the newspaper has long thin column which seems to work the content into more like a 4 or 5 column grid rather than magazines which have fewer columns and larger pictures to fill them. 

OUGD504: Numiko visit

Numiko visited and presented an interesting talk about web design and their design studio about how they work and I found it interesting that they employ graphic designers who know little about coding. Their examples of websites they produced appear easy to use and simple (but colourful) including the website above "make things do stuff". The use of iconography is really a strong aesthetic in their websites in splitting information up. 

The most interesting aspect of the talk that I can apply to my own web brief (brief 3) is their expression for the importance of grids. They also spoke about how responsive design is incredibly important now that people access the internet on a range of different devices. They suggested firstly thinking about how the website will function on the largest and smallest scales so that would enable you to create changes the in-between sizes such as a tablet or iPad. 

OUGD504: Rotational task based on new media

'This is a rotation task to be undertaken when your group is not either in a web workshop or in a group crit.

The emphasis of level 5 and level 6 is building your critical abilities and using theoretical research to inform your graphic design practice.

Therefore you are being asked to find and research one piece of theoretical knowledge relating to New Media (including web design, app design, social media, etc.) which will inform a blog entry on your design practice blog.

You must reflect on how this piece of knowledge may inform graphic design practice within new media and digital design.'

Bell, D., Loader, B.D., Pleace, N., and Schuler, D, 2004: Cyberculture The Key Concepts. 1st edition. London: Routledge.

'Cyberspace is a term used to describe the space created through the confluence of electronic communications networks such as the internet which enables computer mediated communication (CMC) between any number of people who may be geographically dispersed around the globe.'


'The term cyberspace was first coined by the writer william gibson in his novel Neauromancer, where he described its as a consensual hallucination… a graphic representation of data abstracted from the bank of every computer in the human system. Unthinkable complexity. Lines of light ranged in the non-space of the mind. Clusters and constellations of data. Like city lights receding' (1984:51)


His theory suggests that the Internet is a representation of the real world and isn't necessarily a true reflected it is in fact distorted by those who post the content. Much like graphic design the individual or company who post content carefully construct representations of themselves through ideas such as branding but also through other visual or written content. It is not a true representation of the real world and is in fact a world we chose to be part of and passively accept.


John Perry Barlow suggests that the internet and cyber space provides 'the promise of a new social space, global and antisoverign, within which anybody, anywhere can express to the rest of humanity whatever he or she believes without fear. There is in these new media a foreshadowing of the intellectual and economic liberty that might undo all the authoritian powers on earth' (Barlow 1996a)


This means that Barlow's theory suggests that the Internet is completely separate from the real world, which I would argue to be untrue as the whole world does not have access to the internet it is simply only for those who can afford to do so. However the internet does provide a democratisation of information as anyone who owns a computer can access information they need which ensures it isn't for those who are the most wealthy, simply anyone who owns a computer may search or write for themselves online. However with this power of the individual and the democratisation of thought and expression of opinions there is fault as in some cases it can encourage a negative environment of bullying individuals online.


As Graphic Designer's it is important to understand that these issues are present and there are large amounts of negative content online as well as positive, we should strive to be ethical with our choices and use the internet for good and to create change. The idea that people from all over can access the Internet the world enhances the idea of globalisation, which means that different cultures have had the opportunity to merge with others, which include products and companies. This means that with the use of the Internet in particular linking to graphic design projects and briefs can be created collaboratively through using the Internet as a form of communication even though the individuals are geographically apart.