Turn a Photoshop User Interface into a Responsive Website

Sydney Campus

GA Sydney
1 Market Street, Podium Building (entry via Kent Street, to the red-brick building, next to My Lua)
Sydney NSW 2000

Past Locations for this Workshop

Turn a Photoshop User Interface into a Responsive Website | Sydney

Sydney Campus

GA Sydney
1 Market Street, Podium Building (entry via Kent Street, to the red-brick building, next to My Lua)
Sydney NSW 2000

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

I have read and acknowledge General Assembly's Privacy Policy and Terms of Service. SMS message and data rates may apply.