OUGD504 - Studio Brief 2 - Study Task 6

Part 1:

Part 2:

The only way I can see this being a poor design is mixture of aesthetics in one place. The mixture of five different typefaces really ruins it for me however the whole layout and usability of the site is excellent through use of grids and navigation.

I originally chose this site to bring in as there is a very inventive form of navigation involved which is consistent throughout the site. Scrolling through what seems to be a jagged array of images which move onto further pages in the site is actually really well designed with a grid which keeps things in balance. These images are constantly moving whilst the mouse hovers over them. There isn't anything I dislike about the usability of this site.

The layout of this site is perfectly balanced and is aesthetically eye catching as a site. I like the minimal use of colour and the menu bar being centralised and in line to the name of the company. This above a duotone slider is really clean and professional showing good design ethics and a clever use of grids.

This was chosen for it's interesting homepage. Each box linking to a specified page of the site, the page is divided into thirds for this to be function able in large scale which isn't often done now online, but this is a good example of one being done in a successful way.

This website caught my eye as I was greeted by a rather high resolution image of the product they sell with their logo and ethics centralised as a focal point, below this a find out more button was visible, when clicking this, the website slowly scrolled down to it's next page which was consistent in aesthetics with a white background and black text and professional images in a balanced grid system.

I enjoyed this exercise as a whole as I became aware of different and unique ways of navigation throughout a website without hindering design aesthetics.

I then designed my website based on feedback I have received and grids:

OUGD504 - Studio Brief 2 - Study Task 5

The feedback I received helped me consider the commercialness of the style but also told me that everything was well structured and balanced and easily navigated.

OUGD504 - Studio Brief 1 - Creative Suite Workshop 2 - Photoshop

Every image in Photoshop has a mode. In the Image menu you can see what mode it is in and it can also be changed from there too. RGB and CMYK are the main ones we use.

The default format for an image in Photoshop is RGB.

When the colour mode of an image is changed from RGB to CMYK, the colours normally shift as not all colours in RGB can be recreated in CMYK.

To make an RGB image into a printable format, you go to the gamut warning selection and then either change the image's settings to end up in the CMYK spectrum, or change the mode to CMYK.

Another option is to use the proof colours selection as this lets you work in RGB but shows you what it'd look like in CMYK to give you an accurate visual of what it would look like printed.

To add colour we use the colour picker.

When using the colour picker, if a exclamation mark shows, it means that it is not in the CMYK spectrum, if you click the mark, it will jump to the closes CMYk derivative.

All spot colour pantone colours are available in the colour library section.

Spot colours need to be identifiable by their unique reference numbers so the printer can mix the ink.

To create duotone images the image must be greyscale.

Channels:

In CMYK:

To create spot colours in a greyscale or CMYK:

The solidity simulates the opacity of the ink used in the printing process.

This can be saved as a psd or a tiff file. The spot colour selection box must be checked.

OUGD504 - Studio Brief 2 - Web Design - Workshop 2

Navigation must remain consistent in a website. This will prevent confusion of the audience which enhances the user experience and makes the site clearer.

The site we are going to create will be 1024 x 768 pixels. This will work on 95% on web enabled devices.

The box that contains the website design is called either Wrapper of Container.

To make notes within css start a line with a /* and close it with */

To create a Div, you begin the line with a # and then you name it. When opening a curly bracket, it will open up commands for you to choose.

This is then applied to the right specifications and then closed with  a curly bracket.

This then needs to be named and finished in the html, first save the css and then go back to the index page. Below the body, apply the open angular bracket and name it.

This is then closed with a forward slash.

To add a colour to the background to make sure it's working, go below the height restrictions and apply the code background and then colour and then save.

To get rid of this 10px border around the edge of the container:

This completely aligns it. If you want it to be centrally aligned, the left must be alligned to 50%.

That creates the problem of pushing it 50% across. To remove this problem, use the margin tool to make this minus half the value of the width.

To create the navigation bar, a new div is made with the correct proportions as well as a different background colour to show between them

To put the logo inside the navigation bar:

To create rollover buttons, create the button in illustrator with two layers one normal and one with the added feature of it aesthetically if it was rolled over.

Then the dreamweaver stuff:

Tah-Dah!