Application Design refers to the creation, especially graphically and interactively, of applications. Nowadays, this usually refers to the creation of mobile applications, specifically for smartphones. Following the rise of said devices, the need for clean and readable User Interfaces and enjoyable User Experiences has risen.
The App Design market is heavily saturated, with many high-budget companies and indie start-ups providing good services and products; however, many designs are terribly flawed and provide an unsatisfactory User Experience. In order to create an efficient and user-friendly application, one must pay attention to the principles and elements of art and design, and how they intertwine with the human psychology. Thus, the User Experience is improved through the creation of a good User Interface.
Various groundwork must be put into place first, the designer needs to identify the function of the application, the desired target audience and the factors surrounding the influence of these variables.
As the application is designed, the elements and principles of design should be applied to the interface, ensuring that any user is instinctually aware of where they must go to access whatever it is they desire. Simplicity is key; clean shapes and minimalistic use of colour references ensures that the user knows what a symbol represents.
Example: A check/tick shape in green signified accept, while a cross/X in red signifies cancel or close. These are symbols and colour-references that have been ingrained in our psychology, further perpetuated by modern application design.
User Interface and User Experience are two extremely important elements when it comes to the overall design of an application, with User Interface requiring that the layout is attractive and User Experience requiring that the application is easy and enjoyable to use.
The use of mapped out wireframes, grids and tappable areas is incredibly important, as these allow you to plan the layout, readability and accessibility of your application. They also allow you to more efficiently adapt the design across platforms and devices, creating a cleaner and more efficient set of shapes to work with. Before finalising your wireframe, you must create a comprehensive flow map, detailing the potentials paths that a user may take to access the various parts of our application or website.
It is important that your test the User Experience responses to each stage of our design process, creating prototypes and gaining feedback on how to improve your current design.
Some advice to note, mostly for User Interface and Experience Design:
-Have extra views, as this will help de-clutter each individual page
-Create customized button styles that fit the theme of your application
-Ensure functional design over purely visually attractive design
-Avoid low-resolution elements, as well as the over-use of animations
-The user needs to know what is happening and what they are viewing at all times, ensure that they are aware of where they are in the application and what is currently occurring
-The main elements and objectives of a page and application should be highlighted using the principles and elements of design, ensuring a readable and clear purpose that aligns with the goals of the end user
How has App Design changed and developed since the start of smartphone based computing?
Application Design, as well as Website Design (both may fall under Graphic Design), has changed since the rise of smartphones. Compatibility is the main issue, with sites needing to be readable and accessible on both a large and small screen, varying in sizes and resolutions. To combat this issue, computer and mobile-based site versions are available on some hosting services. However, another way to ensure an application or website is readable interchangeably from device to device, design utilizing bold, graphic shapes and clean sets of colours is imperative. This allows users on mobile to access menus and desired tabs/pages easily and accurately, lowering the chance of ‘mis-clicking’. This also allows the application’s design to dynamically format to the resolution and size of the device’s screen while maintaining order and readability.
This adaptive formatting of websites and applications, and the use of specific edited versions for different devices’ User Experiences, has been dubbed Responsive Design.
An important factor to this dynamic formatting would be a grid system, with a series of blocks and rectangles that appear in different configurations when viewed on different devices or platforms, commonly referred to as Masonry Design.
How has Interactive Media authoring/creation changed since the invention of interactive systems? (Phones, tablets, computers). [Why have CD-Roms and DVD players become obsolete?]
Nowadays, just about anyone with a computer and internet connection can create and publish an application one of the many app stores worldwide. This, combined with the range of capabilities of the devices that are available today, render most old forms of specifically-purposed technologies obsolete in the current day and age. Going forward, more and more old sets of technological inventions will become less and less useful due to the extensive uses and functionalities of computers and mobile devices.
A device, of which can fit in your pocket, can access the internet, stream video, interact with various applications, message and call others is more efficient and useful than a bulky DVD player with a singular purpose. Nowadays, you can connect said mobile device (a computer or tablet may perform this task as well) to a smart TV, allowing you to watch a variety of content without the need for a singular purpose machine or device. Smart TV’s also have the capability to access the internet and stream video, as well as utilizing a series of applications.
Efficiency, accessibility and variety is what is pushing this modern technology far ahead of their older, more singular-purposed archaic counterparts. When designing an application or device in this modern era, one must consider not only the principles and elements of design, the tried and true theories in graphic design and psychology, but also the needs, wants and demands of modern life and people in this technology driven age.
5 Good App Designs:
Spotify Mobile App:
Spotify is an incredibly intuitive and efficient application, allowing you to stream music anywhere and everywhere. Backed up by a plethora of genres, suggestions, playlists, songs, artists and settings, your listening experience is highly customizable.
In regards to visuals, it opts for a sleek and minimalistic look that is driving forward many design philosophies of this modern era; simplicity, readability, efficiency and ease of use/navigation, authentic and emotive photographs, hand-created icons that are instantly recognizable (and are backed by accompanying text in a clean, simple font), and the restrained use of bright colour (bright green for certain actions such as typing, shuffle play and toggling options).
Readability and navigation wise, it is a highly efficient application, with a bar of helpful main sections at the bottom, your current song (of which can be paused/played or brought up/down via an arrow), and simplistic and informative lists and titles that allow you to navigate the world of music through a categorized and search based system.
Spotify is extremely neat, with the clear images, graphics and text standing out on the dark background. There is a clear hierarchy of information, with different values being assigned to important headings, song/album/artist tiles and extra information.
Interacting with Spotify is a smooth and efficient experience, with interactive options that allow you to quickly navigate to various ‘hubs’ and pages in the application. Having the ability to access your current song, playlist and all of the various artists, albums and songs via that at any moment provides you with instant access and interactivity. Not only that, but you are also constantly discovering new songs via the suggested songs and related artists sections, as well as the various playlists, genre sections and radios that are available.
Instagram Mobile App:
Similarly to Spotify, Instagram ops for a more simplistic and elegant approach; the focus is on the images that are posted, with a hierarchy of information created through the use of text, font, type-face, symbols and imagery. Interactivity is easy, with a bar (Similar to the one in Spotify) at the bottom of the screen of which allows you to access the home screen, search, add a new photo or video, look at your favourites/likes or view your own profile. From either of these sections, you are provided with a variety of interactivity options that only require a few, possibly even one, press to access or interact with.
Where Spotify opted for dark monochrome colours with hints of green, Instagram instead uses whites, greys and highlights of blue to show certain prompts or current selections. Most images and areas of text have their own demarcated circles, rectangles or squares, allowing for a variety of phone sizes and screen ratios to access the application (the same goes for Spotify).
Swiping left or right at the top bar, near the word Instagram (dark and highly contrasted against the light background), will allow you to either take a photo/video or access your direct messages. Two icons help represent this, of which may be clicked on to access these sections as well, and are highly recognizable in their intentions due to the symbolism and contrast used in their designs. Similarly, one may like, comment or share a post with a friend via the line-based designs underneath the images. The user will understand and associate these with the filled in icons and understand that they may be interacted with, their intentions clear via their symbolism-based designs. Once an image has been liked, the heart will fill in with a bright red, indicating its status to the user.
Overall, the application makes use of a simplistic, efficient and minimalistic design direction to help keep the creation, interaction and consumption of media the focus.
Once again, the trend of the hub-based bottom bar has continued. This time, the predominant colour is purple, aided by the monochromatic and simplistic designs that occupy the background and navigational menus/options. Important sections, information and current selections are assigned colours, helping them to stand out from the background and take hold of your attention to notify you of their status.
Being an application that helps you track your mood, a calendar and emotive based system is used to quickly and efficiently record and track your emotions throughout the various months. The emotional states, that are options for you to choose from, are assigned certain colours and descriptions; these range from rad (orange) to awful (dark grey). One may track their progress through the calendar and statistic pages, allowing them to see and alter trends in their emotional states.
Various options and settings exist, allowing you to personalize your experience via editing moods, activities and toggling whether or not you would like to have reminders to prompt you to record your emotional state at any given time of the day.
When recording or viewing your emotional state, you are given the option to affect or view your average mood or a variety of other activities. Readability is paramount here, with a white rectangle pop-up that jumps to the foreground, the background faded in grey, with a list of activities to choose from. Each one has an icon (with colours) assigned to them, with the amount of times they have been tracked next to them in brackets. The hierarchy goes as thus; Heading, Icons, Description, Extra Information, with each section being given a clear position through the use of colour, size and value.
Font-wise, the application remains consistent, with the only variant being in size and value.
Overall, the application is clean, effective and efficient in both navigation and interaction. The aesthetic style remains true to the trend of today’s applications; clean, minimalistic, monochromatic but with a hint of colour to help readability and amplify the UI/UX.
Daylio, sadly, includes advertisements that require payment to disable. Not only that, but the option to export your entries is locked behind a paywall; premium membership.
Shazam, like the previous three applications, continues to utilize the graphic, simplistic and hierarchical design structure that allows for ease of use and clear readability. Although it does assign certain sections, graphic shapes and clear wireframes to headings, options and selection options, the use of its characteristic bright blue and orange colours are rather liberal.
Even though this helps construct a coherent graphical style, it does wear down on the user’s vision and attention span. However, the application is only meant to be used in short bursts, so in that context the bright and simplistic design direction actually heightens its effectiveness.
Once again, options and interactivity options are displayed via a hierarchical network of text, colour, symbols/icons, drop down menus and interactive drop downs. To access the various parts of the application, one need only swipe sideways or select on of the clean, directly understandable icons displayed on the screen.
To use Shazam’s main function, the identification of music, one need only tap the large icon labeled ‘Tap to Shazam’ in order to prompt the application to listen and attempt to identify the music it is presented.
Navigation is smooth, especially due to the hierarchical network of information, sections and lists; although the bright use of colour and various icons from other applications that you are prompted to use distract the user and put strain on the eyes if viewed for extended periods of time.
Pinterest Mobile App:
Pinterest follows the same style as Instagram and Spotify, with its monochromatic scheme and limited use of bright colours leaving room for the centre stage attraction; the images shared, searched for and pinned on the application.
The application and experience is efficient and pleasant, with the options to search, post or access settings at the top of the screen. You may also create various boards, follow genres/boards, pin images and explore other user’s profiles.
Options that may appear on screen, while still editing or accessing a specific tab, appear ‘on front’ of the background, fading all but its own contents to grey.
Once again, a hierarchy of information is created through the use of images, symbols, values, colours (especially red, of which is used on certain options and prompts, usually for final actions), font sizes, placement, negative space and graphic shapes.
3 Bad App Designs:
Anniversary Birthday Reminder:
This application, aiming to provide a reminding service for birthdays, anniversaries and events, is rather poorly designed. The visual aspects of the app are extremely cluttered, with a variety of colours and tangents fighting for your attention. Although it tries to opt for a sleek design, through the use of minimalistic graphics, it falls short and presents an oddly cluttered and confusing layout. This is mainly due to the poor wireframing, positioning and combination of colours.
The ‘tags’ alongside the list inside the events section are confusing and difficult to read, with a purple colour on a cyan strip, sideways, while connecting by a tangent to the related image.
Kanban Board, an application designed for note taking, relies upon its novel appearance as an approximation to sticky notes stuck upon a board comprised of a cork-like material. This, in theory, may sound like a good idea; creating a note taking application that simulates a possible route of note taking in real life, adding a sense of realism and tangibility to the notes you are taking.
However, the design of the application, in regards to its visuals, is highly flawed. The greeting screen is decent enough, with three title-customizable columns that default to TO-DO, DOING and DONE. The top left of the screen features a plus button, the top right a trash bin icon. The user will be aware that the plus will add a new note, while the trash bin icon will delete a note. However, the main issues come in when observing the variety of textures, colours and icon styles, as well as fonts on display.
Upon clicking upon the plus button on the top left, you are prompted to add either a green or yellow note, or select an orange and white plus button. These icons are separated from the tiled background texture via a semi-transparent black strip with a small title saying; Add note. If one accesses the orange and white plus button, you are sent to a mostly black screen prompting you to ‘Download more note.’ Next to this, a smaller green bar prompts you to ‘Find out more’ with an arrow indicating a drop down near it. This bar, bearing close resemblance to advertisement pop-ups and embeds, makes the user wary to access it.
Another large issue is the disconnection between pages and fonts, with headings, text placeholders/prompts and other sections with text having a variety of different fonts and sizes. Not only that, but there are grammatical errors in some section; ‘Download more note’ and ‘LIST MORE NOTE’ being two prime examples.
Colour and texture wise, there is much to be desired. While the section prompting you to download more notes uses a somewhat cleaner aesthetic, it does not flow well from the heavily textured attempt at emulating a realistic board. When clicking on the plus button on the top left and then proceeding to create a new note, by clicking on either the green or yellow icon, you are able to type up a note. The note appears as a square shape, with one corner folded, in a rather garish green or yellow with grey substitute text. This is difficult on the eyes, with the grey text being difficult to focus on due to the distracting colour it is placed upon, as well as the heavily textured, yet faded out, background.
The size icon, a rather typical floppy disk icon of old, is present on the top left of the note. This further perpetuates the lack of consistency of icons, with the different buttons possessing different styles and levels of detail.
Overall, the application tries and fails to create a novelty note taking system, the inconsistency of styles and difficult-to-view visuals places strain upon the user’s eyes and discourages them from further use of the app.
Note Droid takes what Kanban Board did, but does it to an even worse degree. Once again the user is greeted with a cork-textured board background, with a wooden strip at the top of the screen. Upon this sits the titles of the application, a search tool (indicated by a magnifying glass) and another icon that allows to to create a new category. The pop-up window that appears allows you to edit the name of the category, the ‘Pushpin’ colours, as well as the colours of the note that indicates the category.
Another issue with this application that coincides with the flaws of the previous app is that it features a variety of icon and font styles, rather disconnected from one another. The drop down menus are drastically different from the rest of the application, featuring a much cleaner aesthetic.
Upon creating a new note, you are presented with a new page featuring a note appearing as though it is part of a large notepad, the previous pages torn out. The font for the title at the top of the screen, the font for the titles and text of the notes, and the font used for the drop downs are all different. This may be a good thing, yes, it can help organise the different functions of the application by assigning them with different visual styles. However, the difference is rather jarring when combined with the various different background styles and aesthetics.
The icons, for the most part, stay consistent throughout the pages. They stay within the top strip of the page, allowing you to save, return or access a drop down (of which lets you share the note) when typing up a note.
Adverts appear to be commonplace in many applications, with some of these apps allowing you to opt out via payment. Some, however, have no such option. Ideally, an application with no advertisements would be desired.
Broderick, J. (2011). Camera Button. [online] Dribbble. Available at: https://dribbble.com/shots/208524-Camera-Button [Accessed 28 Sep. 2017].
Clapham, S. (2013). How website design has changed with the rise of Tablets & Smartphones – Parachute Digital Marketing. [online] Parachute Digital Marketing. Available at: http://www.parachutedigitalmarketing.com.au/blog/mobile-marketing-and-apps/how-website-design-has-changed-with-the-rise-of-tablets-smartphones/ [Accessed 28 Sep. 2017].
Creative Bloq. (2013). 10 things web designers need to know about app design. [online] Available at: http://www.creativebloq.com/app-design/web-designers-need-know-3132155 [Accessed 28 Sep. 2017].
Fearlessflyer.com. (2014). User-friendly mobile Apps – 12 Must have Design Elements to Follow (Part 1) – Fearlessflyer.com. [online] Available at: http://fearlessflyer.com/user-friendly-mobile-apps-12-must-have-design-elements-follow-part-1/ [Accessed 28 Sep. 2017].
Flarup, M. (2016). What You Should Know About The App Design Process. [online] Smashingmagazine.com. Available at: https://www.smashingmagazine.com/2016/11/what-everyone-should-know-about-the-process-behind-app-design/ [Accessed 28 Sep. 2017].
Grannell, C. (2017). How to make an app in 2017. [online] Creative Bloq. Available at: http://www.creativebloq.com/app-design/how-build-app-tutorials-12121473 [Accessed 28 Sep. 2017].
Graphicloads.com. (2015). Factors to Make a Successful Mobile App Design – GraphicLoads. [online] Available at: http://graphicloads.com/factors-to-make-a-successful-mobile-app-design/ [Accessed 28 Sep. 2017].
Ling, T. (2017). Nexus Screen Android UI Design Kit PSD Mockups – PSD Mockups. [online] PSD Mockups. Available at: https://www.psdmockups.com/nexus-screen-android-ui-design-kit-psd-mockups/ [Accessed 28 Sep. 2017].
Matzner, R. (2012). Designing a Mobile App? Don’t Make These 10 Mistakes. [online] Mashable. Available at: http://mashable.com/2012/04/11/mobile-app-design-tips/#9MUKlUkTlPqY [Accessed 28 Sep. 2017].
Molla, R. (2017). How Apple’s iPhone changed the world: 10 years in 10 charts. [online] Recode. Available at: https://www.recode.net/2017/6/26/15821652/iphone-apple-10-year-anniversary-launch-mobile-stats-smart-phone-steve-jobs [Accessed 28 Sep. 2017].
Moore, J. (2017). A Step-by-Step Guide for Starting a New App Design Project in Sketch. [online] Medium. Available at: https://medium.com/ux-power-tools/a-step-by-step-guide-for-starting-a-new-app-design-project-in-sketch-469df0f24af8 [Accessed 28 Sep. 2017].
Moreira, J. (2012). Archivme iPad app – iOS. [online] Dribbble. Available at: https://dribbble.com/shots/391714-Archivme-iPad-app-iOS [Accessed 28 Sep. 2017].
Pierce, D. (2016). How Apple Taught the World to Smartphone. [online] WIRED. Available at: https://www.wired.com/2016/06/apple-taught-world-smartphone/ [Accessed 28 Sep. 2017].
Qayyum, A. (2012). 9 Easy Steps Towards Designing an iPhone App. [online] Smashinghub.com. Available at: http://smashinghub.com/9-easy-steps-towards-designing-an-iphone-app.htm [Accessed 28 Sep. 2017].
Rocheleau, J. (2017). Ultimate Resources For Mobile Web Application Design. [online] HKDC. Available at: http://www.hongkiat.com/blog/webapp-design-resources/ [Accessed 28 Sep. 2017].
Skyboy Design | Cape Town | Graphic Design | Branding | Interface | Web. (n.d.). UI Design: Mobile app for photographers by Skyboy Design. [online] Available at: http://skyboydesign.com/project/quickpic-app-uidesign/ [Accessed 28 Sep. 2017].
Smith, K. (2012). Interface Buttons for iPhone & iPad Applications / Design Tickle. [online] Designtickle.com. Available at: http://www.designtickle.com/2012/04/interface-buttons-iphone-ipad-applications/ [Accessed 28 Sep. 2017].
Staff, C. (2015). 16 killer design tips for creating mobile apps. [online] Creative Bloq. Available at: http://www.creativebloq.com/app-design/16-killer-design-tips-creating-mobile-apps-11513821 [Accessed 28 Sep. 2017].
Tierney, P. (2012). Good design/bad design – phone app wireframe. [online] phmtierney – web design for photographers. Available at: https://phmtierney.wordpress.com/2012/12/02/good-designbad-design-phone-app-wireframe/ [Accessed 28 Sep. 2017].
Titcomb, J. (2017). 10 ways the iPhone changed the world. [online] The Telegraph. Available at: http://www.telegraph.co.uk/technology/2017/01/08/iphone-turns-10-10-ways-changed-world/ [Accessed 28 Sep. 2017].
Anon, (2011). [online] Available at: https://www.quora.com/What-are-the-worst-examples-of-poor-UI-design-in-common-use [Accessed 28 Sep. 2017].
Barron, B. (2016). Cite a Website – Cite This For Me. [online] Elegantthemes.com. Available at: https://www.elegantthemes.com/blog/resources/bad-web-design-a-look-at-the-most-hilariously-terrible-websites-from-around-the-web [Accessed 28 Sep. 2017].
Cao, J. (2017). 10 Worst Design Failures of All Time. [online] Studio by UXPin. Available at: https://www.uxpin.com/studio/blog/10-worst-design-failures-of-all-times/ [Accessed 28 Sep. 2017].
Rutherford, Z. (2015). 6 examples of awful UX design. [online] The Next Web. Available at: https://thenextweb.com/dd/2015/09/29/6-examples-of-awful-ux-design/#.tnw_eA4K9ykg [Accessed 28 Sep. 2017].
Sandy, B. (n.d.). Menus And Buttons In Mobile Design – 45 Examples. [online] Design your way. Available at: http://www.designyourway.net/blog/inspiration/menus-and-buttons-in-mobile-design-45-examples/ [Accessed 28 Sep. 2017].
WebAppers. (2011). More Awesome CSS3 Buttons for Your Web Application. [online] Available at: http://www.webappers.com/2011/09/06/more-awesome-css3-buttons-for-your-web-application/ [Accessed 28 Sep. 2017].