Responsive, 'Working With Briefs' Workshop - OUGD503

We began this session by looking to how we work with live briefs. We have began by looking into one of last years YCN briefs, 'Make Yahoo! the worlds most popular homepage'. This was to engage with live briefs to give a insight into how we could possibly begin thinking about responsive briefs for this year. 

In groups we needed to come up with a possible solution for this brief. We began by thinking about what the initial problems are with Yahoo! and start to begin looking at where the faults lie, to work out how we could improve this.

What is Yahoo biggest problems?

- Its competition, i.e. Google

- Colour Scheme

- Over-crowed and cluttered, making it overwhelming to read

- Too many navigation's

So what makes Google so successful?

- Choose what you want to look at

- Personalised

- Simplistic and Minimal

The initial thoughts we had was to De-clutter the homepage, making it less overwhelming to read and engage with. We wanted to remove any unnecessary information to make it more appealing to look at. However we knew most people would think this way so needed ideas how we could make our proposal more innovative and different. 

We needed to think about the target audience, 13-18 year olds. As they engage with social media, we wanted to incorporate this someway with the re-design of the webpage. We thought if we could link the social medias in with the homepage of Yahoo!, it will encourage the target audience to use and share the page more. 

Possible Ideas:

- Link it to all social networks.

- Drag in what you want.

- Personalised tick boxes when signing up.

- Suggestions after looking.

- Yahoo bookmarks - After searching, it will save the most visited sites, playing on this personalised idea. 

- More iconography.

- Impacting colours.

- Reminders and Calendars. 

We decided we could make the homepage interactive, to make it more appealing to the younger audience. We also wanted to personalise this, we thought as everything is on Yahoo! at the minute, news, finance, weather, we could make these a suggestion for people to look at. When signing up, they can pick and choose what they want to view. To expand on this and to make it interactive we could have almost like a drag box, in where after they have chosen what they want to view, the articles or information would open up. Making so the initial homepage was purely iconography and the information would open up when you choose to view it. Another idea we had was to sync the homepage with things like calendars and reminders, again linking in with the personalised elements. 

We then played around with possible thumbnails of layout suggestions. We expanded on the idea of the 'drag box', as well as playing around with the suggestion of a journey:

Responsive - OUGD503

BRIEF - To identify and respond to a range of competition or live briefs that reflect my emerging interests within graphic design. 

The initial briefs I have being thinking about doing:

- L.C.M Collaboration
- 'A little bit extra'
- Wallpaper
- Moo
- AXA
- 'Oranges Are Not The Only Fruit'
- Numiko

After contemplation and seen as the D&AD have just arrived, I have decided to re-visit the initial briefs I thought about. This is to see if I still have a keen enough interest in working on them. 

The Briefs I Am Interested In Now:

LEEDS COLLEGE OF MUSIC: I am still wanting to do a 'Leeds College of Music' collaboration, in where I will be able to do some personal branding or identity work for a LCoM student. I still am yet to find someone to collaborate with, I feel there have not been too many emails from people at the college and so am having difficulty in finding some suitable who likes my work. I am still going to bare this brief in mind and hopefully will be in touch with someone soon.

MOO (YCN): Moo has just released their brief on YCN, they have recently updated their brand by adding a tagline of 'Design Works Wonders'. The aim of the brief is raise awareness of their new belief and 'bring this to life' through any media that is appropriate. I feel this will help me push myself in terms of how I work, I feel the idea of 'bringing something to life' suggests movement, possible animation? I can use this brief to build on my skill set as well as expanding my work in competition briefs. 
Deadline: 19th March 2015

JOHN LEWIS (D&AD): John Lewis are wanting a re-invention of their home delivery packaging. They want to appeal to online shoppers by trying to give them a similar experience as in-store shoppers have. I feel this is a perfect brief for me to do, I love online shopping and so feel I can apply myself to being the target audience. I wanted to expand my knowledge in packaging and so feel this is another reason I should attempt this brief. I feel I can convey my passion for John Lewis itself and online shopping to hopefully achieve something successful.
Deadline: 31st March 2015

'ORANGES ARE NOT THE ONLY FRUIT' (PENGUIN BOOKS): The brief is to re-design the cover for Jeanette Wintersons Oranges are not the only fruit. The authors writing is vivid, experimental and imaginative so the design should reflect this. There are many issues and themes within the book which should also be addressed. I feel this is completely different to what usual briefs I go for, so feel this would be a great opportunity to expand my usual way of working. Making for a (hopefully) more diverse portfolio. 
Deadline: 11th March 2015

CREAM BEAUTY SALON: I have recently been in contact with a family friend who is in pursuit of some new business cards, price menus etc for her beauty salon business. I like the business as it is, as it does not have a cliche logo of a script and decorative style. For this reason I am thinking of meeting up with her to discuss if I could possibly re-design the products. 

DON'T PANIC POSTER: 'Don't Panic' set numerous briefs every few months, I have recently been looking at there most recent 'Charlie and the Chocolate Factory' poster competition. Due to timescale I decided not to submit work, but am going to keep an eye out for any up-coming competitions they release. 

NUMIKO: When Numiko came in to speak to us, they set a possible brief for us to do. This was to choose a charity organisation and design a webpage to raise awareness for the charity. I really wanted to do this brief but feel I have left the work too late to submit anything. I am going to look at timescale to see whether this is still possible to submit for. 

Design Production, Brief 3 - Study Task 7: User Experience - OUGD504

What Is User Experience? - It is about the 'Experience' not just the 'Usability'. The role a product plays in a persons life.

Why did Apple Improve on Blackberry? Apple thought about how the technology would fit into someones life rather than blackberry who didn't. The user experience is the totality of end user perceptions as they interact with a product or service. 

So What Counts?

The Emotional Satisfaction - Taking into account the users emotional reaction to the product. You see this with mobile phones etc, people are willing to defend to support there choice of mobile phone. The user experience needs an emotional connection to make sure it fits in with your life. 

Quality Of The Relationship With The Entity - The branding, if we did not support the company, the UX would not work as much. 

Broadening The Interface - When we create products of interfaces we can create more successful products. The success of a product is hugely due to the design. 

How Does User Experience Differ?

Dyson vs Regular Hand Dryer:

Dyson is a progressive company which is well known, showing that customers will relate to the product more. 

The style of the air-blade has a more appealing look, the fact it is a much stronger dryer compared to the others. 

Yahoo vs Google:

Yahoo is cluttered compared to the minimalistic look of google. Yahoo tries to show everything, rather than looking like a search engine. This is where Google look more simplistic, they tuck the information away. 

With all the information on show, does Yahoo have a more significant identity? If we don't relate to the look and information on yahoo, we will not have a affective user experience. 

DISCUSSION TASK - What products or services can you think of that have significant user experience concerns? Particularly in contrast to competing products/services?

Amazon vs Ebay - UX differs from the people who are selling and buying. 

Itunes vs Window Media Player - Both are usable, but have different UX. 

Coke vs Pepsi - Coke seems to have more of a appeal due to how they promote themselves. 

Web Browsers - Chrome syncs all bookmarks etc, making a more personal experience. 

How do we bring in design elements into the User Experience?

'The creation and synchronisation of the elements that affect users'

'Design For The Wild' - Design in Context. Not just designing for aesthetic purposes, but with the mindset in where it all works together. 

The application of user research in the development and production of the user interface. 

User Centred Designed - design decisions based on the viewer and how they interact with the site. 

Garrett's Model:

Formalised the different levels of UX and UX design, from the concrete visible to the abstract design. 

Product Objectives - What does it need to do.

Content Requirements - What needs to be there and why.

Hierarchy - What bits are more important.

Navigation - The ease of use. 

Sensory - The aesthetics.

Consider the model in relation to my website: 

Strategy: 

To inform a user in a humorous and informal way on coffee. This will be aimed at people who drink coffee on a regular basis.

Scope: 

Informal but informative coffee information. To explain 'what does your coffee say about you'. To engage coffee drinkers about the types of personality and coffee they have. The coffee information will need to explain what the coffee is, what personality type is suggests as well as comments about whether this is correct or not (engage the viewers to upload to a separate page). 

Structure:

Making sure the information is engaging to the target audience as well as being accessible. The items that are important are that certain viewers can go to the relevant coffee information that is interesting to them. I feel the order of the coffees do not need to have an order, as long as all are accessible. However other pages such as a upload page need to be obviously available. 

Skeleton:

The navigation will need to give the viewer options. I will have a single-page website where the viewer can choose to access all information, while also having a speraeate navigation bar where the viewer can go to the specific coffee they are interested in.

Surface:

The website will need to avoid all the obvious aesthetics of a normal coffee website. I am going to avoid browns and beiges to avoid all the cliche designs. I am wanting something that shows the strong, boldness of the coffee as well as showing an informal and fun elements, maybe I could show this with the type and colour choice. 

UXD METHODS: - User Research

                     - Persona

                                     - Content Strategy

                                               - Site Maps/Task Flows 

                              - Wire Frames 

                            - A/B Testing

USER RESEARCH: Real life user research and goals of a particular user group. 

Observations, Questionnaires.

PERSONAS: Documents that describe who these people are, how they interact, there motivations and attitudes.

Photos, Key goals, Behaviours. 

CONTENT/STRATEGY: Based on research and persona. What is the necessary content? What content will reflect the brand identity?

SITE MAPS/TASK FLOWS: They are the user journeys. The purpose of the website and how achievable it will be. 

WIRE FRAMES: This will be all about content, structure etc. Very similar to 'scamps'.

A/B TESTING: Method of testing a variation of a system against the existing. 

User Experience is a culmination of all aspects. I will need to think about how the customer will react and how they can connect with the site.

I will now need to think about how I will use these methods within my website, considering  how a customer will relate to the site. 

Possible Persona For My Site:

Key Goals: 

- Wants to be informed by coffee behaviour

- To have a easy and informal experience on the site

Behaviours: 

- Distracted by humorous and informal behaviour

- Wants to be engaged with 'coffee culture'

- Be able to read straight to the point information 

I Must: 

- Make sure the information is engaging 

- Keep the content concise and to the point

I Must Never: 

- Bombard the reader with too much text

Task Flow For My Site:

This session has definitely made me think more on how a user would interact with my site. It has helped me take into account and got me thinking deeper about the purpose, and how my target can use and manage the site. I need to think about how I will use these elements taught to use in the session such as content, navigation etc, and use these to make the most suitable user experience as possible. 

Design Production, Brief 3 - Study Task 6: New Media Theory - OUGD504

TASK - To research into one piece of theoretical knowledge relating to new media. 

A Theoretical Approach to Web Design in E-commerce by Jaeki Song. 

http://www.jstor.org/discover

"How the web design in e-commerce attracts a customers interest or not."

Song states that we 'measure the impact of web design elements on the beliefs and behaviours of customers. It requires an understanding on how customers interact with the site.' In the text it studies the synthesis theories of psychological and consumerist behaviour. 

To me this shows how a website is designed is hugely dependent on the target audience, the purpose of the webpage etc. It is very dependent on the users experience to whether it is going to be successful of not.

TPB: Theory of Planned Behaviour

- personal, social, control. 

'Attitude - whether we are in favour of performing a behaviour or act.' 

This shows whether the viewer wants to purchase something or not. This could be dependent on what they are wanting to purchase. Will the design on the webpage put them off if is too overwhelming? or will this need and want to buy make them have more patience with a webpage.  

'Subjective Norm - The social pressure. The opinions of others are important in deciding, this will desire them to purchase or not.'

Social pressure will have a high impact in whether to purchase an item. If peers are purchasing, it may make others. If someone is looking at an item, and another suggests it may not be suitable, this could change the whole desire and want to buy it. 

'Perceived Behavioural Control - The ease of difficulty carrying out the behaviour or not i.e. the guilt of buying.'

This is the guilt we have when buying something we do not need or want. 

HOW DOES THIS RELATE TO E-COMMERCE?

"Because purchasing from a website is a behaviour influenced by web customers attitudes, beliefs and perceptions, we apply this theory to conceptualise the process by which the design of an e-commerce web-site can influenced by social factors."

A study was produced by selecting a number of websites and categorising these into promotion, service, external interpersonal source, navigation and purchase facilitation. This was study the elements in which attracted a customer to e-commerce and whether they purchased items or not. 

PROMOTION - Critical features of e-commerce attracts traffic due to price:

If a viewer sees promotional material it will instantly attract them to a webpage. When we see 'sale' we feel we must see what the bargains are and whether we can save money. It will instantly grab the attention of a viewer, attracting them to purchase. 

SERVICE - Money back grantees, warranties, security:

This will work similar to the promotional material. When we see promotional or extra services, we feel we are getting something for our money. This theory is what attracts us to purchase. If this is designed in a way where this is obvious, it will attract more customers. 

EXTERNAL INTERPERSONAL SOURCE - Convey other peoples opinions to influence people. Customer ratings, comments and testimonials:

If we hear or see ratings on a website, it will either grow the desire to have the item to put us off completely. When websites make these ratings accessible for us to see, it gives off the idea that it is trustable product, making it easier for us to purchase.

NAVIGATION - Sense of efficiency, personalised, the ease of the navigation.  

PURCHASE FACILITATION - Comprehensive, rich information to add to the experience. They include graphics, multimedia etc to compensate not being in the store. The constraint and lack of physical access:

I personally feel this is a huge impact in attracting customers as I have done it myself. If we see the product moving thanks to video and other multimedia, we feel a sense of security. Making it so we feel better about the purchase.

Summary:

I have found looking at e-commerce and the use of different tactics to get viewers to purchase has been extremely interesting. I had never took into consideration factors such as video to show an item would help in pushing a sale, however it does and in a huge impacting way. The techniques explained in this theory really show how through the use of websites customers are still drawn, probably more so than within a shop. Looking into the consideration and placement of these techniques just shows to me how important designing for web is and something to definitely keep in mind when designing my site. 

Referencing:

SONG. J & ZAHEDI.F,  2005, www.jstor.org, [Online], Available from http://www.jstor.org/stable/20110413?seq=1#page_scan_tab_contents, [date accessed 29/10/2014]

Website I applied the theory to:

www.debenhams.com, [Online], Available from http://www.debenhams.com, [date accessed 29/10/2014]

www.topshop.com, Available from http://www.topshop.com/?geoip=home, [date accessed 29/10/2014]

Design Production, Brief 3 - Initial Scamps and Ideas - OUGD504

For next weeks critique I have begun thinking about scamps and user float charts. This is to show my peers and tutors how I am initially thinking the website will work and look. I have firstly drew up the flow chart, showing which pages will link to which. Looking at what webpage will connect with others, as well as thinking about what will be on my navigation bar. I am initially thinking of having separate pages that show the different coffees, as well having a page where viewers can upload images or quotes on which coffee there personality is. I am also thinking of having another tab showing coffee stores that are close buy to the viewer, however I am not sure if this flows with the rest of the content of the site. This is something I am going to ask in the critique:

I then have begun developing scamps based on different layout ideas. I have generated ideas based on having my website as a single page as well as having ideas for normal working websites. 

The single page scamps (on the left) I feel would work far better for my content. I feel as I am showing the different coffees I feel having them on one page would benefit the viewer and create some sort of flow to the page. I feel having it as a single-page would both combine the drinks together while also having individual sections for each coffee so they can be individual too. I would include a drop down menu on the navigation so the viewer could either scroll through all the coffees, or go a certain one they drink regularly. I think this gives the viewer the best of both. I thought about how I could make my website a little different to others I've seen, I quite like the idea of engaging the viewer through some sort of interaction element. From this I thought about including some sort of looped video of a coffee being made, or the steam coming of a coffee. This would be on my homepage, to engage the viewer and create a focal point on the webpage - however I am not sure how this would be done and whether it would slow the site down, this is something I am going to ask in the critique.

The scamps on the right show a normal working webpage. I prefer the two bottom ideas as I feel the top would be far too bare and minimal. I have been working with girds and trying to base my layouts around it. I had the idea of creating some sort of gallery on the homepage, that once the viewer clicked on a certain image, it would take them to a page. I created this idea in two ways, either a moving slide show or the images gridded up in an appealing way. I feel in doing this, will show the viewer what the website is about instantaneously through the initial imagery. I am unsure which route to go down and so will ask in the critique:

I have also begun thinking about the other pages on the site. I do not want to develop these fully yet until I have the critique on the homepage. I feel depending which homepage I go with, will define what the rest of the website will look like. However I have done a couple of initial sketches I can show in the critique just to get a basic understanding and ideas of what my peers think. I have then tried to develop these into what a single-page website could look like to show in the critique and give my peers a better understanding of my initial thoughts. I quite like the single-page website in this sketch and think it suites my content far better than a normal working website, however I need to get more opinions in the critique and see if others agree:

 

As I only have scamps as ideas so far, it was quite hard to receive feedback from peers. In the critique I mainly received guidance and advice rather than solid ideas in how to move forward. It was said to really think about colour, as dependent on the colour choice, the more it will be recognised to a certain coffee brand i.e. red - Costa, blue - Caffe Nero etc. I need to make my website individual to me, to make it's identity unique as well as recognisable in its own right. It was also said to stay away from browns and creams which was something I knew I was going to do regardless. It was also suggested to think about if it is possible to do a single page webpage, and whether it is do-able to code in the time-frame. I am going to look into the difference of coding a normal webpage as opposed to a single-page site to whether my ideas are possible. 

Design Production, Brief 3 - Purpose Of My Website - OUGD504

In preparation for next weeks webpage critique, I have been thinking about the purpose, audience and unique selling point of my website and outlining these for the session. 

The purpose of my website would be to create a humorous, informal website that still provides useful information. The idea would be to personalise different coffees, explaining the traits behind a person who buys a certain coffee i.e. someone who orders a latte is normally laid-back and indecisive. I would try and make this humorous but speaking to member of the public, getting quotes from the people who ordered certain drinks, getting their take on whether they think the psychology is correct or not. The idea would be they would read what kind of drink they were, and then they could engage with the page, i.e. if they drunk lattes, they could upload images or quotes with their drink and what they thought, sharing with the world what traits their drink has. This would definitely be aimed at regular coffee drinkers who have an interest in coffee. I could include webpages that discuss coffee in more detail, and why the world drinks so much. I could also include a sort of guide to where the nearest store is to them - as they could see what coffee they are and rush off to purchase one. I feel it USP would to engage coffee lovers everywhere by putting a personality back into the coffee rather than it be a bland, boring beverage. I think including a uploading page will engage viewers as well as informing them with secondary information that they may find interesting. 

Design Production, Brief 3 - Further Content Research - OUGD504

When I start thinking about both my summer work presentation and my initial ideas I released I would need a few more items of research. As the route I want to go down is 'What Does Your Coffee Say About You', I knew I needed some information already on this subject about the psychology behind it. There have already been some studies on this matter as well as newspaper articles explaining what certain coffees mean. As these are written in bull-points and in quite a strict manner (and I am wanting be quite informal and humorous) I need to find a way to re-write the information so it is relevant to the tone of my website and so it will appeal to my target audience.

I have found a few examples of info-graphics that have already begun showing the study in a more fun and informal way. However what I feel these lack is showing them in a more original way, and this is what I hopefully will achieve. I feel I really would like to stay away from the obvious colour schemes of light browns and the child-like type. I feel even though I have found these pieces that have started to develop on the similar ideas behind my website, there is still enough room for me to create something more engaging and interesting with my webpage:

Design Production, Brief 3 - Canons of Page Construction Workshop 2 - OUGD504

This was our second workshop into 'Canons of Page Construction'. In the session we began looking into more designers who have constructed grids such as Muller-Brockmann, Tschichold and Vignelli. I found these much easier to follow as apposed to the Van De Graaf canons we were looking at in the previous session. 

Grid Fields - The use of columns and grids is a common consistency in modernist approaches to page layouts.

Brockmann's Approach

Brockmann tends to be able to have a lot of creative decisions with his grids, while still maintaining mathematical decisions with his approach. 

How we will do it…

- Determine type area (Van De Graaf).

- Divide into two (or more) columns, separate columns, with an intervening gutter.

- Divide text columns into two, three or more fields.

- Determine type size and leading.

- Insert 'empty lines'. Field lines must be separated in order to accommodate gaps between images - separate fields lines (must be same width as 1 line of type and leading).

- 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 adjacent column will perfectly align with the type as will the image captions.

'Intervening gutter should not be any wider than the point size of the type and leading. Each field needs to contain the correct amount of lines, determining the gutter is difficult for this reason.'

I have re-created Muller-Brockmann's grid to get an idea of how this is able to be used:

The next task was to use the book and newspapers layouts we were told to bring in. We needed to think about how a grid will have been used in these layouts or not. I started by looking at a semiotics book, due to the structure I thought it would be similar to the Van De Graaf canon. I feel this was the case, however they have just developed on this further as it is not an exact fit with the canon:

I looked into some newspaper articles which seems to not work with a consistent grid. This one below seemed to have no body copy aligned, however there was certain elements such as type boxes and imagery that aligned up. For this reason I feel there would be a muli-column gird going on here:

These two pages below seemed to have a more obvious grid system going on. The columns and gutters were the same width, which made the pages more consistent:

Looking at these types of grids have given me a better understanding of canons and grid-systems. I feel the more flexible a grid, the more effective a design will be. I am going to take this new found knowledge and try and apply it to my web designs. 

Design Production, Brief 3 - Canons of Page Construction Workshop 1 - OUGD504

Today we have had our first workshop on 'Canons of Page Construction'. This was looking into canons and how they are a system of page construction. In relation to Graphic Design it refers to ways of organising type and image on the page. 

We began looking at the golden ratio and how this can be used in all aspects such as art, architecture, graphic design etc and how this is possibly used as a canon.

We began the session by trying to create our own golden ration: 

The previous slide did not help my understanding of how to do this. However, through my peers I worked out how to re-create the golden ratio. 

How I worked it out:

- Start of by drawing a line (shortest side of a rectangle first)

- Measure this then times it by 1.618

- The measurement is then the longest side of the rectangle, draw the two lines together to complete the rectangle.

- Divide the longest side by 1.618

- Keep diving the longest side of the rectangles by the amount to keep creating a square with a rectangle:

 For the next task, instead of dividing the rectangle, we worked with the square - dividing up the line width to produce the next.  The aim of this next exercise was to try and create a grid system that could possibly be used when designing, preferably for web. I found this exercise far easier than the initial as I had gotten to grips with what I needed to divide and times to end up with my grid:

In groups we discussed what we thought about the golden section within graphic design. We was shown how the golden ratio was used in things like famous logo designs and whether we thought the ratio had problems or limitations in the creative sector. 

My initial thoughts was I find the golden section quite interesting, it seems to fit in with things like nature and the human anatomy and how this has been applied really fascinates me. However, within the creative sector I feel it has been overused. I feel some people will take this into consideration when designing, were as others seem to create something that appears to fit into the ratio purely by coincidence.

We then looked at a grid canon created by Van De Graaf, who explored the proportions of a page. He created a 'distinct and lovely' shape which explores the possibility of creating more flexibility when designing for books. 

We then re-created our own Van De Graaf canon, which when explained, proved rather easy to follow.  I cannot see however, how this created flexibility. To me it seems rather structured and strict:

All in all I found the session rather interesting as it helped me explore the idea of canons more effectively rather than simply drawing a grid. Although it did this, I feel they are not as easy to follow than normal grids. I find them much stricter than I initially thought they would be and feel they would not help me in my design process. Perhaps the following sessions will change my perception. 

Design Production, Brief 3 - First Web Workshop - OUGD504

Today I have had my first workshop into designing for web. The workshop was introducing us to how to create and build a website. I was dubious at first going into the workshop I have never had the opportunity to create a website before, so to me this was very daunting. We began the workshop by looking into some of the terminology that is related to designing for web. 

UI - User Interface.

UX - User Experience. 

Different users have different experiences. Designing for the correct target audience is vital. If designed for the incorrect audience it will be inappropriate.  

Limitations

I will need to design for the lowest common denominator. After this is designed we can then can think about responsive design or how to adapt to bigger screens. You always need to start from the lowest and build up.

Web Safe Colours 

216 colours that are available to design for web, there are also 50 shades of grey. 

The colours are available through dreamweaver or any adobe system.

RGB - 16million but can't actually use these. Can be used on CSS.

RGB (255, 0, 0) - cannot be sure this will be re-used on different screens.

Web Safe Fonts

There are only a few standard fonts for web.

When designing, I will need to specify a font family. This is  so we have 'fallback' options and these are at maximum compatibility. If it fails it will trie the next one listed, rather than reverting back to default.

 I will be able to make my own combinations as a 'font family' to have as the fallbacks - I will need to think about this when thinking about type for my website.

If it has two words you need to use brackets i.e. 'Book Antiqua' or otherwise it will not recognise the code. 

If I only work with 'html' it will limit me, CSS has a lot more flexibility for design. 

CSS Font Face - is much easier and much more options. Font Face which allows me to install a font to a website regardless of the computer. It is still accessible. However it may breach licences and copywriter laws. Font Squirrel is free and has a licence.

If I create my own typeface I can use font squirrel to install it.

Size and Dimensions

640 x 480 (Lowest Common Denominator)

800 x 600 (This is the more recognised LCD - these tend not be on the web)

1024 x 768 (Majority of people will use this level - one we will be using)

1920 x 1080

2880 x 1800 (200 ppi)

File Formats

Working with files for web have to be png, gif, pdf, jpeg.

The resolution should be 72 ppi however this is wrong and the majority of screens are able to produce 92 ppi - However the smaller the file the quicker the image will load. I will need to bare this in mind and make files as small as possible so it does not use users bandwidth.

Lossy - save file formats, it gets rid of information's, compresses it.

Need a scamp for next weeks session.

Maybe decisions on font, colour etc.

Look at design decisions before I build it.

Site map how the website functions.

Get scamps signed off to protect yourself. Consider what I am able to do.

Wire frame - width, height, measure each section.

When we started on dreamweaver I was slightly worried if I would be able to understand the techniques and processes. However our tutor made the workshop very easy to understand. We began by looking into how to set up a document in html and how to link and save folders with the website:

I now know I will need to create a main folder to contain all imagery and text in. This will keep everything together so all information is in one place and dreamweaver knows where to find all information - similar to InDesign. 

We then began coding, which turned out to be simpler than I thought: 

Index - Homepage

< > - Open and Close a Tag

</ - Closing a command. 

<head> - Head of webpage, effect visibility. 

<body> - All the design work.

The most important tags are: title, body, html, head. 

* - Remember to save webpage. 

I imputed text to begin the process of adding information to the webpage:

I previewed how the webpage would look:

We then began looking to how we use CSS in dreamweaver to create webpages:

As the tutor stated before, designing on CSS gave me much more options for designing on web. The difference between CSS and HTML tags are as follows:

{ - Open command

; - Pick option 

} - Close command

We then was taught how to design all work on CSS as a 'stylesheet' and then link this with the saved HTML file. This then will save any changes made on the stylesheet and add them to the HTML:

We then learnt about changing and adding a 'font family' while also looking into size and dimensions:

For the dimensions we was shown how to create a background but working how to centralise this on the webpage. This was harder than I initially thought this would be but is going to be helpful to know for my further layouts and compositions: