Design Process

Now that I have experimented with the program Flash Builder I decided to recreate the homepage mockup. I used the existing apps I researched and analysed as a sample to be able to develop a layout that will also be appealing and user friendly. I also followed the website Android Developers where they advise design features.

Below is the homepage design I have come up with and some of the features it will include. I decided to stick with the neutral background of mainly consisting of light greys and whites because they are less distracting and overwhelming for the user especially if they have never used the interface before. 

Home Page

I decided to alter the original colours I implemented in the previous design process as I wanted to follow patterns found within existing applications. The Android UI website provided me with colour samples, within the website it recommends to keep to using one solid colour but in varied shades (light and dark). From the previous research undertaken I decided to use blue for the main application colour scheme. This is a result of the previous research undertaken on colour blindness where blue was the rarest form found within individuals.  

Sources
Developer.android.com. n.d. Color | Android Developers. [online] Available at: https://developer.android.com/design/style/color.html [Accessed: 31 Jan 2014].

Drawing Canvas

In order to create a canvas I used a YouTube tutorial as a guideline, the video explains how to create a canvas and draw elements. I found the code and process straightforward although a problem encountered was the lack of information the video provided. The tutorial only covers how to create it and produce a line on the canvas but this is not the purpose of the project. I need to produce a canvas that allows the users to select various colours and create their own images. 

Below is the canvas produced from the guidelines of the video as you can see the code has specified what the canvas should display. In order to make this section of the project multimodal I will need to alter the code already implemented to allow the user to draw. 

Sources
http://www.youtube.com/watch?v=mAUD8h6B_7g

Familiar Icons

Within the design process colour and placement of icons are not the only important aspect of the design process. The previous research highlighted the importance of using the same type of icon design as it is familiar to users therefore keeping to a user friendly and appealing interface. Within the Android UI website samples of button images and actions are provided for users, at this point in time I have decided to use the sample images within my project. I felt that it reduced the design section in order for a larger focus on the functionality although if there is enough time left I will develop my own icon images based on the sample ones used so far. 

Logo Design and Name

Looking at the previous research I came across various logo designs but the main similarity was that they were all basic. Some logos had a simple image although most seem to use text with a simple looking font (Roboto) then again keeping it lightweight for a mobile application. 

I experimented with various names, the aim was to keep it simple and to the point in order for the potential users to have an idea of what they can do with the app. At the beginning of the development process of the application I used the word "note" as a basis but I knew that it had to be changed. I went through various stages of logo names such as note doodle, capture note and sketch note these all described some of the features of that the application contained which was the main purpose although I did not choose any of these.

Sketch Note Logo
The sketch note logo consists of two font styles to separate both words. The word sketch uses a handwritten form of font (Chalkduster) where it gives the illusion that it has been written with a piece of chalk. I decided to use a simple and block font (Gill Sans MT) for the word note. I decided to separate the fonts to add some variety without the need to add any images or colours.  

Capture Note Logo

I decided to use a simple font (Arial) style for the capture word I then used a handwriting style font (Lucida Handwriting) for the note to give it an essence of making a hand-written note. Ive also kept to just a black colour scheme and a shadow in order for the logo to appear bolder. 

Memo Doodle Logo I decided upon the name was Memo Doodle as the logo, it not only informs us that its purpose is to record memos and reminders but also a canvas section for creating doodles. The logo itself contains to separated fonts just like the previous ones mentioned. I choose to display memo with a regular font (Gill Sans MT) type whereas the word doodle used a thicker font (Gill Sans) style. The reason for this was that I wanted to separate both words without the need to use a number of colour schemes instead changing the font keeps the interface to a minimum of colours. At this moment that black background is optional although the overall look might consist of a different background colour. 

UI Components

Although I have began to design the overall user interface it was essential to research UI components found on applications. Following a guideline will help me develop and include both essential and effective forms of structure, design and functionality. 

Layout

Linear layout: Align elements either horizontally or vertically within the screen. My project I will be most likely using a vertical layout with some horizontal input on drop down menus.

Controls

Buttons: The application mainly consists of buttons in order for events and functions to be carried out by the user. Areas that I will implement button will be to direct users to various pages within the application, I will also use it for functions such as the camera in order to be able to take a picture. 

Text Input: The user willbe able to insert their own text and notes in sections such as the notepad, where information can be stored. 

Menu

Menus will be used to display various pages within the applications along with functions and tasks. Using sub menus and drop downs will allow further information and functions to be available according to the section that has been selected. 

Settings

Basic settings: These are needed in order for users to edit or remove unwanted information, it is a form of customising the application to their own preferences. Within my prototype it is doubtful that users will have tis option as the project is only a prototype therefore my focus is on the multi-modal sections. 

Notifications

Notifications: These are useful to inform, remind or update the user on an event that has occurred whilst they have not been using the application. It is an effective form of displaying new information without the user having to look manually to see if things have changed. The notifications will not be incorporated within my project as I will be focusing on areas that do no require the need for them. 

Feedback

Feedback is essential when certain tasks have been requested; notifying a user when a shared file has been sent successfully or been declined. Using descriptive labels will inform the user quicker allowing them to continue with another task. These will be incorporated within functions of my project in order to inform the user on what is or has occurred.

The majority of these pointers will be incorporated into my project depending on how far I reached within the development and design stage. It was important to acknowledge and make myself aware of the user interface components that are found on all types of applications in order to follow the same structure. 

Flash Builder

Due to time constraints a quicker method was needed to develop this application to meet the deadline. I was introduced to the program Flash Builder by Adobe, the program offers an easier method of developing a user interface design. 

Early Designs

Source
As you can see there are several errors within the code that need debugging but at this stage I am experimenting and learning how to use the program.

Design

My main concern is to develop functionality before I focus on the design as you can see I have used basic buttons and drop down sections were I would like operations to be displayed. I used a solid green, white and black as the colour scheme similar to the one found on EverNote, the colours are not official at this time as the process I am undertaking are forms of experimentation from the research gathered so far. At this point I have given the project a basic name of "Note" although this will be changed within the next few weeks. 

Output Results

The code I implemented to test the home button meant to result in text displaying "hello world". This was a successful attempt as during the test run of the application the function did display "hello world" within the screen. 

Within the test run I also test the drop down menu displaying the other pages within the application. Although the function displays the information the button needs to be enlarged in order to be able to view the text clearly as it has been cut midway. 

Design Mockups

Before begging to code the application I decided that it would be best to design some example  mockups of what I would like the interface to include. 

Below is the homepage, I decided to keep it plain and simple as the multimodal sections will contain all of the information and functions that will fill the screen. 

The image below is still the homepage with a hover menu allocating the various functionalities of the application. This hover menu keeps the overall appearance tidy and clatter free. An issue with this design is that there is no form of icon that allows the user to identify the hover menu, an arrow pointing downwards will identify the further features. 

The image below displays the camera function, I implemented a grid to represent the area that will be used to capture images. I also implemented a triangle at the top of the screen in order for the users to identify the hover menu.

Part of the multimodal section includes the use of a notepad to record notes and memos. Below is a small structure of the notepad. Within it I have incorporated a  hover menu with sub menu categories, an example of it is the "+" sign that signifies a new document.