DigitalTutors - Designing a Single Page Product Website in Photoshop and HTML

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.

Content:
1
Introduction and project overview Watch it now
01:05
Setting up the project folder and files
2
Setting up the project folder and files Free with Demo »
09:25
Building a concept and wireframe for the hero section
3
Building a concept and wireframe for the hero section Free with Demo »
09:41
Building a wireframe for the features and pricing section
4
Building a wireframe for the features and pricing section
09:54
Building a wireframe for the gallery and testimonials
5
Building a wireframe for the gallery and testimonials
08:34
Setting up the Photoshop document
6
Setting up the Photoshop document
08:02
Designing the header with navigation
7
Designing the header with navigation
09:09
Designing the header and hero background image
8
Designing the header and hero background image
10:09
Designing the basic elements for the features section
9
Designing the basic elements for the features section
08:05
Adding text and icons to the features section
10
Adding text and icons to the features section
08:25
Designing the pricing tables section
11
Designing the pricing tables section
10:07
Designing the gallery with product mockups
12
Designing the gallery with product mockups
09:40
Designing the testimonials and footer
13
Designing the testimonials and footer
10:11
Reviewing the design for consistency
14
Reviewing the design for consistency
09:39
Designing the mobile navigation
15
Designing the mobile navigation
09:25
Setting up for the development process
16
Setting up for the development process
09:01
Building the header, hero, features and pricing sections
17
Building the header, hero, features and pricing sections
09:16
Building the gallery, testimonial and footer sections
18
Building the gallery, testimonial and footer sections
08:38
Slicing the assets from the design
19
Slicing the assets from the design
10:19
Setting up global and helper styles
20
Setting up global and helper styles
10:03
Styling the header with the logo and navigation
21
Styling the header with the logo and navigation
07:45
Styling the hero section
22
Styling the hero section
09:49
Styling the features section
23
Styling the features section
09:39
Styling the pricing section
24
Styling the pricing section
08:59
Integrating and styling the gallery plugin
25
Integrating and styling the gallery plugin
09:31
Styling the testimonials and footer
26
Styling the testimonials and footer
09:50
Developing the scrolling navigation
27
Developing the scrolling navigation
08:59
Styling the mobile navigation
28
Styling the mobile navigation
10:22
Toggling the mobile navigation and review responsiveness
29
Toggling the mobile navigation and review responsiveness
10:20