My process began by creating scamps for diferent styled websites. I wasn't sure at first what the ton of voice for my website was so sketched some more and less formal designs.
This first one is quite a modern design with semi-transparent boxes over full screen images. My plan is to use the photos I've collected as much as possible as I haven't used photography much in my past projects and have usually stuck to vectors.
The other six sections of the pages would have had a 3 column grid to display the content as simply s possible.
A variation of this design (below) had full width images as headers with short slideshows of my images.
In a crit I was told that my subject (bar tending) is quite informal, so my website should reflect this and be quite messy. This gave me the idea to create a skeumorphic website that looks like the messy notes of a bartender in a book. I quickly grabbed a camera and took the photos below to explain my idea as best as possible.
The homepage would be the front of the book.
The tabs of the book would be used to navigate the website as seen below.
I began mocking up the simplest way to achieve this design. The main problem I found was deciding how the content would scroll and the background stay static.
There were 2 diferent ways that I saw the website could scroll. A. showing a white page which the content would fade in and out from the top and bottom when scrolling or B. having one long scrolling page which a scrolling background.
User experience design (UXD or UED) is the process of enhancing customer satisfaction and loyalty by improving the usability, ease of use, and pleasure provided in the interaction between the customer and the product. UXD is a growing area with web, app, and programme design.
Experience is not usability.
The role a product plays in a persons life.
Apple is a pioneer within UXD. Their iPhones were designed to make user experience easy and seamless from having never uses a touch screen phone before.
The user experience is the identity of the end users perception as they interact with a product or service. These perceptions include effectiveness. (how good is the result?). Emotional satisfaction (how good does it feel?)
Comparing the user experience of a dyson air blade and dryer and a normal hand dryer we can see that people will have a better user experience with the dyson because of how you interact with it (putting your hands inside it, instead of underneath it). The slick and unique look to it also gives the user a lasting impression of the product. above all the effectiveness of the design will create a good impression on the user.
What products or services can you think of that have significant user experience? particularly in contrast to competing services?
Waitrose: Charity chips, Calling staff 'partners'
Pinterest and Tumblr: unlike some other blogging websites have a 'drop in window' upload system which makes it very simple to upload content.
Pinterest also link you to the original source which saves the user searching through the web for it.
Pinterest:
Original source:
Visual Design - Informal, Interactive, Immersive.
Navigation Design - Skeuomorphic tabs
Information Architecture - Categorised into sections
Content Requirements - clear information
User Needs - entertainment, information, learning
Site Objectives - To teach, inform, supply information in an entertaining interesting way
UXD Methods
User research- real life user research - goals of particular user groups. attitudes and behaviours while completing a task.
Personas - personas are documents that describe a user type based on research. Personas describe a specific person who acts as an exemplar of a particular group. what influences their choices? how do they interact with software? what are there aims/goals? How do there want to use your website?
Contents strategy - Based on user research persona documents as well as the overall brand / project strategies - what is the necessary content? Hierarchy? what content reflects the brand identity? use data?
Site maps/ Task flows- show the process and navigation of the website. What needs to be done?
Wire frames- creating mock-ups (scamps) of the website and yes its functionality.
A/B testing- comparison of designs to see how the user is engaging with certain parts of the design and not with other parts.
Persona for my website
My website is aimed at everyone ranging from the ages of 18-25 as it is for people who want to know more/be a bartender. Student. Short attention span. Prefers images/videos and short pieces of writing. The user is there to be entertained, find out interesting information (learn, but not through reading too much). Hates adverts and unnecessary content. Content should be easy to find and well labelled.
HTML - Hypertext markup language - is the language used within dreamweaver
CSS - Cascading style sheets
WYSIWYG - What you see is what you get
SEO - search engine optimisation
FTP - File transfer Protocol
URL - Uniform resource locator - address to the folder that contains your website
HTTP - Hypertext transfer protocol
UI - User interface
UX - User experience
Limitations
Web safe colours
only 216 colours that can be represented on a website. Web safe colours can be shown in most adobe programmes to help you choose an appropriate colour for web.
When colours first arrived on the web computers could only support a maximum of 256 colours on their 8-bit monitors. A list of 216 'web safe colours' were identified.
These colours were. are reproduced consistently across the web using HTML, specifically a six or where possible a 3 digit hexidecimal code.
E.g. Red - #FF0000 / #FF0
The RGB colour mode is capable of reproducing 16 million diferent colours, significatnly more than HEX colours.
Red 256 x Green 256 x Blue 256 = 16,777,216
The wider range of colours can now be reproduced using CSS rather than HTML
The full RGB colour range would only work on fairly new computers. Choose your target audience carefully, as you may end up designing a website that can not be shown on certain peoples computer.
Web Safe Fonts
For a chosen font to display consistently across different computers a standard font must be used
Further to this a font family is chosen giving several fall back options to ensure maximum compatibility between browsers and systems.
With CSS you can install a font onto the web server so that it will work on any computer. Using this technique can break copyright laws of certain font families.
Size of the website
640x480
800x600
1024x768 - suggested size
1920x1080
2880x1800 (220ppi)
File Formats
PNG
GIF
PDF
JPEG
72ppi is suggested, but is massively outdated. 72ppi is used to keep to file size very small and easy to load.
768 x 1024
header = 160 Basic Coding
<html> tells the web browser that you are using the html language
</html> shows that you are going to stop using the html language
All tags have an open and close tag. One has a code and the other has a slash (/) with the code to show that it is the end.
Some examples are:
<title> and </title>
<head> and </head>
<body> and </body>
The content of the website has to be written in between the open and close tags.
Here is an example:
The code will look like this:
Here is how the preview looks in Dreamweaver:
And here is how it looks tested in a web browser
In a CSS file we write down the attributes that we are going to give to part of our website. Below we have use { and } to make the body text a variety of fonts.
Here is how the website looks once we have changed the font with CSS
We can see that the original code is now linked with our stylsheet.
Here we have created a blue box that surrounds the text with CSS code.
The code for this is seen below as 'container'
We used a code to centre align the box and change the height and width.
This project was a nice way to start the academic year. I am pleased with my final outcome, although I would like to have experimented more with stock choice and produce a more interesting diagram for the inside of the leaflet. I found that most of my paper I tried to use lost a lot of colour when I folded it, leaving the design looking messy which did not fit with the clean, abstract look that I was going for. I am happy with having an abstract leaflet design for this project, but I am aware that in reality the design is quite confusing to the audience and possibly not practical for an everyday leaflet. The design would be suited for an abstract art exhibition to keep in theme with what is on display.
I have learnt in this project that there are far more creative possibilities when producing a leaflet. In previous projects I have simply used a tri-fold, concertina or gateway fold. This will help me in produce more effective outcomes in future when a leaflet is appropriate. I am eager to try out some of the folds used by my peers as well.
This has been a disappointing brief for me. I would like to have created a hand rendered type based logo, but feel as though I have cheated in a sense by using a font. My attempt to learn hand-rendered type was quite successful but unfortunately a week is not enough time to master it to the standard that I would like the logo to be at. Despite all of this I have learnt a considerable amount from my research. I have further learnt the subtle ways that a small change can make a big difference when representing a brand with a logo. Consistency is key when producing a brands identity. I have also learnt that the most obvious solution is not best solution in most cases. The obvious choice would have been to portray the vegan bros similarly to other vegan products, but I believe my choice to portray them differently payed off.
I plan to continue learning hand rendered type and using what I have learnt about branding in future projects to create a strong series of designs that work well together as a body of work.
We began looking at the diferent canons again, and was set the task of creating a Van De Graff page layout spread. The steps were as followed:
1. Determine type area.
2. Divide into two and (or more) columns,.separate columns, with as intervening gutter.
3. Divide text columns into 2, 3 or more fields. (For the purpose of this workshop use 3 fields).
4. Determine type size and leading.
5. Inset 'empty lines'. Field lines must be separated in order to accomodate gaps between images. Separate field lines must be the same width as one line and leading.
6. Each field should contain a number of lines of type while each empty line should be able to contain a single line of type. Images placed on the ajacent column will perfectly align with the type, as will the images.
What we have created is a Van De Graff layout spread whilst incorporating some of the principles that Josef Muller-Brockmann created which can be found in his book 'Grid systems in graphic design'.
Here is an example of his principles in use. Here a 3 column grid has been used, aligning all the text to the insides of the centre column.
He would leave a lot of decision making up to the designer: gutter spacing, amount of columns etc.
To see some layouts in action, I began looking at books, magazines and newspapers and outlined their grids to see how they were constructed.
This book uses a very simple two column grid but changes thought to...
...This asymmetric two column grid.
This magazine has used a 3 column grid and causes the page to look more cluttered.
Canons are systems, methods or approaches to a particular practice. In relation to Graphic Design it refers to the ways of organising type and image on a page.
Canons can be helpful in your practice especially when designing publications layout, however, they can also encourage complacency. It is our job to study canons of page construction while also maintaining criticality
The Golden Ratio
The Golden Ratio is a harmonious mathematical proportion that has been used and studied in mathematics and the arts since Euclid (Ancient Greece). Pacioli coin the term 'Devine Proportion'.
It is often credited as being able to delivery aesthetically pleasing and harmonious composition due to its repetitive and natural sequence. The sequence can also be found in nature
The golden ratio is as follows:
a to b = 1:1.618
a + b to a = 1:1.618
How to do it
100cm x 1.618 =161.80cm
100cm/ 1.618 =61.80cm
100cm= 61.80cm + 38.20cm
The ratio of 61.80cm to 38.20cm is 1:1.618
The Fibbonacci spiral is created by using this sequence to make squares that are 1:1.618 scale to each other.
Some people use the fibbonnaci ratio in logo design to create a harmonic design. It was claimed that the apple logo did this but it is not true and forces the spiral on the design when it was not originally intended.
Some designs were designed specifically with the ratio in mind as seen below.
The BP logo uses a variation of the ratio that is commonly seen in nature on flowers and fruit.
The amount of spirals going each way is always a number in the fibbonacci sequence. 0,1,1,2,3,5,8,13,21,34...etc
The is explained in this video well.
The spiral can also be used in photographic composition as seen in the examples below to again create a harmonic layout with the photo...
...Although this is just a more complicated version of the rule of thirds. It is believed we like 3rds and numbers in the fibonnacci sequence because they are more natural. A photo split into halves is too mathematical to create a harmonic composition.
The Spiral has also been used in web design layout and can often be used to dictate where the viewers eye is lead.
We began drawing out our own fibonnacci sequence in the commonly seen square sequence as seen below to understand how it works.
I looked at ways that the sequence can be used alternatively with the scale of shapes.
I then split creates a grid from sequential numbers that could then be used for page layouts.
Here is a Ted Talk video that goes into more details about the sequence and it's applications.
Van De Graaf canon
J.A. Van De Graaf was a 19th century ducth scholar of book design. He observed a system of page layout used in page layout design since Gutenberg and even in some early Medievil script.
This leaves you with an area that can be used for body text.
Raul Rosarivo adapted this canon into a 9 column grid.
Jan Tschichold adopted a similar approach influence by Gutenberg layouts. In studying these layouts Tschichold deduced that in order for these canons to work harmoniously the page ratio must be 2:3.
There was much discussion as to if all of these rules,canons and ratios were needed or useful. In my opinion they are all interesting and worth experimenting with as they are proven theories. This is to say that thy are not to be used in every single piece of design.
