Category: Uncategorized

I shifted my idea to an app for food diary, and it will recommend closed restaurants based on what types of food you ate before.

I got many feedback from my last prototype, for example, people do not like “shake” feature, so I change it to use “swipe” to look at recommended food. They also think that showing closed restaurants on map is unnecessary, so I choose to only show one image of a dish per swipe. The location will show up only when the user is interested and tab on to see more information about the dish.

my food diary

Interactive one on marvel:

https://marvelapp.com/2b8j08i/screen/25207575

 

Lates app map:

Wireframes:

ASSORTED

Visual Design:

zhant293_visualdesign

Digital Prototype:

https://marvelapp.com/23id88d 

Mobile Media:

01/28/17

IOS HIG (Human interface Guidelines)

• Clarity
  • Icons are created to be subtle and precise

• Negative space, colors, fonts, graphics, and interface elements highlight importance which convey interactivity
• Deference
  • Content typically fills the screen
  • Minimal use of bezel, gradients, and drop shadows keep the interface light and airy ,while ensuring that the content is paramount
• Depth
  • visual layers and realistic motion convoy hierarchy. Transitions provide depth as you navigate through content. 
• Metaphors
  • People learn quickly when objects and actions are metaphors for familiar experiences. Like flipping through pages of a book. 
• User Control
  • People are in control. Not the app
  • Apps can make warnings. But the app doesn’t control decision making. 
  • The best apps find a balance between enabling users and avoiding unwanted outcomes. 
  • Apps make people feel like they are in control by keeping interactive elements farmilar and predictable, and making it easy to cancel when operations are underway.  
• Widgets
  • widgets provide information without needing to open an app
  • people add widgets to the search screen 
• 3D Touch
  • Pressure sensitive (Peek, Pop, Quick Actions)
  • Accessibility features are created for people with hearing, vision and other disabilities 
• Authentication 
  • People often abandon apps when they have to sign in first. 
  • If your app requires authentication, display a brief friendly explanation on the login screen that describes the reasons for the requirements and its benefits 
  • When possible present choices. Its important to add options that are easily assessable, instead of typing in responses. 

Android Design Guidelines

• Environment 
  • Material Design is a three dimensional environment containing light, material, and cast shadows.
  • All materials have an X Y Z dimensions. 
  • Light and Shadows. (Key lights create directional shadows. Ambient light creates soft shadows)
  • Materials are always 1dpi thick
  • Materials cannot pass through each-other
  • Material never bends or folds
  • Material sheets can connect and join together
• Motion 
  • Material Design is alive, aware, and intentional 
  • Responsive animation to create energy
  • Material Focuses on how fast it moves instead of how long it takes to get there. 
  • Monition shows that an app is organized, and what it can do. 
  • Motion is quick. Shouldn’t keep the user waiting longer than necessary 
  • Motion is clear, simple, and coherent. They should avoid doing much at once
• Color
  • All color pallets should include sufficient contrast between different UI elements
  • Limit your selection to 3 hues from the primary pallet and 1 accent color from the secondary pallet. 
  • Primary Color should be the most widely used color across all of your screens and components
  • Secondary Pallet can be used to indicate a related action or information
  • Accent Color Should be used for floating action buttons and interactive elements
    • Text fields and cursors
    • Text Selection
    • Progress Bars
    • Selection controls, buttons and sliders
    • Links
  • If your background color is the 500 version, make your accent either white 100% or black 54%
  • Dark text on light backgrounds (Opacity)
    • Primary Text 87%
    • Secondary Text 54%
    • Disabled/Hint text 38%
    • Primary Color 100%
    • Accent Color 100%
  • White text on Dark backgrounds
    • Primary Text 100%
    • Secondary Text 70%
    • Disabled/Hint text 50%
    • Primary Color 100%
    • Accent Color 100%
  • Use opacity instead of grey text. 
  • Icons and other elements work better being black or white at 38% opacity
    • Dark Icons
    • Active Icon 54%
    • Inactive 38%
    • Light Icons
    • Active 100%
    • Inactive 50%
• Themes
  • Lets you apply a consistent tone to the app 

• (post on blog one #thursday app before midterm and one after midterm) 
• You need to write about your critique and iterations on your paper prototypes 

Design Tools for Prototyping 

omnigraffle

Framer

Flint

Marvel 

Point is measurement sequence

4 pixels in every point

packs more information into a smaller size

Concept:

• An online mobile photo-sharing community that allows people who have fitness goals to share pictures of their DIY meals or meals from restaurants that meet their fitness needs
• A source for fitness meal inspiration from real people around the world

 

App Map:

https://drive.google.com/file/d/0Bxu-j9eOkv5XTmJiUi11LWhZU0U/view?usp=sharing

 

Wireframes:

https://drive.google.com/file/d/0Bxu-j9eOkv5XZEt5TmhkSjIyMmM/view?usp=sharing

My Recipe Book is an application that allows the user to customize and decorate their recipes with various templates and stickers. Inspired by recipe books that housewives love to write after they finish making delicious meals, My Recipe Book App provides similar functions that allows the users to create their personal and unique recipe books.

---

Appmap PDF link

---

Wireframes

Video Link – Wireframing

 

---

Three things I learnt from IOS HIG (Human interface Guidelines)

1. Social Media: Don’t ask people to sign in. iOS employs a single sign-on model for accessing social media accounts, so you can get authorization to access an account without requiring authentication. If the user isn’t signed into an account, you can display a system-provided interface that allows them to do so. (This is something I have strongly common feeling when I was doing the first assignment. It is better to let users at least to try your App first. If users find there are too many requirements or limitations to your App, they will lose interests and even delete your work from their phones )
2. Notifications: Don’t include your app name or icon. The system automatically shows this information at the top of each notification. (Always to keep the interfaces of  phones clean and neat)
3. Refresh Content Controls: Perform automatic content updates. Although people appreciate being able to trigger an immediate content refresh, they also expect automatic refreshes to occur periodically. Don’t make users responsible for initiating every update. Keep data fresh by updating it regularly. (How to save time for users and never bother them to do anything “too simple”, therefore, the users would spend more time o gluing to your App)

 

Quick Meals

Quick Meals app is a growing database of quick and easy recipes that can be made in few minutes. Search for a recipe by using categories like 15-min quick meals, 30-min quick meals, popular, cuisines and dish type and even occasion. All recipes come with photos, timing, directions and ingredient lists. Find one you like and you can add favorite it so you can find it later. You can also view a grocery list for each one and check all the things you need. This will be saved to one of the tab lists you can check while shopping in the market. In addition, you can search for certain foods like steak or seafood and the app will give you a list of various ways of cooking steak or seafood, and then you can look at the step-by-step instructions on how to prepare it and get to know for how long it will take.

App Map

Prototype 1

3 Interesting things about iOS Human Interface Guidelines 

1. Apps integration with Imessage

Apps can integrate with Imessage by an extension. It lets users share specific content – text, photos, videos, stickers, games etc. Here is an Imessage stickers app made by me. It is a series of peacock stickers with text. https://itunes.apple.com/us/app/pealets/id1195799309?mt=8

 

2. Integrating Widgets on the search and home screen

Users can add widgets to the search screen by swiping left. You can also access a widget by using 3 D touch to press your app icon on your home screen.

3. Peek and Pop:

Use 3 D touch to preview an item – mail, image, message, link – anything. Simply apply a little pressure to fill the screen and lift your finger to exit the peek. In some, you can also swipe up to reveal buttons.

Selfie and Intro:

Hello, I’m Gunjan. My first and everyday rule in life is “Inspire and get inspired”. I believe that we learn the best things from people. I love creating instant rapid prototypes and iterating. I also love designing social platforms. My background is in Electronic Media. I am a currently a designer creative technologist studying MFA Design and Technology at Parsons, The New School for Design, New York.

1. Food App

Yummy is an app that you can explore and share your own hometown recipe. Based on my experience, students live in a foreign country always miss their homemade food a lot.

When opening this app, people will be put on a default page, and then, they can choose a filter to explore the food: hot, category, or country. The second part of this app design is users can create their hometown recipe and share. The last part is they can open their account to see what they have made. And also, they can look at the recipes (the likes) that is collected from others.

 

2. Notes of iOS Human Interface Guideline

(1) Use animation and motion effects judiciously.

I didn’t know overusing the motions will make the users feel disorienting and difficult to control the app. It reminds me a work by Fyn Ng when I saw this guideline. This work used 3d models to represent an imagination of app. Maybe now it is not the time to do so. But in the future, it could be. So now, we still need to use the motions carefully, especially in apps that don’t provide an immersive feeling.

(2) Test your icon against different wallpaper.

The guideline provide an good example for testing icons on Home screen. I always test icons on a dark and white screen. But just as the guideline mentions, it is not enough, we need to check it on different photos of background, and even the dynamic one.

(3) Launch screen

Every app must have a launch screen. As the guideline mentions, it is a way to show your app is fast and responsive.

EasyTrip 

• EasyTrip is an APP designed for travelers to discover the best places to play, eat and stay. And making it into a plan.

• With this app, user can plan trips directly from this app and share with friends.

• User can discover millions of

places, like restaurant, point of interest and other popular places. And add it to your plan with one single tap.

• User can easily find the best restaurant / Point of interet to go along the trip.

My wireframe is attached below here

Wireframe