Web Design Workflow – Little Richard’s

Summary

For this project I created a website design layout using planning, and making a storyboard. Then, I redesigned my layout and added improvements. Then I created a digital version of the layout, and for any images I use I go to Creative Commons to find images that are copyrighted and can source easily. Finally I created the actual website using code (HTML and CSS) in Dreamweaver, I inserted my own images with .jpg files and recoded parts of other websites. . I redesigned things as I coded to make things simpler.

Workflow Defined

The first step to creating a visually appealing website is to plan and create a mock-up of the layout on paper. Make a theme and color scheme. Then add , revise, and edit your design until you’re happy with it. Make a digital copy, then use HTML and CSS coding to make your actual website.

My mock-ups

A digital mock-up of the website layout.

A digital mock-up of the website layout.

 

My overall layout of the website.

My overall layout of the website.

How the web pages will scale to size.

How the web pages will scale to size.

My final web page, in small form.

My final web page, in small form.

The website at final design.

The website at final design.

 

My Final Web Page / Site:  http://hulk.osd.wednet.edu/~lawsonmi/donut/#

What I learned

In the project I learned that a lot of web designs come from already existing pages. The designers take the code from websites that have designs they like and edit them. Whenever I came across a problem I asked the people around me or looked up a tutorial.

Link to tutorial I used:

Leave a Reply

Your email address will not be published. Required fields are marked *