Lecture One: Introduction to App Design

• Apps are a type of software, designed to perform specific functions the user may need. For instance, a calculator, compass or weather prediction.
• Three types of apps include: HTML 5, Native and Hybrid. 
• HTML 5 – responsive web design that combines HTML, CSS and JavaScript coding. Often named “write-once-run anywhere.“
• Native – runs directly on the mobile device and developed specifically for an operating system, i.e. what may work for the IOS may not work for Android, therefore coding is altered to ensure smooth running of the app on that particular device.
•  Hybrid – combines elements of Native and HTML 5. Primarily built using HTML 5 and JavaScript, however access to Native features such as the aesthetics and offline operation is possible.
• Pros of HTML 5 include being able to quickly transform any website to be made available on a mobile device while maintaining user friendly features. The best part, all the coding only needs to be done once. However, there are cons which include, poor user experience as well as poor performance. There is also no possibility of accessing the in-built features a smartphone has, such as the camera, calendar etc., from within the app.
• Pros of Native consist of the User Interface (UI) and User Experience (UX) running smoothly along with fast loading, powerful performance both offline and online, easier discovery on the systems store and is deemed much more private and secure than HTML 5. Cons are Native app creation is the most costly and time consuming as developers need to create coding for both IOS and Android as it is non-transferable.
• Pros of Hybrid include the ability to operate like a HTML 5 webpage but similarly operates and aesthetically looks like a Native app. Cons include slower performance.
• When designing an app the following should be considered:
  • The UI needs to be familiar to the user and designed with the intent of being used through touch gestures.
  • The resolution of the device must always be considered, time is important as you have a short amount of time to get the information across to the user, therefore the simpler the better.
  • Screen space is limited, thus the elements of the app need to maintain their readability with compromising space.
  • Context is important, understand what your audience want by conducting research and testing prototypes etc.
  • Wireframes are vital before producing any project as you get a sense what the app may look like prior to its completion along with deciding if any alterations need to be made.

Image source:

Telerik. (n.d). Unknown [Digital Illustration]. Retrieved March 8, 2017, from, http://venturebeat.com/2013/11/20/html5-vs-native-vs-hybrid-mobile-apps-3500-developers-say-all-three-please/ 

Unpacking the Western App

 

Re-design of Western Screens

Elevator Pitch

 

 

 

Sometimes we designers and digital artists dread coming up with a colour palette for our projects because it can be overly time consuming. Many of us wish it could be simpler. Well I can tell you I have the solution. ‘Colour Creations’, the app I designed, allows the users to create a colour palette by basically uploading or taking a picture. Once generated the colours can be saved on online sharing platforms or on their smartphone. This makes for a more time efficient.

Colour Creations: Logo/App Re-design

Previous Logo:

Current Logo:

 

 

Logo review sheet (on previous logo):

 

Previous App Designs:

 

Modified App Designs:

Colour Creations: User Scenario

Sam is in a dilemma. Sam needs a new set of colours for a client’s project. The client is hassling him, so he needs a quick fix. A friend told him about ‘Colour Creations’. So Sam downloads the app onto his smartphone. He has two options, upload a photograph from his gallery or take a photo. He decides the quickest route would be to use a photograph from his gallery. He selects a photo. Colour Creations now generates a colour palette for him. However, Sam isn’t entirely satisfied with the combinations. So he touches the refresh icon to generate a new set of colours. Happy with the outcome, he moves on to the next step. Sam has the option of altering each colour manually. Though, Sam decides there’s no need as he is happy with the 5 colours. Once finalised, he can now save the palette in either CMYK or RGB values.

Lecture Seven: App UI Patterns

App UI Patterns: Launch, Tray and List

• Launch Screen
  • Reinforces brand image
  • Allows the app to load in the background
  • Usually require a touch to continue
• Tray
  • Sidebar, hamburger menu, the draw, the off-canvas layout; these are other names for the ‘tray’.
  • Designed to add more space to the experience
  • Users may need to touch or slide to open the tray
  • Made up of two main components; the active button and the tray area.
  • The active button can be either a hamburger, user icon or custom icon.
  • Should always be a visual button to make it clear to the user the feature is active.
  • When making the tray, some rules include making a unique shape, displaying that it is an active design, large enough for a finger, make it look different when touched and make it part of the navigation.
  • When creating the tray, allow for it to take no more than 70% of screen space to allow users to navigate out of the tray, as well as remind them which page they were on.
  • Good design elements of the tray, include a clean design, short labelling, little scrolling, minimal gestures of (up and down/left and right)
  • Don’t overuse trays.
• The List
  • A note to the user they are travelling through various pages within the interaction.
  • The list item should have an arrow indicating a lead to a new page as well as a design change to show that it has been selected. The navigation bar should be the same across all pages; it should include a back button to allow users to go to previous pages.
  • Don’t allow ‘the list’ pattern to goo too deep i.e. lead to 4+ pages.
  • Allow the last page to be actionable, whether it may be to share on social media or same as bookmarks etc.

Image Source: https://tubikstudio.com/color-in-ui-design-look-on-the-bright-side/

Lecture Six: User Scenarios

• Persona = fictional user of the interactive.
• Scenario = the context within which they use it.
• Similarly to how a script is written for theatre or films, designers must create a user scenario, which predict how users (user personas) may interact with an interactive in a particular situation.
• It helps the designer understand what future users may look for when engaging with an interactive.
• Every scenario is detailed in different ways, however they should essentially include the who, what, where, why and how of the usage.

 

Image Source: http://www.uxforthemasses.com/scenario-mapping/

Lecture Five: Personas

• Developing personas for a potential audience allows the designer to fully understand who their creation is aimed at.
• Creating user personas embodies characteristics and objectives that potential users of the intended interactive may have.
• Generally, user personas include information such as age, sex, occupation, relationship status, hobbies, likes/dislikes, goals, skills, attitudes etc.
• Developing several personas of your audience is ideal. This can be tough as one doesn’t know who may see the project, however personas of the intended audience is enough.
• Detail and refine the persona as much as possible.
• Even adding a persona to the actual product as well as the user, a great method of practice.
• When creating a product persona (referred to as Artefact Persona) the following questions should be asked:
  • If the product were a person, what would he/she be like?
  • How would users be expected to react upon first impressions of the product?
  • How would you describe the product to a friend?
  • How is the product different from other competing products?
  • Which celebrity, movie, car etc, would you compare the product with?
• Developing these personas are the building blocks of any design process.

Lecture Four: Understanding the Device

• To understand the smartphone, one must use it.
• In order, to design for each phone experience, you need to need to know how each platform works:
  • unique user interaction
  • interface elements
  • terminology
  • device characteristics

Behaviours and Gestures of iOS

• The iPhone welcome screen is the first thing users will encounter
• The ‘5 second learn’ grasps the user’s attention and becomes aware of the iOS gestures:
  • screen is touch
  • user interface elements are touch
  • use touch and swipe to engage the user interface elements
  • hardware buttons are secondary to the touch
• Common gestures:
  • Tap: building block to the iOS platform. Pressure of the finger comes into contact with the screen. Engages the user by using a 44×44 active area around the button. The pressure sensitive screen allows for people to use as lightly or as forcefully as needed.
  • Drag: using the touch gesture to scroll or move an onscreen element e.g. an app icon.
  • Flick: both a touch and movement of finger. Quick and less directed movement,
  • Swipe: using larger contact area for directing onscreen movement, access menus, navigation trays/touch-heavy interface elements, slower/controlled interactions.
  • Pinch: uses finger interaction to zoom in/out of an application. Based on two gestures; open = zoom in/close = zoom out.
  • Shake: uses phones accelerometer to activate a user interface action.

UI – iOS Anatomy

• Bars: contain contextual information that informs us their location, navigation/initiate actions.
• Content views: app specific content that can enable behaviour such as scrolling, incersion and rearrangement of items.
• Controls: perform actions or display information.
• Temporary views: appear briefly to give you important information or additional functions.
• Key-board: specify which keyboard you want, e-mail, default or URL.
• Pickers and Date Pickers: combination of various inputs in 1 spinner.
• Inputs: slide and the switch; used to create interactive messages.
• Tab-bar: facebook, common in all apps.
• Navigation Bar: plays a critical role; centre = title of the content, right = action buttons, left = used to go back.
• Tool-bar: acts as a general place holder for icon/text. The goal is to support the current page with secondary navigation, e.g. safari – bookmarks
• Action Menu: access to secondary action or navigation.

Lecture Three: App Design Process

• Designing an app involves the following steps:
  • Idea: -start with an idea and over time continue to develop this idea. To ensure an idea is strong there is a three-step process, i.e. generate —> challenge —> revise
  • Ask the following questions; can the idea potentially make revenue? Is it possible to create? Is it an original idea? How much can you simplify?
• Specs
  • Short for ‘specification’, spec is the document that contains information about what the app does and how it will do it.
  • It can often been seen as a contract that explains to people involved, what needs to be accomplished.
  • The document often refines the idea and changes elements of it.
  • Things should be kept short and simple otherwise aspects may be misinterpreted.
• Wireframes
  • Mockups that can be included in the spec or created from it.
  • Rough sketches are produced and gone through with the client, once satisfied they are then digitalised and revised once more.
  • Everything not realised in the spec are added on to the wireframes e.g. app flow or missing sections etc.
• Prototype
  • Once the spec and wireframe are successfully finished, it is now time for a prototype. This allows for early testing of the app. The creator can either use tools such as ‘InVision’ and ‘Marvel’ where mockups can be an interactive that allows the user to get a “feel” for the final app or code the app from scratch.
  • Complex apps with large teams have great benefits out of using InVision/Marvel as it is less time consuming and can be easily shared. However, smaller teams will benefit from going directly into code, and lays down a foundation of the actual app.
• Visual Design
  • Focuses on the appearance of the app.
  • It helps communicate the brand and makes the app experience more enjoyable.
  • It supports the overall idea, by executing the spec, wireframes and prototype.
  • The visual design can make or break the project as this is what will have a long lasting effect on the user.
• Development
  • Development and design are two separate phases. However, both link, development doesn’t exist without design and design doesn’t exist without development.
• Summary
  1. Get an idea
  2. Write it down
  3. Build a prototype
  4. Jump back and forth between design and development phases until you get a result.

Image/Information Source: https://www.smashingmagazine.com/2016/11/what-everyone-should-know-about-the-process-behind-app-design/

Lecture Two: App Design and Development

Things to consider before and during any design process:

1. Change the way you work

Begin with your idea. Conduct research and gather data to analyse and start with your project. Produce sketches and make mental and physical notes and mind maps of all the information. The next step is to begin with your project. Create wireframes and prototypes to visualise the outcome of your project. The final step, test your project. With the finished prototype/s, allow test subjects to experience your work and you as the designer can receive a first-hand examination of any problems and/or positives of your work.

2. Mobile First

Produce your design project to accommodate mobile phones. This allows you to prioritise the user experience (UX) and user interface (UI) for mobiles. Once the mobile aspect of the project is completed, it becomes easier to adapt and alter your designs for larger screens.

3. Understand Development

It is important to work collaboratively with the entire design/development team in order to generate a high quality and effective outcome. Learning the jargon of other fields you’re working with allows you as the designer to fully understand the scope of progress.

4. Use a variety of Operating Systems

Having access and familiarising yourself with the various operating systems makes your design development and app creation much simpler. Understanding how they work along with identifying the similarities and differences between them allows you to experience what the user may experience, which may make the final product more efficient and effective.

5. Prototype Everything

Constructing a prototype allows you as the designer to evaluate the positives and negatives your app may have. The endless amount of time you’ve spent planning your app may not actually be the outcome across all platforms, thus prototyping will help you identify any functional or aesthetic problems you may encounter on the various devices your project is running on, where you would then find and attempt potential solutions.

6. Apps are Never Finished 

With technology advancing quickly, ensuring the user has the best possible experience with any device has become increasingly important. Thus, upgrading the app in any beneficial way is essential and possible at any point in time.

Image Source:

(n.d.). Unknown [Digital Illustration]. Retrieved March 8, 2017, from, https://www.mockplus.com/blog/post/stepbystep-guide-become-an-excellent-interaction-designer