Turn a Photoshop User Interface into a Responsive Website

Washington, D.C. campuses

GA D.C., 1776
1133 15th Street NW, 8th Floor
Washington D.C. 20005

GA D.C. (Northern Virginia)
2231 Crystal Drive #1000
Arlington VA 22202

Past Locations for this Workshop

Turn a Photoshop User Interface into a Responsive Website

Washington, D.C.

Washington, D.C. campuses

GA D.C., 1776
1133 15th Street NW, 8th Floor
Washington D.C. 20005

GA D.C. (Northern Virginia)
2231 Crystal Drive #1000
Arlington VA 22202

Past Locations for this Workshop

About this workshop

There are a distinct number of advantages to designing a website in Photoshop (or similar) prior to coding it:

1. You can work collaboratively on a project allowing a designer to focus on the creative graphics whilst a developer can focus solely on the code;

2. You have a reference that can be used to guide your implementation;

3: It is much easier to have the graphic assets prepared prior to the implementation so that it doesn’t hinder your (a web developer’s) coding or workflow.

In this 6 hour workshop you will prepare a Photoshop user interface for implementation. You will plan and prepare assets, create HTML page structure and apply CSS styles. Using viewport detection, media queries and mobile menu techniques you will optimise the mobile viewing experience.

Takeaways

  • A layered Photoshop User Interface
  • A cross device consistent website
  • A scalable mobile optimised website

Prereqs & Preparation

  1. Brackets, an open source code editor installed
  2. Have either attended "Learn how to code responsive websites" course or otherwise have had some exposure/experience creating HTML/CSS layouts
  3. Preferably Firefox web browser and Firebug extension
  4. Adobe Photoshop installed

Coming up near you

Let’s Keep You Updated

Enter your email to start following

By providing us with your email, you agree to the terms of our Privacy Policy and Terms of Service.