Contact Adam

[email protected]

Lectures & Projects

Shepherd University

Advanced Design at Shepherd University

Web Design at Shepherd University

Project  1
Intro to UX Pin
Project  2
Copy an Existing User Interface
Project  3
Homepage Redesign
Project  4
Design a UI Kit
Project  5
TBD

Web Coding at Shepherd University

Web Design Homepage Redesign

If you have a basic grasp using UXPin or other prototyping software, then you’re ready to move on to something more practical. This project is based on an actual job where I was hired to do the coding based on a static Photoshop mockup. Below is a screenshot of the home page.

A screenshot of a homepage that I was hired to do the coding for. I've changed the names to respect the people involved, and I've added the red "this is a hover menu" to explain that. Your job is to redesign this homepage.

A screenshot of a homepage that I was hired to do the coding for. I’ve changed the names to respect the people involved, and I’ve added the red “this is a hover menu” to explain what that is. Your job is to redesign this homepage.

There are a couple problems with this situation and we are going to approach this in a better way to create a better final product. The first problem is that the designer had no gameplan for responsive design. So I ended up having to retrofit and force their design to be responsive and it was not as elegant as it could have been. The other issue is that the static mockup does not communicate to me any interactivity. For example, how fast is the slideshow supposed to move? Is it a slideshow at all? How does it transition? Do the tabs at the bottom have any transitions? And when you approach this design from a mobile first standpoint, all these interactive details become more important.

UXPin is here to save the day. Your task is to take the screenshot provided and create an interactive prototype in UXPin that is mobile friendly and tailored to fit all screen sizes. You can use any fonts, colors, and textures you’d like – you can even redesign the logo – but be sure to include all content and features that you see in the screenshot. You can’t go into a client meeting and be like “we didn’t include that because we didn’t feel like it (or a more common excuse students give me on this assignment is “I forgot”).

UXPin will solve some important issues here. For starters, it will provide your clients with a pretty accurate demonstration of what their final product will look like. Aside from coding an actual prototype, I consider this to be the next best thing. It will show them not only how it looks, but also interactive features and breakpoints. But what’s good for your client is also good for your developer. UXPin helps keep you on track so that all of your animations could be achieved with with CSS which is nice for development. With a live prototype your developer can see what you are trying to do, and see your breakpoints in action. Bottom line: a high-fidelity, interactive prototype in UXPin or other comparable software should greatly facilitate communication between you, your clients, and your web developer.

Advice for creating your prototype

  1. Start with the smallest screens size. Get features to work on small screens first and work your way up to larger screens. You will probably find that many things that work for small screens work just as good on large screens with only minimal modification.
  2. Backtracking breakpoints in UXPin could get annoying, so try to perfect what you can before copying everything over to a new breakpoint.
  3. Use Google Fonts, but this should also be limited by UXPin so you don’t choose any fonts that would cause issues due to licensing.
  4. Remember, hover effects only work on a desktop with a mouse. About half of a website’s traffic comes from touch screens.
  5. Remember that web user interfaces do not have the sophisticated kerning abilities of Adobe software. You have CSS “letter-spacing” which is like tracking, but at fixed intervals of 20.

Resources