Designing a Single Page Product Website in Photoshop and HTML

Learn the design and development workflow for a single page product website. Software required: Illustrator CC 2014, Photoshop CC 2014, HTML5, Sublime Text 3, CodeKit 2.
Course info
Rating
(14)
Level
Advanced
Updated
Oct 17, 2014
Duration
4h 19m
Table of contents
Description
Course info
Rating
(14)
Level
Advanced
Updated
Oct 17, 2014
Duration
4h 19m
Description

In this Photoshop tutorial we'll look at the design and development workflow for a single page product website.We'll begin with how to design a concept and subsequent wireframe document. Then we'll use the leading tool in the field, Photoshop, to design the actual layouts for the website. This will include preparing the basic design elements, separate sections and also the mobile device elements for responsive layout.Once we have the layout finished, we'll use technologies such as HTML5, CSS3, jQuery and Sass with Compass to develop the website and bring our design to life. By the end of this Photoshop training, you'll be more comfortable setting some global and helper styles, styling specific sections of the website, integrating plugins and setting media queries for different screen sizes. Software required: Illustrator CC 2014, Photoshop CC 2014, HTML5, Sublime Text 3, CodeKit 2.

About the author
About the author

Jan Zavrl has been involved in the web since the age of 14.