Grid Website Layout

 

Web Layout:

Three Grid Column:

Above is a simple three grid column website design I did roughly,  although it is simple it has all the things that would be needed on a website which is a heading/logo/website name, Tabs (Home, Contact Us, About Us, ect...), Imagery and information. For this I decided on making it simple but putting all the tabs in one box, the heading at the top, the information underneath and an image underneath the tabs.

Six Grid Column:

Below are examples of a more sophisticated website design that I did roughly, this included the use of a six grid column which involved text for four of the columns and the images and little text in the two columns. Below is not just a home design but a layout for each of the tabs/button. As this is a design roughly for my website I had the idea of four tabs/buttons (Home, Contact, Gallery and Competition). Each tab has a design of which is different in some way; this is the layout I would like to use but have changes where I would like to add different types of flash imagery going across the page. The picture will not be the same on each page, it will show my favourite images, artists or pieces of work and say what it is on the picture in the corner, if you click on the image it will lead you to another picture which would be my inspiration from that piece or my own version of it. The flash illustration would be something to do with my like and will be different on each page to change to the next. 

 

File Formats ~ Web

HTML ~Hyper Text Markup Language, this is the coding used to display websites and other information displayed in a web browser. It consists of the use angle brackets and slashes to form the code with the information needed also for example:

This is a simple example of a HTML code of which I found on the website seen on the link below:
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_intro

CSS ~ Cascading Style sheets, this is a style sheet language that is used for the describing of the look and formatting of a document that is written up in a markup language, HTML. This is for things like the font, colour, alignment and size.

This is another simple example which was also found on the same website:

http://www.w3schools.com/css/css_howto.asp

FLA ~ FLA contains source material on the application Flash, this can be used for web for the use of flash design and also the use of creating buttons of which I have an example of from creating my own:

This is the normal timeline.






Whereas the one below is the scene timeline displaying the faces of the button.

SWF ~ Is an adobe flash file format that is used for multimedia, vector graphics and action scripts. This could be containing animations or anything needed to put on a website like activity on the page and buttons.

PHP ~ This is an open source which has the general purpose server, it has side scripting language which was originally designed for web development to produce dynamic web pages.

MYSQ Database ~ This is the open source relation database management system (RDBMS) of which runs as a server providing multi-user asses to a number of accounts.

FTP ~ File Transfer Protocol is the standard network protocol which is used for transferring files from one host to another over a network.

HTTP ~ Hyper Text Transfer Protocol is an application protocol that is used for distributed, collaborative, hypermedia information systems which is the system of data communication for www.

File Formats

.PSD ~ A PSD is a file format on photoshop, images in photoshop are bitmap. PSD is only for adobe photoshop and keeps all the layers in tact so that when you reopen it everything will be there.

This is an example of the layer pallet in photoshop, when opening up my Borough Market editing photoshop document this comes up in the layers pallet showing the last thing I did to my manipulated item and keeping it in tact for if I then wanted to do more to it.









.JPG-RAW ~ A JPG is a file format for images that can be opened on anything, a windows computer, mac, phones act. It is an image that has been compressed, pushed together to produce a picture, all the layers would have been pushed together without being edited. Whereas RAW is also a compressed file format for images but you can compress it yourself by editing them first without having a jpeg and then editing it in photoshop.

.TIFF ~ A Tiff is an Tagged Image File Format that is used for storing images like JPEG. Gives a higher quality image for when you print.

.PNG ~ A PNG is a Portable Network Graphic that makes the background of a bitmap image transparent.

.GIF ~ A GIF is a Graphics Interchange Format which gives an image transparency so that when going on a page it can overlap a image but not have a white background covering the image up, it is also used for making little animations and used in videos.

.AI ~ A AI is file format in illustrator, images in illustrator are vector if converted. AI keeps the vectors clean and crisp.

.IND ~ A IND is a file format in InDesign which saves all the text and images safely for when you go back on the document but when going back on the format, if having photos on the document you have to change the image quality.

.PDF ~ A PDF is a Portable Document Format which is used to represent documents in an independent manner of application software.

Bitmap ~ A bitmap can not be stretched due to being a pixel image it shows you the pixel grid of which is made up of squares, this means that when making an image bigger to print it the image will pixelate like this :

Vector ~ A vector can be stretched and give a clear and crisp image without the use of pixelation being shown, this means that we can then make the image bigger to print it shown by the image below:

Both these images were zoomed into 1200%

Web Design Research

In our Web Design lesson we have been asked to do some research, this involved us finding a website of which would help us to decide our layout for our website we create.

From looking at the website below I found this Bottle Bell Photography:
http://www.thephotoargus.com/inspiration/40-great-photographer-portfolio-websites-for-inspiration/

Bottle Bell Photography has an amazing professional website of which looks rather spooky to the eye at first. It starts up with some music and a dimming light like a horror. The light has words appear in it like "conceptual", "emotive" and "transcendent" before coming up with the final "BOTTLE BELL PHOTOGRAPHY". If you want to miss this intro it has the option at the bottom of the screen. the colouring is simple with the use of black and a creamy colour between green and yellow (like a brown). The website has a textured flower background (like wallpaper) to make it a sophisticated website.

After the intro, the website goes straight to the gallery where you then click on a image of the four displayed to pick a category of photography you would like to look at. It goes straight to the set of photographs where it then is displayed as a small slideshow with a little information about the selected category at first, this slideshow can also be viewed at full screen of which is helpful as the photos are not particularly big. The name of the photograph is viewed above.

I like this website because it is different from other photography websites with the use of a slideshow and being presented as a film at first making it more interesting to look at. Out of all the websites I looked through this was my favourite as well as another website.

The website is seen on the link below:
http://www.bottlebellphotography.com/

Typography Dip

Today I got given my task for my Typography project through a lucky dip.

We were to pick a font from the bag, the font we got we would then research into and give our own opinion on them, after all the research is done I will have to create a poster of the good points about the font i had picked in the dip, the font that I got is Eurostile.

We then had to pick 2 more things of which involved a letter and a character although some people would get 2 letters. I was lucky enough to get 2 letters of which are L and P. With this task we need to find something to represent the letter like A is for apple, we need to make a poster like this with something that is not inappropriate but something that is suitable to our age group. We will then illustrate the letter ad character for the poster like for the letter you would have that big in the middle of the page and then something that represents it will be small on the letter.

Tom Lewis~ Manga Artist

Browsing through a facebook page about visiting Japan, I found a post about a London-based Manga Artist called Tom Lewis and when searching his work I found some really beautiful pieces he created. From looking at the two on the left it gave me some inspiration for my Web Design. I could have a little character of myself with a tree coming out and things I like on the branches like in his work and the items on the branches would be my buttons so when clicking on one it will bring up a screen and would include all of the things needed of that button. I think this would be interesting because it will not be boring, there will be movement in the webpage and I could use flash to make wind come across the page and move the buttons side to side as if wind had hit them. Therefore making a very sophisticated, interesting website with the use of movement, creativity and uniqueness as well as having a part of me in the website more.

I love Tom's work because even with the use of Dark Colours, it doesn't look depressing. It has beauty which I haven't seen in many other illustrations, it brings a smile to my face with how beautifully it is done and how much it stands out with the use of colour. The lines are beautifully drawn out showing the concentration and dedication to making a wonderful, sophisticated, unique and gorgeous piece that can touch the heart with one look. Another reason I love it is because of the inspiration of Japan, his pieces bring the beauty of Japan to them with the simple use of the Kimono and the Japanese writing. I love Japan personally which brings more excitement to his piece for me and makes me love them more.

His website is seen on the link below:
http://www.tomlewis.co.uk/

Information about him seen in the link below:
http://www.sabotagetimes.com/reportage/tom-lewis-the-urban-artist-with-talent-to-burn/