Design For Web

List the information (content - initial research from previous session) you think you should be incorporated on the website you wish to design - This will not be your final design, although it will highlight similarities and gaps of knowledge. List pages and the content within those pages.  Keep it to 5 main pages.


This was my drawing of the pages and the content to go on the pages.

 Red Arrows indicate navigation


 Doing this helped us to define what we thought would go on our webpage, although not being set in stone it gave us an idea of what we need and don't need, it again also have us an idea of how we could navigate around the website. 



We then drew a design of what we though our homepage would look like.

I then had to leave for football so received no feedback on this, but i did get feedback for this same scamp in my web session. Shown on my web session post. 

Design for Web Session 2

To start in today's session we firstly lay out are scamps so people could go round and comment on them and give us feedback. 

Images of my scamps

Feedback on my scamps

Favorite design is the one in pen

I like the logo placement the most on the third one but layout and access to each film on the middle one. Downward links relate well to film. 

I think there is a lot more potential that what is here, imagery? 

Logo placement is defiantly better on the third one, whilst the navigation seems clearer on the 2nd

Like the simplicity of the pen deign. Clean and efficient. Like the icons on the end design

     

Creating the website

we need to specify the width and the height, we did this by putting in a open { the pressing enter and typing in width: and the specifying the width and height as shown below.

On source code we then created the container or wrapper, this is the outsider of the website, it contains it all. To get it we used the <div which brought up id= and we typed in container

close using the </, this then selects anything that hasn't been closed yet and automatically comes up
so </div> came up

we then went on the css sheet to add a colour, this was done by pressing return and then typing in background: then hashtag, then select colour, i choose the blue, this then fills in the container we created earlier. 

refresh the web page to see if it has worked correctly

this then centers the image as seen below 

Next creating the navigation bar, in css we created this

We then created a logo in illustrator which we could then move over to Dreamweaver, Simon gave us 1minute to create it, we then saved it in illustrator, by using the save for web button. We saved it as a PNG 24. 

Web Session, Design Production

In today's class we were put into groups to discuss what we thought about navigation. we were asked 2 different questions. 

Part 1 

What are the common conventions of navigation? 

what out group came up with was: 

• Search bar
• Text links
• Photo links
• Navigation bar
• links at the top of the page
• links on the left of the page 
• logo at the bottom 
• Breadcrumbs navigation, links to other websites 
• Social media links
• User orientated links 
• Video links
• Auto updates intuitive to user 
• Navigation indicator, change of colour, tab, underline 

What are uncommon conventions? 

• Scroll down 
• Scroll across 
• type search directly, designspiration 
• links on the right side of a website
• footer navigation 
• Eye motion 
• 3D View
• Voice

Flow diagrams

Schematic representation of a process which can give a step by step solution to a given problem

MY DIAGRAM 

Part 2

How do structures help/hinder the design?

Do they reveal any aspects of the interface design that are particularly good or bad. Look closely at navigation and indicators although other design aspects should also be discussed. 

We were asked to use the examples we brought in to show what grids were where, we drew lines on each image to represent where we thought they might be.


The examples i brought in

 

Some of my examples were extremely obvious where they had used a grid, some were more complicated than others as well. It followed on from a session we did in Phils lesson last year, whereby we looked at newspaper articles and split them into grids. The same applies to websites, they eye is drawn to certain points of the screen, as shown by the rule of thirds, they eye is drawn to the top ( the logo or heading ) and then down onto sub headings and footers ect, ( the lower thirds of the rule of thirds ) 



  

Responsive Studio Task

In today's session we all brought in our chosen briefs. Fred firstly gave us a a refresh of what the module was about and what we would be doing. He then gave us 10minutes to write down what we wanted to learn from this module.


This list encapsulates my chosen things and then after there is some added in that the class came up with.

1. An understanding of how the professional industry works
2. How to go about selecting the correct brief 
3. How to go about designing for a brief that benefits me but also sticks to the brief 
4. Learning how to enter competitions in the correct manner
5. Learning how to work with a client 
6. Carefully selecting the briefs that i will most enjoy 
7. A better understanding of networking and getting my work shown 
8. Stronger presentation of my work for clients 
9. To win competitions and earn money 
10. Who i am as a designer, what i want to produce 
11. Awareness of the industry 
12. Connections with clients and companies 
13. Motivation to get involved with work outside of uni
14. Time management of multiple briefs
15. Broadening my practice 
16. Distribution + Context, relation to production 
17. To win things 
18. Portfolio development

After this we were then asked to write down at least 10 things why we chose the briefs that we had, this list again has my own and the classes suggestions in it.

1. My age range, so i should have a better understanding 
2. What I'm interested in 
3. Chance to look at different production methods
4. Is a short brief 
5. Interesting concept 
6. Will make me think 
7. Get me back into using type
8. Has a lot of scope, variety of products 
9. Get to look at packaging 
10. Focusing on my strengths, but also a chance to step out my comfort zone
11. Social and ethical issues 
12. You get paid 
13. Realistic deadlines 
14. Will miss out if the deadline isn't met, real deadlines 
15. Free to enter 
16. International recognition 

Next we were put into groups and we were set a task to answer questions about a brief from last year given out my DNAD. 

The brief we were given was about cycling on EuroSport.

At first we thought that these briefs provided us with very detailed information. 

And so Fred gave us the questions.

First four questions 

• What is the problem they have? Its not British enough, when you say Euro Sport you dont think British, There is competition from itv, they have more of the viewers

• What is the brief asking you to do ? 30 second TV spot , using branding they will provide.

• What is the brief trying to achieve? Give the audience a reason to choose Eurosport over ITV

• Who will benefit ? Eurosport

Second group of questions.

• What is the message ? That Eurosport is the home of cycling and the best sports channel

• Who is the audience - 18-55 year olds , hardcore cycling fans sports fans male and female

• How will the message be delivered ? A TV spot

• Can you forsee a problem with this ? ITV is more viewed, also any views who see the advert will already be watching EuroSport, so new viewers they want to try and get will never see the advert

After this exercise we realised even though everyone's briefs were different we all had similar answers we realised :

• The briefs weren't as specific as we first thought.

• The companies are in a spot of bother and need cheap work done for them fast

• They get us to do it for a cheap price because we don't know better 

• They create the student briefs because its easier and cheaper than going to a professional Design Company 

• They will always benefit

•  Despite this they are all good for experience 

Creative Suite Workshop

Today's session will be on illustrator and we will be dealing with colour. 

CMYK - Subtractive - processed colour used for print - usually light colour comes first when printing - key (brings it all together) 

RGB - Additive 

There are different ways of creating colour 
- Colour picker 

-Swatch Pallet 

- Colour Pallet 

We firstly had to make sure our preferences were correct, we had to make sure on preferences that the primary scratch disk was on Scratch  

Creating a new document 

Today are going to focus on the swatch pallet, the swatch pallet allows colour to be applied consistently. There is already a range of swatches there, but we want to create our own colours. To do this we go on the menu select all unused and then delete. 

We then viewed it in a small list which displays the colours a lot clearer as shown below. 

We then went on menu and the new swatch to create our own colours. 

The colour then is shown below the other colours seen in the image below here. The registration colour is crop marks and and register marks for print. 

Next we created boxes that we coloured in, then going on menu and selecting used colours it adds the colours that we've used to our swatch library.  

Next we created tints of a colour and the selected new swatch and again it appeared on our swatch pallet. Creating colours this way by not using the swatch libary it creates a global colour, showed by the corner thats coloured in white on the small swatch, colours without this corner are called local colours but with the corner are called global colours, this means if this swatch is edited it edits any object that has that colour, making 'global' changes within a document. It now allows us to create varying tints of the colour.    

As can be seen below is a range of tints i created just by reducing the percentage by 20% each time. 

Then when you go on a global colour and press swatch options and edit it it changes all the colours 

Next we looked into Spot colours and processed colours. 

Spot colours are much cheaper to print with than processed colours because it only uses 4 colours, they also allow for consistency because the same colour will be printed everywhere. 

We opened up the Pantone colour library next 

We then typed in a colour to search in the find bar shown below.  

The pantone colours are shown by the white triangle in the bottom corner that has a small black dot in the centre. 

The pantone colours can then be added to the swatch list. But the name should never change because when it comes to printing at a printers they wont be able to find the colour without the code. 

Next we saved our swatch list by going on save swatch library as Ai. This can then be opened again by going on open swatch library then user defined then selecting the saved swatches. 

We then saved it again but this time we saved it as a ASE, then going on photoshop we went on the swatches menu then load swatches and then open the swatches which then automatically load to Pohotshop.