Task 5:Layout and Grids (960 grid)

Task 5:Layout and Grids (960 grid)

For this task i was asked to mock up page designs using the 12 column grid from the 960 grid template used to design webpages.This task will enable me to consider and use the 960 grid to create a grid based web design in Photoshop and to create a structure using the 960 grid library.I will take one of the musical themes i have used in the previous examples, and use the musical theme to develop a web page design using the 12 column grid from the 960 grid layout.I will continue to develop the children's website with the 960 12 column grid.

960 Grid Examples

I have looked at examples of the grid based layout on the 960 grid website http://960.gs/ some of the examples include:-

This is Hugh Griffith's webpage design using the 960 grid layout with 12 columns, you can see that each of the components to the webpage fit inside the 12 column grid layout .

This is Gantry Framework's webpage design using the 960 grid layout with 12 columns, as you can see again it is using the 12 column layout but in a different manner still each component fits well inside the 12 columns.

This Screen shot is of Sacramento international airport's webpage layout design which uses a 16 column 960 grid layout instead of a 12 column layout, this may be because it needs to fit more onto the page or it wants its components to be bigger.I looked at this page to see what bigger grid layouts looked like aestetically.

Mock up Sketches

Design Sketches

Final design sketch 

My mock up page design

My 12 column layout grid design:-

The above image is of my own mock up from my webpages 960 grid 12 column layout design, as you can see it resembles that of the other webpage grid layouts i have looked at as each component fits neatly into the 12 column grid layout.I made this 960 grid 12 column layout  webpage design on photoshop by adding each component onto the grid layout then manipulating them to fit within the grid, i think after doing this it looks aesthetically pleasing.

My CSS Trail 

Click here to view the 'Childrens music Grid system' layout

As you can see i have made a HTML version of the grid system applied to my webpage, one thing that has changed from my design mock up is the size of the giraffe because i had to fit it into the grid layout of columns 12.I also did not include a working button bar because this was just a trial run of the CSS principles which would be applied to my webpage.Also i changed the design of the header image and made the misspelling more prominent by placing it backwards therefore showing that it is a play on the title as most children cant spell properly because they are still learning.

Task 4: Navigation Menu Bar Design

Task 4-Navigation Menu Bar Design

Research behind the button bars:-

I have looked at different button bars on various websites, I have found that the button bar is usually placed below the website title, this is probably so that it is easy for a user to find, also the button bar is sometimes stylised to suit the page.some of the designs i looked at were very complicated with search bars and tools, i thought that those desighns wouold be too complicated for a design on a childerens website which is obviasly going to be used by mostly childeren, therefore i will be going for a simple design.

This is a button bar that i have print screened from the hobby craft website , as you can see it is a very innovative design which allows you to select a button from one of the tabs which have been made to look like some kind of filing system. this image of a navigation bar was taken directly from :- www.hobbycraft.co.uk

The first image is an example of a button bar / navigation bar which takes up the side view of the page, it has a different layout position from other button bars that i have researched.the second example only uses images as its buttons in the navigation bar,i believe that this could cause some problems in deciding where they would navigate you to therefore it is too simple.these images of navigation bars were taken from :- http://www.awwwards.com/31-examples-of-icons-in-navegation-menus.html

I would like my button bar to be friendly and easy to use and find, this is because i am designing it for the childerens music website that i designed earlier.I will try to design it around the HTML page that i designed so that it fits in with the webpage.

Making my button bar:

To make my button bar i created the first layer of the button bar , which will be the object you see first, i then created a second button bar with different colour writing , this was to be the rollover button so that when you went to click on the buttons on the button bar each would change colour so you knew which one you were about to click on.

I then proceeded to place it into my webpage in dreamweaver which you can see in the screen shot below:-

In this screenshot you can see my work in the dreamweaver stage , as you cans see i have used CSS and HTML code to place the button bar into my webpage.

My button bar:-

Click here to view the button bar

Click here to view the webpage including the button bar

Task 3: Graphical Style

Graphical Styling (musical styles)

Task information:

This post contains my work for “Task 3”, this task involved designing  and creating two different ,visually themed, pages of the same HTML content.I set out to create two webpages with different music genres.The music genres i have chosen to represent in HTML form is Children's Music (such as rhymes and well known children's songs) and Rock and Roll, i chose these two genres of music because they were at totally different ends to each other which meant the visual outcome of the pages would look different but the creation mechanisms would be the same.

Before jumping in to the creation of the webpages i had a look at the different designs on http://www.csszengarden.com/ for inspiration and a look into how graphical styles can be applied to present the same content in a range of very different ways.After looking at Css ZenGardens graphical styles i believe i have got some knowledge of the way i would like my own webpages to be stylized and created.

I will begin by creating a basic HTML page layout and will mark the text with the appropriate <p> <h1> and <h2> tags , also i will use <div> tags to divide the page into 'header' 'content' and 'footer' areas which will give a basis for which the graphics and be applied to. I will then be designing and creating graphics on adobe photoshop to be applied as background images on the page to create a strong visually coherent overall design. I will hopefully achieve a layered page with visual elements that tie together to give an overall musical mood to the page.

I know that the aesthetic feel of the page is important and will be designing the background elements to complement one another and work well within the overall graphical and visual theme of the page.To do this i have sketched out some ideas for graphical themes for my page which you can see below:-

The above sketch was a quick idea on how the children's music page might look graphically,i don't think i would have a big image in the back ground, however i would try to put the giraffe so it was on background but positioned on the left hand side so that when you scrolled it did not move with the page sort of thing.

The sketch above is one which i did in reflection of the rock webpage that i want to design and create, i have made the title rockabilly drift in reflection of a sort of 1950's rock and roll design as that movement is starting to get quite large.

I designed my pages with the knowledge that i had learned and applied my ideas from my sketches to my screen work.

The Links below will navigate you to the web page designs for task 3:

Rock Website Design

children's Music Website Design

Task 2: colour and typography

Colour and Typography

Information about task:

For this task i will need to use HTML and CSS to create at 4 different styled pages of the same piece of text.I will be taking a piece of unformatted text and using basic html and CSS tags to control and change the colour and typography of the page. I will create 4 versions with 4 different visual moods.

I will be using lorem ipsum to source my unformatted text from, i will then apply HTML & CSS  styles to it.

My Website Designs:

1

2

3

4

Website design 1

Website design 2

Website design 3

Website design 4

Task 1 DMG 140

Task 1

http://profile.ak.fbcdn.net/hprofile-ak-ash4/
211175_11034561268_1962601629_n.jpg

Giant Ant

I found that the layout of this webpage included a sum of white space around the main body , which includes the title or heading of the webpage.In the white space the navigation bar is located at the top right corner, the text is in a contrasting colours of  grey which means it is easy to find.The webpage also includes links to social networking sites such as "Facebook"  and "twitter", where it displays the logo or symbol for the network so that it can be easily recognised.

The quality of this webpage is of a professional standard because of the  effort that has been put in to making the webpage flow.

The webpage does not have a basic colour scheme, instead it uses some primary colours to show emblems which link to other pages form the webpage.Also the main body is made up of an image of wooden panels which I think attract the eyes from the white space, I think this has also served a purpose of displaying the title well because it almost jumps out from the page instantly.

The typography used on the webpage is almost like an "Arial" font, I think that the typeface used in the navigation system has a stand out personality because it is almost forcing you to read it and click on it, this is because the typeface is in sharp capitals , which reminds me of a  loving authoritative figure, rather like a parent.This webpage also uses a grid technique at the bottom of the page to stage some image links to work from the webpage.

The overall atmosphere of the page makes me want to discover more because it is a light and uplifting modern mood which attracts you to it.

When looking at the source of the webpage I discovered that JavaScript had been used along with HTML, JavaScript was probably used to make the webpage more interactive and dynamic through the use of its objects.Click here to view  the Giant Ant webpage.(Alternatively you can click the heading to navigate to Giant Ant)

Byron Gronseth

http://behance.vo.llnwd.net/profiles19/891029/projects
/2997043/3f9fd519487295a340648ce8523d6c04.png

The layout used in this particular webpage I thought described a more block attitude because there is only text and three links available on the main page of the website, each of which are in line with each other.The colour scheme is a dark and attenuative one which draws the eyes to its background which is a picture of some sort of workspace in a grey scale with darkened corners which then makes your eyes flow back to the text in the centre of the page.

There are no other layers of images which would make the webpage more profound however the webpage does give off a personal feel.The typography used within this webpage seems to be a very serious typeface that strikes you as confident and classy, the typeface is also spaced out well at what seems to be 28 pts with bold caps in ITALIC form for the three links leading to other parts of the website.Again the font is in a grey and white colour to contrast out from the main background image.

In the main background image there seems to be objects that relate to the design area, objects like pens,pencils,words on paper and a laptop allow you to understand what the webpage is trying to prevail.The words 

"You can have what ever you like."

are written on the paper in the background, I believe this stands out from the background which may subconsciously make the casual browser want to look more into the website or even to enhance into a project with the designer.The quality of this webpage could be improved , I think, by adding some colours or images to the main page to allow you to be more interested in the page for longer.

The technology used to create this webpage was HTML as I discovered from the websites source,it seems that this webpage had been enhanced from the skeletal form of HTML.Click here to view  the Byron Gronseth webpage.(Alternatively you can click the heading to navigate to Byron Gronseth)

Wee Society

http://launchsoon.com/Wee_Society_j392.jpg

This webpage has an interesting layout because it has a scrolling main body which allows you to view different images and the navigation bar is located at the very top of the page , the page is also surrounded on each side (left & right) with green banners, the page then looks as if it is sitting directly on top of these green banners, the space between the two has three fork tabs which are links to different social networking sites.

This website uses allot of primary colours which may attract a younger audience to it as it is less serious because there is not much black, white or grey colours of which there would be on a formal webpage.

The quality of this webpage is great because it incorporates a happy mood with lots of interactivity which means it keeps you interested in the webpage for longer, hopefully meaning that the casual browser would get more involved in the page itself.This webpage gives a happy and fun mood which attracts you instantly to it.I discovered the technology used to create this page which was HTML and JavaScript.

Click here to view  the Wee Society webpage.(Alternatively you can click the heading to navigate to Wee Society)

Grundini

http://media-cache-ec0.pinterest.com
/avatars/grundini-70_600.jpg

The layout of this website is in grid format, in each of the grid spaces there is an image link which would redirect you to a relative page of that image.In the middle space there is some text which is written in a rounded font which expresses the crudeness of this webpage as in each image raw colour and shapes are adorned.I believe that the typeface used fits well with the images and objects used on the page because as it is rounded so are the designs in the images therefore it flows well together.

These elements make the mood a structured mass of fun and creativeness.the technology that was used to create this webpage is HTML, from the source it looks as though it has been built upon the skeletal structure of the html code. 

I think along with each of the images and text this is an altogether efficient webpage which is of good quality and standard, however I think it lacks on some areas of knowledge and informative techniques.

Click here to view  the Grundini webpage.(Alternatively you can click the heading to navigate to Grundini)

(Print screen taken from the Yuna website)

Yuna Kim

This webpage includes a variety of different basic shapes, of which when hovered over with the mouse, morph into image links to other parts of the website.I like the simpleness of this webpage because its layout is only of theses basic shapes which are then surrounded by white space which compliments them as the contrast upon the background.
This webpage has a grid layout including the basic shapes, this gives the website some amount of order which makes it seem quite professional. At first however when you see the webpage you don't understand why there are these shapes, but when you hover over them with the cursor you seed that it is a very intelligent design for a webpage.Click here to view  the Yuna Kim webpage.(Alternatively you can click the heading to navigate to Yuna Kim)