Lecture One: Introduction to App Design

Lecture Notes: Week One



  • 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/ 

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: User Scenario

User scenario for my app, Colour Creations.


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

Lecture notes on the week seven lecture pod.


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

Lecture notes on the week five lecture pod.


  • 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

Lecture notes on the week five lecture pod.


  • 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.