#PDFs & Retro Games. SWIPE NOW

[blasesmith]

HOTTER THAN TIKTOK DRAMA: 90% OFF Business Cards, PDFs & Retro Games. SWIPE NOW

Click HERE TO GET

[thinklookdosummer2019]

Homework: Final Project Part 1 Due July 1

Your final assignment is to design six high-definition wirefames for an iOS or android app. You are not creating an actual app, but a polished mock up of what that app would look like on a small screen. Your focus should be spent on the look of your screens more than the user experience or information. That said, you are welcome to upload your files to something like InVision to create a working prototype. http://www.invisionapp.com

This assignment will require several skills that you have picked up throughout this semester: kerning and line spacing, type combinations, basic layout and alignment, and a custom typeface.

Here are some questions to get you started:

What is the purpose of this app? 

Who will use it?

What do you need to communicate to your user?

What content needs to be on each page?

How will you establish hierarchy?

Here are Apple’s interface guidelines for iOS, which will be very useful for designing your app:

https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/index.html#//apple_ref/doc/uid/TP40006556-CH66-SW1

And the somewhat more complicated Android guidelines:

https://developer.android.com/index.html

You may use Illustrator or Indesign for your wireframes. Please print out all of your designs and bring them in for critique. The final project will be submitted as a PDF via drive.

You can design your own app, or you can create designs for one of the following (fake) apps:

Unicorn Rainbow, game

Mutiny, game

Days and Weeks, calendar app

Paparazzi, photo app

Netwerk, social

Mews, cat news

Your own project

The deliverables of this project are somewhat flexible, but I am firm on one issue: You may not use more than one image. This is a typography class, and I want to see type-based designs. (Geometric design elements like boxes, circles, triangles, and lines are fine.) This is another way of saying that you should probably start this project by thinking about a logo or an icon.

Here’s a checklist for the final project:

A custom logo or wordmark for your app. 1024 x 768 pixels. Possibly use Fontstruct, Illustrator, or Glyphs to create or manipulate custom type

Icon for your apps, one at 180 x 180 pixels and one at 1024 x 1024 pixels (ios), or one at 192 x 192 pixels (android). 

Six high-definition wireframes.

At least one wireframe must include a chunk of type (maybe three paragraphs).

At least one wireframe must include a list.

Here are two possible scenarios:

Mutiny (i based the following screens on the games 2048 and threes)

1. game screen with icon and score. buttons for best score, menu, and leaderboard

2. menu screen with the following buttons: keep going, new game, multiplayer co-op, multiplayer vs, how to play, and rate. 

3. how to play screen: swipe right to kill, swipe left to love, love your friends, vanquish your enemies.

4. high score screen: 56476, 44136, 35044, 27236, 15892 

5. options screen: music, sound effects, colors, show status bar, main menu

6. special thanks screen: special thanks to those who went out of their way to support us: mom, dad, and jeff stark. voices by: Charlie Chaplin, Buster Keaton, Harold Lloyd, Douglas Fairbanks, Clara Bow, Theda Bara, Lillian Gish, and Greta Garbo. 

7. about screen (adapted from wikipedia): Mutiny is a single-player puzzle game created in Summer 2019 by NYU developer xxx, in which the objective is love your friends and vanquish your enemies. It is a type of puzzle game, and is very similar to several other games, but better. XXX created the game in a single weekend as a test to see if she could program a game from scratch, and was surprised when his game received over 4 million visitors in less than a week, especially since it was just a weekend project. The game is free to play and makes the world better every time someone spends an afternoon mindlessly swiping, swiping, swiping. The game runs on open-source code and has led to many additions to the original game, including a score leaderboard and improved touchscreen playability. Spinoffs have been released, but none of them are as good as the original.

Paparazzi (i based this on hipstamatic)

1. Paparazzi App Icon

2 Launch File (can be animated)

3. Captioned photograph screen: Add caption. Sample caption: Sarcasm is the lowest form of wit, but the highest form of intelligence.

4. Edited screen: No edits. Photos you have edited with Paparazzi will appear here 

5. Store screen: Featured: Retropak 9. With buttons for “featured,” “search,” “print lab,” and “my gear.” 

6. Art School Film. Angular and moody. Popular back when photographers spent more time in the darkroom than the studio. Makes everything look more interesting. 

7. about screen (adapted from wikipedia): Paparazzi is a digital photography application for the Apple iPhone and Windows Phone. It uses the phone’s camera to allow the user to shoot square photographs, to which it applies a number of software filters to make the images look as though they were taken with a vintage film camera. The user can choose among a number of effects which are presented in the application as simulated lenses, films and flashes. Several of these are included with the application, while others may be acquired through an in-app purchase. The application has sold four million copies as of Summer 2019. Paparazzi is part of a retro trend in photography, which has seen a rise in the popularity of cheap and technically obsolete analog cameras (such as Lomography and Polaroid instant cameras), as well as software filters and smartphone software that emulate such cameras. Other vintage photography applications include CameraBag and Instagram. Like Hipstamatic, they often include social networking features. Some phones include similar built-in filters.

Here are some wireframe tutorials to help:

http://webdesign.tutsplus.com/articles/a-beginners-guide-to-wireframing–webdesign-7399

This is an Illustrator wireframe template for responsive design:

http://www.rubbercheese.com/a-wireframe-template-for-responsive-web-design/

and this is a comprehensive tutorial on the first part of your wireframe process:

http://www.lynda.com/Balsamiq-Mockups-tutorials/Creating-smartphone-wireframe/172857/195940-4.html

Additional: Ideally you will use Glyphs Mini to create a unique font for your wireframe app. Although I suggest you create a whole alphabet, I understand that there are limited hours in the day. As a compromise, I will accept at least 13 characters. That means if you were going to design a font for display in Unicorn Rainbow that I would accept U-N-I-C-O-R A-B-W plus four additional characters.

Finally: On our final day I will ask you to bring in two images of good and bad typography for discussion in class. I'm telling you now just in case you want to take a picture if you see something truly great on your way home today.