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

Web Coding at Shepherd University

Web Copy an Existing User Interface

Hopefully you’ve had some time play around UXPin. Now it’s time to do something more focused. I’m asking for you to build a prototype in UXPin of the latest user interface for Google Fonts. This is NOT a redesign – I actually want you copy the existing UI as best you can.

Screenshot of Google Fonts, Summer 2016

Screenshot of Google Fonts, Summer 2016

Why copy? Copying is a step that I like students to take before cutting them loose on their own projects. There is so much to cover in a class like this and we need to take things one step at a time. When you copy another’s work (legally of course, and for the sake of learning), it relieves the stress from creativity because the problem has already been solved. All the colors, textures, spacing, fonts have already been selected and you can now focus your attention on something else like learning new software. When you copy, really focus on the details to match the work as best you can – you can learn so much this way.

This project can be as weak or intense as you want it to be. UXPin packs a lot of power and you could in theory rebuild the entire UI for Google Fonts. But that would take a long time. At the absolute bare minimum, everyone should create a layout. Before any fancy animations, just get some content down on the page. This should be no more difficult than Adobe Illustrator. Then slowly start to work in some interactions. At least animate the left drawer navigation to open and close (shown below). I’d also like to see at least one breakpoint and how your layout changes. I also want one of these breakpoints to be the width of a mobile phone to give you some practice with designing for small screens.

Example of side drawer navigation on Google Fonts

Example of side drawer navigation on Google Fonts

As long as you feel engaged or frustrated, keep going. Once you feel bored that means you know what you’re doing and you’re ready to move on. Or I’ll decide to cut you off. I could see us spending 1-3 weeks on this. Some people might hang out with this project a long time, it’s a good way to get comfortable with the software.

I’ve also done this assignment and it’s very hi-fi and detailed. I took the time to make such a detailed prototype to teach myself the software and to show you what’s possible. It’s a high bar so do the best you can. For example, the plus-sign buttons (below) are very difficult so I don’t expect everyone to figure them out. Collect your questions and bring them to class so we can answer them as a group.

An animated button to add or remove an item on Google fonts, a very nice feature of their interface.

An animated button to add or remove an item on Google fonts, a very nice feature of their interface.