HCDE537 > Master Art for the Web
Before we begin to Build an HTML Template , we need to finalize our Visual Designs that are based off of the Wireframes that we created for our project.
Step One: Work from Your Wireframe Documents
Since our wireframes are our instructions of how to layout our website, we should choose to work from them to create our visual designs:
Rehabilitation Institute of Washington Wireframes
Download: http://www.sccc.premiumdw.com/examples/wireframes-RIW1000121.zip
Step Two: Implement Your Colors & Images Into Your Visual Designs
We can then add colors and images to our wireframes to turn the document into our visual design studies:
Rehabilitation Institute of Washington Visual Design
See Also: Using Imagery on the Web | WEB200 | Premium Design Works
Download: http://www.sccc.premiumdw.com/examples/visual-RIW1000121.zip
Step Three: Slice Out Your Graphics & Creates Templates
Lastly, we can then slice out the graphics we need to use in our HTML templates:
Rehabilitation Institute of Washington HTML Template
See Also:
- Building an HTML Template from Master Art | WEB200 | Premium Design Works
- How to Convert a Photoshop Mockup to XHTML/CSS | Line25
Download: http://www.sccc.premiumdw.com/examples/templates-RIW100121.zip
This portion of the Premium Design Works website is written by Mike Sinkula and dedicated to the Web Design & Development students at Seattle Central Community College.
