Evaluation OUGD301 Design Practice 3

This module has been extremely challenging both time management wise and also handling unforeseen problems.  I had set myself the target of focusing on Dissertation every Sunday and over reading week, which I have achieved, however I believe this has been to the detriment of the Design Practice on this module.

At the stage where I should have had my eye on what four briefs I was going to focus on, I was desperately trying to get 500 leaflets screen printed for The Loft Space.  I have already discussed the  ramifications of this on this post http://l-whitaker1013-dp.blogspot.co.uk/2012/10/the-loft-space-client-disappointment.html so I wont dwell on this here.

What I learnt from experience is:

• Don't propose ambitious ideas which are not fully tested first . The Loft Space did not have a print budget so I thought a cheap solution to this was to screen print the leaflets. Although I had been reasonably successful at Screen printing before I had not tried anything like this before.

• Don't offer to do something just to please your client.  I should have just offered to design the leaflets and let Janet source her own printing.  Her budget is not my problem.

• Screen printing is best used for limited edition/special effects rather than high volume runs.

To get over the disappointment I felt after this experience I threw myself into the Circus and Typo briefs which was a positive way forward.  I did not however revisit my beautiful Excel Spreadsheet Project plan and revise it...EVER again throughout the module.  From a project management point of view this was not the best way forward as was to proved when I had five days to Module hand in and I had only just started the fourth brief, brief 2 What make a good App design.

My Time management, something which is normally a strength has been atrocious on this module.  As well as what happened with the Loft Space and the Dissertation, another reason for this was the three main briefs Circus, Typo and The Loft Space were very research and content heavy.  This was deliberate on my part as I love really getting under the skin of a subject before I start concept developing.  Going forward I need to find a better balance with my process so that I have time to make my Design outcomes are as strong as the initial ground work.

On a more positive note I have developed and honed a range of skills including:

• Screen printing
• A simple way to create 'Spot varnish' using foiling and a heat press.
• Type and layout skills including my understanding of Typeface choices, combinations and best practises. For example I have a better grasp of what to do abut widows, hyphenation and hierarchy.
• In design skills - Becoming more efficient and consistent with approach. Paragraph Styles, Booklet design and printing, General grid and layout skills, managing images for print and screen, formatting paragraphs i.e. managing hyphenation, using features such as slug area and attributes such as overprint.
• Illustrator skills - more confident with vectoring and pen tool
• Photoshop skills - Using Filters such as Vanishing Point to create perspective,  experimented with different layer styles and blending options such as colour burn and multiply, drop shadow and bevel and emboss,  Correct resizing of images between RGB and CMYK
• Continuing to develop  Dreamweaver and Web design skills
• To check and re-check work after each change.  Spell check, proof reads, check consistent use of Typeface - all so vital when trying to achieve a high standard of Type and Layout.

My crafting skills still leave something to be desired but that was due to not using College facilities such as Vernon Street due to Time constraints.

One area which I am aware I did not fully exploit on each brief was I did not push the range or consider methods of distribution as much as I should have done.  I was deliberately focused on developing certain aspects of each brief i.e. Type and Layout in Typo and Circus rather than expanding the potential of what each could bring.

Going forward to FMP I plan to be more outcome focused and have less content heavy briefs.  

Although I did not use Digital as much as planned, I still have a real interest exploring how I can incorporate Design for Screen into my practice leading up to FMP.

OUGD301 Presentation Boards

Brief One The Loft Space

Open publication - Free publishing

Brief Two What makes a good App

Open publication - Free publishing - More app design

Brief Three Typo 12

Open publication - Free publishing

Brief Four ISTD Circus

Open publication - Free publishing

OUGD301 Module Submission

OUGD301 Design Research

The Circus app development

As time is short I am going to use the content from the Circus brief to propose an app design idea.  Potential to submit with ISTD brief.  I am also going to focus designing for iOS and a mobile platform rather than a ipad screen.  Ideally I would ensure the design is suitable for both size screens.  I do think in a museum people will be more likely to use the App from a Mobile phone.

My app idea in one sentence:

Circus Experience:  Getting the most out of your Circus Experience.

Will include Introduction, maps, booking, details of each experience,  Exhibit details ie history of costumes.  Interactive features whilst at the Museum.  Interactive feature share your Circus Experience.

From my research I should produce to communicate my idea and content to a developer:

1. a flow map
2. A series of wireframes
3. A series of storyboards

Mock ups in iPhone 5:

Typo Product shots

More product shots from same Photo shoot for Typo:

Open publication - Free publishing - More products

The Loft Space Digital leaflets

The Loft Space has a Facebook Community page and Green Fusions also has a Twitter account so this makes sharing the Calendars and leaflets digitally possible.  Issuu documents are a great way to share information on Facebook, twitter, Pintest etc.  With this in mind I have modified and published all The Loft Space leaflets on Issuu as follows:


Spring

Open publication - Free publishing - More mockup

Summer

Open publication - Free publishing - More mockup

Autumn

Open publication - Free publishing - More mockup

Winter

Open publication - Free publishing - More mockup

Christmas

Open publication - Free publishing - More crafts

General Loft Space promotion

Open publication - Free publishing - More crafts

The Loft Space photos

Some product shots for The Loft Space:

Open publication - Free publishing - More branding

Circus product photos

I arranged to get my photos shot with a Photographer friend.  Unfortunately as his studio lights are so bright I still had to tweak the mid tone levels and brightness in Photoshop however they are much better than anything I could do alone.

Open publication - Free publishing - More circus

Digital research/ Web and Apps Wireframes

How to design Content maps for websites

How to design better Apps

1. Wireframe Your App
When we talk about an app’s design, we’re talking about two main components. These two components are user experience (UX) design and user interface (UI) design.
Experience design is all about the goals of the app, such as which features to include, and how the user will accomplish those goals. The user interface design is what that experience looks like visually. That includes the colors, textures, and fonts used to craft the visual style of the app.

 2. Use Finger-Sized Tap Targets This is the biggest thing you can do to improve the usability of your app: Increase the tappable area for every button. You’re designing for fingers and thumbs, not mouse cursors (which have a higher pointing accuracy). Apple recommends a minimum of 44x44px for any element the user is expected to interact with.
Now this doesn’t mean that the button needs to visually look that big. The tappable area can extend beyond the visual size of the button. This will help users avoid the frustration of trying multiple times to tap an element. Just be careful if you have several buttons close to each other. Make sure that your extra tappable area doesn’t overlap with other buttons.

3. Have Only One Primary Goal Per Screen When you’re designing a screen in your app, focus on the primary goal you want the user to accomplish. For example, in the email list screen in iPhone’s Mail app, the user’s primary goal is to read emails. Though there’s a secondary action for composing an email, the button is off in the corner and not emphasized.

4. Avoid Default Button Styles The default style for UIButtons on the iPhone is one of my biggest design pet peeves. Almost all of the default elements included with iOS look good. Then there is the default button.

5. Add Extra Views When There’s a Lot of Information Moving into a new view (either through a push or modal transition) is very easy for the user. So if you find yourself trying to add too much information to a single view, then just add another view.

The Benefits of wire framing your design

Free templates 

Tips for wireframing

Research assesses that Companies need mobile enabled websites

The Drum

App design touch screens

To the untrained eye, a finger looks podgy and inaccurate in comparison to a mouse pointer. How, you might wonder, can this flabby, clumsy little digit replace the pixel-perfect accuracy of a mouse? Well, though human fingers may seem like bloated embarrassments, they are in fact more versatile. They can pinch, rotate, zoom, stroke, dab, slide, flick, and many other gestures are within the finger’s repertoire. But, best of all, the finger allows something called Direct Manipulation.

What is Direct Manipulation?
When you move a computer mouse, this motion is conveyed along the wire connecting the mouse to the computer, then into the computer screen, then to a mouse pointer which moves in relation to the motion of your hand. The action on the screen and the action of your mouse are connected, but of the input device (the mouse) causes the motion of the pointer. Contrast this with the way a user’s fingers manipulates targets on a touchscreen mobile device: On a touchscreen you literally and directly ‘move’ the objects you are interacting with. Touchscreen manipulations, and the way we interact with actual 3D objects in real life, are almost exactly the same.
The manner, direction, distance, and speed of movements are all directly determined by your fingers. Fingers specify the direction of travel, how far the object moves, and how fast it moves. This is the first time in the history of computing that mass market devices have allowed direct, and literal, manipulation. The touchscreen is totally unlike a mouse. With mouse, you must fish about wildly on the screen, first to locate the pointer position, and then to adjust your movements relative to this starting point. The touchscreen, however, allows you to instantly ‘see’where you want to touch and home in straight on this point. There is no need for orientation. This is the magic of touchscreens.
The other great thing about touchscreens is that you have lots of fingers available to you at any one time. Again, contrast this with the traditional mouse or stylus input system. Mobile devices have been popularised by the emergence of the finger as a new input instrument. It has often been said that the best camera is the one you have with you, the same is true of input devices. The best input device is the one you have with you. For most people on the move, this is the human digit. You don’t have to rifle through your dusty backpack for a stylus, or peck about on an inefficient travel keyboard. The touchscreen has liberated us from decades of cumbersome computer input paraphernalia.

Understanding finger ergonomics
Fingers can be remarkably efficient at inputting complex information. Consider the efficiency of sign language. See how vivid and meaningful hand gestures can be. Many touch screens respond to over eleven finger-touches simultaneously; this gives you enormous scope for different interaction methods in your apps.

Trends in mobile User Interface (UI) design and typography

The UI world is heading towards minimalism and simplicity, especially in mobile app design. The overburdened designs of the past have given way to a fresh new era of pure-purpose.

How offering fewer choices frees the user: Why less is more.

Good design is more about what you leave out than what you put in. Make sure you have refined your idea to its purest point. Take a leaf out of leading designer Jonathan Ive’s book. He has said, “Most of our competitors are interested in doing something different, or they want to appear new - I think those are completely the wrong goals. A product has to be genuinely better. This requires real discipline, and that’s what drives us - a sincere, genuine appetite to do something that is better. Committees just don’t work, and it’s not about price, schedule or a bizarre marketing goal to appear different - they are corporate goals with scant regard for people who use the product.” This is key to great design. The more choices you offer a user, the less they tend to enjoy your product. This is because every choice left to the user is an unfinished design decision that you did not have the confidence or authority to make for them. Computers are fast becoming appliances, and this is no bad thing. Mobile devices with touchscreens are set to reach people in a way traditional computers never could - these are the people need you to design for, make good choices for them. Be brave and be bold.



Innovative App design

Many first-time designers fixate on an idea before considering the input system that controls the software. Remember: Input is everything.

Think first: How can I use this hardware in a unique and creative way? The purpose of your app stems from the input method used to control it.

Other input systems to be aware of on major smartphones include the GPS (Global Positioning System) which allows you to discover where a user is geographically – this is especially useful for mapping apps and other location-aware services.

Finally, there is a newer sensor, called a digital compass, which can not only geolocate a user, but also let your app know what direction the user is facing in. This can help with navigational apps. You can also dream up uses that nobody else has thought up yet. All these control systems supply raw data, it’s up to you what you do with those data feeds.

Working with the accelerometer 
The accelerometer is an amazing device that can detect the direction and force of motion applied to a smartphone or other mobile device. It can be used to signal a change in screen orientation by a quick flick of the wrist, or a variety of other manual gestures. The accelerometer feeds live data to the smartphone cpu, and you can interpret this data however you like. The possibilities are endless and exciting.

A free physics engine called Chipmunk Physics allows you to create movements in direct response to the force and direction of motion, responding as if it physically exists.. This is an amazing tool for any app designer and you can find out more about it here: http://chipmunk-physics.net/

This free app iHandy carpenter takes advantage of the accelerometer.

App design online course

To get me started with understanding more about App design I have been doing an online course with Excel Business.  Basically the course has a Course diagnostic to guide you to the areas you wish to focus on.  I have put more focus on the basics not the developing/coding at this stage.  I can go back and change this as I progress through the course.

Theses are some infographics which came with the course.

The first explains the structure of the course and which modules cover which areas

1.  Introduction

• Need to reserve an app name though the app-submission process similar to domain-name squatting early on.
• Platform choice iOS v Android - consider demographic of target audience
• Consideration to pricing -free(revenue from advertising), too low (perceived as low quality),too high.  Offer lite versions to give a taster 
• Websites which offer details on tracking success of apps -appannie.com and flurry.com
• Most users hear about your app through word-of-mouth or press coverage, about which you’ll learn more in Unit 18.
• App submission - iOS to Apple/ Android to Google Play

2.  Basic Platform considerations

iOS v Android

• Will generally make more money on iOS.  There are over 315 million iOS devices out there (iPhone, iPod Touch and iPad sales combined), and Apple has the largest credit-card number reservoir in the world. Although Google does not provide precise sales data, The Loop estimates that in 2011 Apple enjoyed a 12.4 percent share of the mobile device market while Google’s Android had 5.7 percent. If you had to pick just one platform, iOS will give you access to the largest number of customers, and more importantly the largest number of paying customers. For every ten apps that developers build, roughly seven are for iOS,” according to app-trackers, Flurry.

• iPhone users are prepared to pay for apps, while Android users, largely, are not. Since Apple started selling apps, iOS developers had been paid a total of $4 billion – Google refuse to release comparable data. It is estimated that a developer who got $1 on the iTunes App Store would get $0.24 from Google Play.

• Why tablets are not just big mobile phones. Tablets, in particular the iPad, are an immensely popular new platform with consumers. The marketplace for these devices is exploding. However, it’s important to recognise that there is a big difference between designing apps for tablet-sized screens and mobile phones. Just scaling your interface will not cut it. The ergonomics of a tablet are radically different from those of a mobile phone.

• Using 360 degrees of rotation/ Reach patterns

As you reach across the screen the hand is covering the screen so the hand would obscure any graphical transformations.

Best to have main controllers on easy reach of thumbs like above rather than higher up the screen as below

Always consider designing screen for both landscape and portrait- tablets are  rotational devices.

Dont necessarily need to hard code the rotational feature as the software SDK automatically adds this functionality.

Check Flipboard for an elegant hard coded interpretation for rotational interfaces

Reach pattern on a mobile phone presents less of an issue as can generally place user interfaces anywhere on the screen.

The Killer App idea

The peculiar paradox of app design is this: Simple is hard.

If your app cannot be explained in one sentence, in clear, plain English, then you already have a marketing nightmare on your hands.
A few successful apps and the one sentence description that could be used for each of them: Instagram: Make your photos look old-fashioned and attractive.
Angry Birds: Fire flightless birds through the air to kill evil pigs.
Pages: Write and edit documents.

• The app stores are tough places to sell apps, discard any idea that you can’t figure out how to sell
• Use the power of YouTube to promote your app once it’s on sale
• Make a video that is compelling enough that people will share it even if they don’t care about your app

There are guidelines and conditions for designing apps (so avoid being too controversial)

https://developer.apple.com/appstore/guidelines.html

Planning an App

Careful projet management is important when developing an app.

It is often most cost effective to design all the graphics of the App before getting a developer on baord.  there is no harm scheduling a developers time as Mobile OS developers are in high demand. 
You will also need to check what format the programmer requires graphics in. Usually you will deliver graphic designs as single layers exported to Jpeg or PNG formats. PNGs can contain transparent or ‘alpha’ pixels, so they are commonly used for graphical assets that move. 

Storyboard the design, plan how the user will interact with the design and annotate appropriately.

A cheap project management tool is Google Apps

Partnering with a programmer

A basic overview of the two major languages used by the leading mobile platforms. 

Xcode 
This the programming suite for Apple’s iOS and includes provision for deploying projects on the iPhone, iPod Touch and the iPad. This tool collection is mature and extensively documented – both by Apple and by the huge community of developers that use these tools. Xcode allows programmers to code in a language called Objective C, which is quick and powerful, but relatively unforgiving to newcomers. Seasoned programmers can also code in a variety of other languages and use Xcode to wrap these. The Xcode software is free to download and it is free to run code on the hardware simulator. However, to distribute apps to actual devices, or to submit an app to the store, you must sign up as an Apple developer for the price of $99 per year

Android SDK 
This is a software development kit (SDK) which enables developers to create applications for the Android platform. It includes tools for programmers such as the required libraries, a debugger, a handset emulator, sample code and even some tutorials. Applications are written using the Java programming language. Android applications exist in .apk format and are stored in / data/app folder on the Android OS (the folder is accessible only to root users for security reasons).

These are examples of actual storyboards sent to a developer.

Introduction to Xcode 

There is a whole introduction to coding which at this stage I have not time to go through.  As with web design i think it would be useful to at least grasp an understanding so I will return to this later.  I have embedded the videos as I only have access to this for a limited time.

TYPO poster in College

I had a rather more successful result using 'Auto' and a tripod than I did the other day in the Photography Studios using the manual setting.

Circus Visitors Guide development

15/11/12

Open publication - Free publishing

16/11/12

Open publication - Free publishing

Open publication - Free publishing