App Design Version 1

App Design.jpg

I think the layout is successful because it gives the whole app a clean structure and look that I like. In my view the design would be improved if I include images and experiment with different colour palette. In regards to the font I have chosen I think it really fits the look and style that I wanted to achieve.

Advertisements

App Wire Framing

scan_kc60213_2017-12-06-14-18-57scan_kc60213_2017-12-06-14-17-53scan_kc60213_2017-12-06-14-19-32

I created a mind-map to let me think of what functions are going to be in my app and how to divide each section and page. My aim was to include 6-8 sections in my app to cover the most important parts of a social app. After I had come up with a fully fleshed out mind map I started to create a wire frame that would allow me to see how the app would function and a look in the terms of user accessibility. This help me because it allowed me to plan what sections lead on to each other and where I would need certain buttons to go back. Some of the buttons offer a multiple choice for the user.

My next step was to identify each page layout and whether I will use images or not.  I also focused my attention on researching appropriate fonts and choosing suitable colour harmonies that would correspond with the social theme of my app. Once I got the rough idea I started to expand on the layout design on the wire frame and include more information/ details.  I tried to get feedback from others how successful my app was and although it was very informal I did reflect on it and changed the functionality on some of the pages.

Adobe XD Tests

I used Adobe XD to create this. It was fairly easy to use this program as the tools were simple to understand and there wasn’t many of them. I think the app is good for creating demos for app designs as thats what it is deigned to make. I created a gradient using XD and it was simple enough to do. You selected the colour you wanted and another different one to create the one gradient. I Also used the square tool to create the buttons on the different pages and it was simple enough to smooth the edges as it was only a slider to decide the sharpness or roundness of the corners. The text tool I used gives the basic functions to type and also allowed to pick from a wide amount of Fonts that was available.

Screen Shot 2017-11-01 at 15.26.36(1).png

App Assets

CheckTabthingyTabPickingthingySearching

I create  these assets at home creating firstly Illustrator and after that i created a GIF in Photoshop using the timeline. Which I then saved as a GIF.  For the side Bar I reused some of my App background and halfed it. I used the same colour to help it blend in with the app. I then reused the Text profile boxes and placed peoples names there as a place holder.

The second one is a drop down menu for hobbies and can be reused all over the app due to the button  shapes and colours. When you click an option to show it active I have chosen to use the same green as the front screen.

The Third GIF is something that appears when you go no the search local function on the app. This will show that the app is search your area for people with the app (who you are friends with).

Quick Muse Interaction

Today we where given the task to create app interactions in Muse as were not longer allowed to use Adobe XD. The Creation of the actual pages and linking the pages was simple. We create 3 pages and added Buttons. Then added Hyperlinks to link the pages to each other. This would allow the user to click the button on the home page and be sent to the First page. The same was done with page 1 to page two. Then from Page 2 to the home page. Creating a seamless user interaction. We also used Colour to show how to user moved from 1 page to the next.

Logo Design

There are 5 main things that make a good logo:

  • Simple. (A simple logo design allows for easy recognition and allows the logo to be versatile & memorable. Good logos feature something unique without being overdrawn.) The Underground Logo is a great example of a simple logo as it is as simple as a Red Circle with a Blue box across it. This adds no clutter around the actual text but also makes it easy to read. The red circle and blue bar also are very iconic to the underground cause of the logos simple design.

1200px-Underground.svg.png

 

  • Memorable ( An effective logo design should be memorable and this is achieved by having a simple, yet, appropriate logo.) McDonald’s alongside Apple are two of the most memorable logos because of the simplicity and also the fact that it is easy to put anywhere. The Golden Arches are put everywhere, from tops to billboards to fluorescent signs that stand outside the many fast food places.

1200px-McDonald's_Golden_Arches.svg.png

 

  • Timeless (An effective logo should be timeless – that is, it will endure the ages. Will the logo still be effective in 10, 20, 50 years?) Many Companies change their logos to change with the times or with their image, however, a company that has had the same logo for ages is Coca-Cola. From January 31, 1893, the logo hasn’t changed due to the Coca-Cola logo has all the aspects of a good logo.  The Color is only red and it can be put anywhere. The Font is always seeable and readable from any distance.

2000px-Coca-Cola_logo.svg.png

 

  • Versatile (An effective logo should be able to work across a variety of mediums and applications. The logo should be functional. For this reason, a logo should be designed in vector format, to ensure that it can be scaled to any size. The logo should be able to work both in horizontal and vertical formats. This could be also cheated by making the logo, Black, and White.) Making a logo versatile allows it to be put everywhere. Some people create the logo is black and white.

WWF_25mm_no_tab.png

 

  • Appropriate (It is also important to state that a logo doesn’t need to show what a business sells or offers as a service. ie. Car logos don’t need to show cars, computer logos don’t need to show computers. The Harley Davidson logo isn’t a motorcycle, nor is the Nokia logo a mobile phone. A logo is purely for identification.)

toysrus-logo.png

 

 01-cazz-bad-logo.jpg

I’ve never seen this logo but at first glance, the colours are a way to bright and I’m getting a headache staring at it. It’s also not simple and has a way to many things happening. Also the stroke of the word “CAZZ’S”  is given a blurry look but this is probably the way the font was made that is creating this effect.

App Design

Peach by Peach

Its cutesy name is not all there is the app, the beautiful UI also adds to its charm. Mostly, Peach is all about gifs, emojis and other en vogue elements that strike the fancy of Millennials and Post-Millennials. The light-hearted ‘peach’ color scheme and illustrated icons truly reflects the feeling of fun.

peach-app-beautiful-ui-january-2016-1.jpg

 Movesum

 Movesum is a simple, no-frills step counter app by health and fitness startup Lifesum, whose well-known app of the same name has been gaining users fast. Lovely gradients and good visual weight on how much calories you’ve burnt make up the minimalistic and beautiful UI of Movesum. The blue shades of color next to each other give the app a sleek and business-like feel to it.
movesum-app-beautiful-ui-1.jpg

 Everlist by Everlist

Everlist is an attractive task manager app. And not just in terms of its beautiful UI, but also the smooth and intuitive feel of using the app. The grid style layout that gives you a quick and thorough overview of all your tasks grouped into folders is quite refreshing. Also, the unique square ‘add’ button is a great adaptation of Material Design’s floating action button.

everlist-app-beautiful-ui-2.jpg

 

 Human by Human.co

Human is the all-day activity tracker app for you. It motivates you to get moving by comparing your activity level to others in your city. You then set a more realistic goal for yourself. The app’s beautiful UI also works as a good motivator to keep using it. Its clean design allows it to be easily readable and all the info is easy to get to due to its readable factor.

human-app-beautiful-ui-2.jpg

 

 Blown Away by Black Pants Studio

Blown Away is a fun mobile game to pass the time. Quite a lot of time, for that matter. It has 120 levels spanning four different worlds. The game also sports a beautiful UI with brilliant illustrations and landscape design. The starting screen is easy to understand and it is all alined so it is pleasing to the eye.

blown-away-app-beautiful-ui-1.jpg

 

What makes a bad app:

Information overload

Many people complain that too much is happening on the screen and this is an important thing to realize. MAny people cant concentrate on more than one thing at a time so to have things cover other things is a very bad idea when it comes to designing an app.

Un-Labeled Pictures

Many people complain that an app can be very confusing when left with images that mean nothing to the user and be left trying to figure out what to click or do for minutes. This could lead the user to leave or use another person’s app cause they are labeled their images to show what each one does.

Adding Friction to User Actions

Many people also can complain when something they do takes too long and that can be the difference of 1 second or up to 24 hours. People don’t have time to waste waiting for your app to load up something caused you added a timer to each action they perform. Leaving this out can give the user a clean and easy experience.