Web Design Assignment – Research and Development

For our first assignment in “Introduction to Web Design”,  we were required to produce a 3 page website, exploring the use of typography in web design. The site was to be ‘hand-coded’. Here is my research and development on this assignment.

FIRST IDEA:

When I first read the assignment, I thought I would create a web site for “Af Graphics”, a site about me and my graphics. It would include an about session, a portfolio page and a contact form.

RESEARCH:

I started my research looking at many websites based on typography, I read a book for html & CSS to get some ideas and learn more tags and codes, get inspiration from them and finally think about what I want my website to look like. Some of the best sites I saw are listed below:

websites

http://www.siblingrivalrywine.ca/

http://www.august.com.au/careers

http://www.mariecatribs.com/

http://www.elansnowboards.com/en/

http://www.natl.tv/

http://www.arqandgraph.com/

http://thesum.ca/index.html

http://poemsoutloud.net/

http://carsonified.com/events/

http://madebycool.com/

http://benlind.com/

http://loremipsum.ro/

http://www.elysiumburns.com/

http://benlind.com/

book:

HTML and CSS Web standards  (by Cristopher Merphy)

MY IDEA:

Then, I started to think about my webpage.

My first idea was to take some good stock photos of me to use them in my site.

I had to do some planning about the colors, typefaces and style I would use. I started analyzing myself as a designer and I decided to create a minimal website, because most of my graphics are minimal too. The fonts that I chose are two nice and handwritten fonts, because I wanted to create a personal and friendly environment in my website. I didn’t want to look like a typical site.

The hole idea was to put many words that express me come out of my mouth, like a shout. Then , somewhere in those words to put the ABOUT link, the PORFOLIO link and the CONTACT link. The sum of the words that it seems to come out of my mouth is me!

I made a draft sketch in my sketchbook for my welcome page and the general layout that I was going to use.

As I was conclude to my basic layer and my final idea, I started to design my layout with Adobe Illustrator and Adobe Photoshop.

START TYPING MY HTML CODE:

It was hard work designing my final layout. After that, I started writing my html & CSS code in TextWrangler. While I was writing my code, I read lots of articles and tutorials to understand better the use of some html & CSS tags. I found this article, that it has all of the html tags, very useful (http://www.w3schools.com/tags/default.asp). Some of the tutorials that I read and watched are listed below:

http://www.w3schools.com/html/html_images.asp

http://www.w3schools.com/html/html_forms.asp

http://www.w3schools.com/html/html_attributes.asp

http://www.w3schools.com/html/html_colornames.asp

http://www.w3schools.com/html/html_paragraphs.asp

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

http://www.ibm.com/developerworks/web/library/wa-ltbox/index.html

http://www.templatemonster.com/help/creating-image-gallery.html

http://www.templatemonster.com/help/how-create-contact-form-html.html

http://woork.blogspot.com/2008/06/clean-and-pure-css-form-design.html

http://css-tricks.com/139-nice-and-simple-contact-form/

http://webcache.googleusercontent.com/search?q=cache:http://youhack.me/2010/07/22/create-a-fancy-contact-form-with-css-3-and-jquery/

http://www.youtube.com/watch?v=gnpz7s4WniY

http://www.youtube.com/watch?v=rdsz9Ie6h7I

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s