Day 28

Peer Review of UX/UI
Print out your designs and get feedback from each other.

UI Design 2 Students
Meet with me today to talk about your project and what you will be turning in

Work in Class

Reminder — We have our last regular class on Wednesday. You should be mostly done with your project and have this last week to refine and improve your work. Once you’ve nailed the core of your project, then consider doing the extra credit. Don’t half-ass your project just to turn in extra credit. That would be a mistake.

Day 27

UI 2 students (CDES 4201) are required to do one of the following:

  1. Single page marketing website to promote the app (including front-end development)
  2. Promotional video for the app

UI 1 students (CDES 4200) may do either of them for extra credit. Additionally, UI 2 students may do both for extra credit (please indicate which one is for extra credit). These will be submitted along with the rest of your project.

Marketing Website Examples

Dark Sky



Twitteriffic iOS





Promo Video Examples

10 Examples of Great App Promo Videos

Sandwich Video — cream of the crop of app promo videos

Tiny Wings 2 — very different take on a promo vid

Curated — example of a demo video

Video Tools

Yosemite + iOS 8 people have it easy

Record screen with QuickTime

Record animated GIF (or video) of your app with CloudApp — GIFs would make sense in a marketing website

“How to make a demo video with zero budget.”

7 Rues for Creating Gorgeous UI Design (Part 1)
A good overview of the details that make a beautiful visual design.

Day 26

App Structure/Sitemap

Part of the project requirements are to create what is called a sitemap (at least in the web world, not sure what the term is for native apps, actually).

Adobe Illustrator or other tool you already own

App Icon/Launcher

Another piece of your project is to create an app icon. This is the thing that a user sees in the app store as well as on their phone when they want to launch/open your app.

App Icon – iOS Human Interface Guidelines
Launcher – Android Iconography
Making Beautiful Android App Icons
Six tips from Apple on how to create better app icons
Let’s Talk Icons 

iOS Icon Gallery

iOS App Icon Template
Android App Icon Template

Day 24

Recreate App UI assignment due

Work in Class
Wireframes — Finish up your wireframes for your app project. Remember, the project requirements state that you need to have wireframes exploring two interaction ideas. This means you should have an alternate version where you’ve tried a few things differently (from a user flow/interaction perspective).

UI Design — Begin exploring visual design ideas. Now that you have your concept in place and have worked out most of your UX concerns, you should have a really strong grasp of what it is your app will be doing. Take your users into consideration and develop a visual look and feel for your app. Along with that, begin to brainstorm a name for your app. You’ll need to develop an app icon and logo as well, so keeping those things in mind while you work on the app UI is a good idea.

Field Trip — Wednesday
We’re going to skip class this Wednesday and go to Refresh Denver. Rick Griffith of Matter Studio will be speaking. Please RSVP on the page.

A few details:
Show up at 6:30. I will take attendance, so check in with me and make sure I know you’re there. This is an opportunity to meet with local designers, developers, and company owners. You should be ready to talk about what it is you’re going to school for and what kind of job you’re looking for. If you have business cards, bring them. If not, get the cards of people you speak to. Here’s a good article on networking as a creative; read it.

6:30PM – Drinks, Networking, Camaraderie
7:00PM – Talk + Q&A
After – Networking

Day 22

Finish Presenting App Wireframes

Re-submitted Ballot App Projects due

Work in class on App UI Recreation assignment


  • App UI Recreation assignment
  • Fine-tune wireframes based on feedback
  • Begin UI Design phase with Style Tiles, Mockups, etc.