Designing a Single Page Product Website in Photoshop and HTML
Pluralsight
Course Summary
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 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.
-
+
Course Syllabus
Introduction and Project Overview- 1m 5s
—Introduction and Project Overview 1m 5sDesigning a Single Page Product Website in Photoshop and HTML- 4h 18m
—Setting up the Project Folder and Files 9m 14s
—Building a Concept and Wireframe for the Hero Section 9m 30s
—Building a Wireframe for the Features and Pricing Section 9m 43s
—Building a Wireframe for the Gallery and Testimonials 8m 23s
—Setting up the Photoshop Document 7m 51s
—Designing the Header with Navigation 9m 6s
—Designing the Header and Hero Background Image 9m 58s
—Designing the Basic Elements for the Features Section 7m 54s
—Adding Text and Icons to the Features Section 8m 14s
—Designing the Pricing Tables Section 9m 56s
—Designing the Gallery with Product Mockups 9m 28s
—Designing the Testimonials and Footer 10m 0s
—Reviewing the Design for Consistency 9m 28s
—Designing the Mobile Navigation 9m 14s
—Setting up for the Development Process 8m 50s
—Building the Header, Hero, Features, and Pricing Sections 9m 5s
—Building the Gallery, Testimonial, and Footer Sections 8m 27s
—Slicing the Assets from the Design 10m 8s
—Setting up Global and Helper Styles 9m 52s
—Styling the Header with the Logo and Navigation 7m 34s
—Styling the Hero Section 9m 38s
—Styling the Features Section 9m 28s
—Styling the Pricing Section 8m 48s
—Integrating and Styling the Gallery Plugin 9m 20s
—Styling the Testimonials and Footer 9m 39s
—Developing the Scrolling Navigation 8m 48s
—Styling the Mobile Navigation 10m 10s
—Toggling the Mobile Navigation and Review Responsiveness 10m 8s
