Brief 2 - Web Page design

The website page is the contact point for the consumer to order their very own Imaginative Colour paper Selection tool. This must be the most informative. I used the black card as a backdrop for the webpage and working with a 800px x 600px, I worked out that there should be 6 pages
1. About
2. Warm Book
3. Neutral Warm Book
4. Cool Book
5. Neutral Cool
6. Order

I used the animal stencil so that on the home page all the gradients are shown behind the animals, but then once you click onto their individual page, only their gradient is shown and the rest of the animals are white. I also have rollover buttons on the pages so that the text underlines. The animals on the web page have been cut into circles, to reduce the size. The deign has been kept simple and easy to use, and more information about each booklet would be included.

I tried some compositions before deciding on the one that worked best:

Open publication - Free publishing - More fedrigoni

Brief 2 - Web Banner design

To promote the tool on the Fedrigoni, The best way was to use a banner that they can click on to direct them straight to. This format is is a strip so I used the existing Fedrigoni webpage and replaced the banner with my own design.

Open publication - Free publishing - More banner

Web Design - Final Pages

Open publication - Free publishing - More graphic design

Design for Web - Working in Dreamweaver

 Using the layout design with the navigation menu going horizontally across the top of the page.
This image below shows the rollover button, changing the black text to white text in a red box:

Home Page:

The cell for the text is aligned to the right hand side, with a column span of the 5 navigation buttons. The text within is justified in Trebuchet typeface, pt size 14.

I wanted to create pop out boxes for our personal profiles on the about page. The images used have been taken from our team photo.

Here are the thumbnails, that you will be able to click onto:

Here are the fullscreen views:

About Page:

 How the pop-out light box looks:

Contacts page:

Love 4 Design

Umbrella Creative Studios
25 Shafton Lane
Holbeck
Leeds
LS11 9RE

T. 0113 245 6789
F. 0113 245 6788
E. info@love4design.com

 Rollover image of maps shows a close up:

Portfolio Page:

Similar to the about page with the image lightbox, I have created spreads for portfolio pieces were you can click on a logo and the work related pops out:

To show how it works, the design work I will use include my 'Plan A' and 'Icon Cosmetics', Becky's 'Gregg's Tea Room, and Charlotte's 'Good Sleep, Good Health'.

Here are the thumbnails that you will click onto:

 Here are the fullscreen images that will pop up and tell you more about each project:
Plan A:

 Icon Cosmetics:

 Gregg's Team Room:

 Good Sleep, Good Health:

Here is the Porfolio Page:

 And what the lightbox looks like:

News Page:

The news page will have information about what is going on in the studio, images of things that we fidn interesting and things that inspire us or just make us smile:

There is a scroll that allows the viewer to look down the page:

Design for Web - Design Ideas

 The above design is what I going to try to re-create for my web design for Love 4 Design.

Web Design Workshop 3

Notes:

 Test website:

Web Design Workshop 2

Web Design Workshop 1

AIMS OF TODAY'S SESSION
1. Identify workflow
2. Analyse and evaluate websites
3. Identify purposes of websites - the target audience and the audience needs
4. Create an interface design for a website

**A website is the best way to promote yourself as it has the potential to reach people all over the world. It is a point of contact, it informs people about what you do. And their purpose is to get work/business.**

CONSIDERATIONS
Audience - potential/current clients, collaborators
Brand Identity - Style of website
What services are on offer
Work/Portfolio
Does it include a high impact statement
Is it busy/clean
Fit in frame
Readability - type/scale
Simplicity - could end up dull/boring
DONT USE A TEMPLATE - bespoke!
Navigation - clarity
Indexhibit - content driven


I will do many mock-ups, test them on people and get their opinions.

MANAGING FILES
Be organised
Labels/dates
Each web page in a seperate folder
Naming fold - lowercase with  no spaces, 8 characters or less (less chance of currupt files)
root> subfolder images> contains images and other media, e.g. music, movies

MEASUREMENTS IN PIXELS
Display Resolution (useage across media - computer, mobile phone)
-lowest common denominator- 800x600, Res. 72pix/inch

WEB STANDARD
Restricted to standard font, what people have on their computers
Can specify an alternative font family for use within body text, for if someones computers don't have the font used.
Can work with image as a way around this - heading
However if type is an image people can't copy and paste - which can be good and bad
An image heavy site will take longer to load up - slow
Choosing colour - tick the web colours on box, works in hex codes - e.g. #ff066
Images need optimising for use on the web
Re-sample to 72res.
File>Save for webs & devices
Quality - reduce, file size
Must do this to every image


Bring mock-up designs for after Eatser, next session
Look at some advanced ideas (pic gallery, video, interactivity) for inspiration, and to fidn out how to do it.

Design for Web

Today we had our introduction to web design. I have to design a website for our graphic design studio, in conjunction with the Enterprise brief. Here is the interface I came up with, with the information that my website neeeds to include:

Brief Title: Design for Web

THE BRIEF
Create a 5 page website for the design studio you are proposing to set up, in conjuntion with the Enterprise brief.

CONSIDERATIONS
-Functionality- working links, can peopel follow it
-Aesthetics- what looks good may not be functional
-Useability
-Content- what do I need to show, how am I going to show it (text/image)
-layout/font size/composition/image size

TARGET AUDIENCE


CONCEPT PROPOSITION


MANDATORY REQUIRMENTS
-5 page website
-document, evaluate work on D.P and D.C blog
-reserach websites- what works, what doesn't, what comes across when you look at a website

DELIVERABLES


STUDIO DEADLINE
Friday 27th May