App Idea Outline
BlueProject – Project Organiser App
My idea is a Coursework/ Project planning app that allows the user to easily and intuitively plan out their work, setting deadlines and goals easily viewed by a calendar /work to do page.
There will be two versions of the app, a ‘free’ version for students and a ‘paid’ version for professionals in the industry. This business model will allow students, who may be limited in their budget to use this app and also pay for its development with the ‘paid’ version. This design will also draw in ‘paid’ users as once they leave education as the app will automatically ask you to upgrade to the professional version.
Each version will be tailored to its specific market audience I.E. the student version having teacher login accounts that are able to set deadlines and review work and the Professional version having client login accounts that are able to see the progress of the company/employee’s work.
- Current Projects
- Upcoming Projects
- Project Pages
- Media Libary for sharing content
- Student and Professional version
- A version of the app for clients so they can view the progress of work
Student version (Free)
The first demographic the app will cater to will be students in coursework based education such as art and design/media. They will most likely be aged from 16-20 covering both college and university students.
What features will differ
This version of the app will have a ‘Teacher login’ that allows course leaders to set projects and deadlines for their students. Students will also be able to set their own goals alongside these deadlines or create their own projects and deadlines independently.
Professional version (Paid)
The second demographic will be aimed at professionals in the creative industry such as media production or graphic design. This version will act as a sort of ‘premium version’ as the Student version will require a user to register with a teacher before they can use the app.
What features will differ
As this version is more industry-focused, it will have a feature that allows the users’ clients to view their progress. This will improve communication between client and artist as they will easily be able to see and give feedback on work.
The visual style of the app
The visual style of both versions of the app will be professional and have a minimalist design. The colour palette will be made up of different shades of blues and turquoises which will reflect and compliment the name ‘BlueProject’.
Icon mood board
Colour palette mood board
App layout mood board
The principles and processes of interactive design – Jamie Steane
Dropbox is a freemium (you have to pay for extra storage space) file sharing/cloud storage app for both desktop and mobile. The basic layout is fairly simple, with a hamburger menu on the top left, a heading showing what folder a person is in and search and settings buttons on the top right. The main bulk of the screen is then taken up with a list showing files and folders – each with their own icon to easily identify what they are.
The overall user experience is fairly good, with gesture controls to access the hamburger menu by swiping left and an easy ‘add here’ button floating on the bottom left of the screen. The colour palette is also simple and is consistent from window to window.
Spotify is a music streaming application that allows the end user to play pretty much any song that they could want. Not only does it have playlists but it also selects and shows you songs it thinks you might like through the use of the discover tab.
While it also implements and uses gesture controls, sometimes when swiping right to skip a song, Spotify continues to play the same song and you have to swipe again to make it skip. Its queue system is also good, as it not only shows what is next in the playlist, it allows you to create a queue of songs before the next song from the playlist. Reordering songs in the queue is also made very easy as you drag and drop the songs in the order you desire.
The layout of the content is also well thought out, even though there is a lot of it. the tabs at the bottom allow you to easily find songs/playlists and the current song bar with the pause button allow skipping through the use of swiping. The colour scheme is made out of different shades of grey, which contrasts well with the various colourful artwork of the album covers and band icons.
The settings menu, however, isn’t the most intuitive to access as you first have to go into ‘Your Libary’ then click the cog icon to bring up the menu.
I Love Hue
I love hue is a mobile game that you organise a grid of colours in order of their hue. while playing the game, the majority of the screen is taken up by the colour grid and the only other element visible is a button on the top right to access the settings/pause the level. When you first start a level, the correct order of the colours is shown briefly before it is then scrambled.
Colour tiles are swapped by pressing a tile and then pressing the tile you want to swap it with. This process is then repeated until the level is completed.
In between levels, the menu is quite well designed, utilising gesture controls with animation. The first page is where you select the ‘Stage’ of difficulty, more stages are unlocked as you progress in the game. Once you have selected a Stage, a list of levels is displayed, which you can either swipe through or press the relevant number on the bottom of the screen.
The layout of the elements are fairly in line with most of the other apps- information like health and gems, along with the settings button are positioned along the top. The colour palette for this app is interesting, as the point of the game is to have many colours displayed on the screen at once so the rest of the UI has to be visually simplistic to not overwhelm the user.
(Photos have been blurred out for privacy reasons)
Discord is a group voice chat program used to talk to people online. Running on both desktop and mobile the interface is reasonably similar in both, being optimised for a narrower aspect ratio and touchscreen on mobile.
Once the app has loaded, you are greeted with the default screen, showing you the servers (groups) you are a part of on the left and a text chat in the middle. Swiping right brings up the channel menu, showing you a list of the text and voice chat channels. Swiping left brings up the people who are currently online and shows the server ranks.
The colour scheme of this app is made up, like many of the others, from shades of grey. The occasional hint of green, yellow and red are also used with text. Settings are laid out in the bottom left (accessed through the cog icon) and a hamburger menu is on the top left for more options.
Snapseed is a photo editing app made by Google. It has a very clean design and its controls are intuitive, using lots of gesture controls for switching between different editing modes such as in the tune image menu.
The first window the user is greeted with is the ‘open a photo’ screen, where you can tap pretty much anywhere to bring up your gallery, with access to google drive folders and other selected apps.
Once you have selected the photo you wish to edit, the photo is brought up in the centre of the window with a scrollable library of filters along the bottom to automatically create stylised photos.
There is also a tools tab for people who want total control of everything from contrast and brightness to perspectives and heal tools. You can also crop an image larger, making somewhat interesting and varied results.
Using a palette mainly made out of light greys, image editing is made much easier as all the attention is drawn to the photo rather than the user interface.
Saving and exporting is fairly easy, pressing the export button on the bottom right brings up the ‘export menu’ from which you can share or save or export (using different settings from the original image such as resolution or file type).
Things to consider when designing an App
Function and application
The apps function is very important to its design and mechanics. For example, when designing a file transfer/cloud storage app, the emphasis of the UI must be on displaying the files, using ample space for folder viewing and simplistic colour palettes as to not confuse the end user. However, if an app is designed as a music platform- while also keeping a simplistic (perhaps monochromatic) colour scheme it must be more focused on browsing songs/albums/artists.
Interactivity and UI
Interactivity is very important in app design- perhaps even more so than app design- as the user will interact with an app in a much more intimate way so the layout and functionality must be immediately intuitive.
User Interface is also essential to a well-designed app, as with interactivity, it must be easy to understand and confusing to the end user.
Exchange of data
When storing and handling sensitive user data, such as names, passwords and personal information. App designers must adhere to data protection policies and guidelines such as the Data Protection Act (1998). Data stored on the device itself (such as notes in a note taking app) are considered the end users responsibility. However, if the app has a feature that allows the user to store information on a central server so that they can access it from different devices and platforms then it becomes the responsibility of the app creator to make sure the data is as secure as possible and that the user is aware of the risks of data breaches. The individual or company responsible for the sensitive data must also be vigilant in case of data breaches and notify the end user if one has occurred that their information may have been stolen.
Stages of professional app design
Phase 1 – Pre-production
Before creating an app, you must first come up with an idea and research the current app market to see if your app fills a niche that may help it be more successful. You must also consider the functionality and layout of your app, along with possible colour schemes and interface styles.
Phase 2 – Idea Development
Once you have your idea, you must start to come up with interface diagrams and mockups showing how your app will work. The emphasis on this stage is more about how the app functions rather than the look so it may not look very ‘pretty’ at this stage.
Phase 3 – Visual designs
This is the part where you create layout mockups and interface elements for your app. Essentially creating the look and feel of your design.
Phase 4 – Programming
In the industry, this part will generally be handled by two teams, the designers and the programmers. Both teams will have to work closely together to create the final, fully functioning app.
Phase 5 – Beta testing / Launch
Your app is finally ready to be released. However, there may still be problems and bugs in the coding/ flaws in the design of the app which need to be addressed by the designers. One way to achieve a more polished launch of an app is to have a ‘Beta test’ group. This is where the app developers will release an early version of the app to a small group of testers.
Thumbnail sketches help the designer to come up with initial ideas without committing to a finalised style or design.
Wireframing is an important part of app design and development. It helps the author to plan out the layout and functionality of the app. Using a grid system is also important when wireframing so that the design across different pages and screens are consistent much like in web design.
Elements of app design