Applessons

Okay so thus far, I have researched many areas in order to create my app and I have done just that.  I have created an application, so what’s next?  Academically as Masters Students, we have to produce an exhibition of our work, you can find out more about that process here.

The next stage for my app professionally is to promote and distribute my application.  The distribution process is currently on hold due to a recent hacking of Apple’s development centre but I have been able to work on the promotion.

It is my intention to build a brand of educational applications under the name ‘applessons’.  The Vikings app will hopefully be the first of many educational apps that I will release.  The ‘applessons’ name is an idea I had whilst brainstorming names that either related to the term app (which is a shortening of the word application) or educational terms, as the overriding purpose of my application will be to educate people.  I feel that by branding my range of applications with this name, it will hopefully be obvious to people what applessons is and does.  A joint branding for all my apps will hopefully be beneficial in the future, as I hope that users of one app may decide to choose further apps based upon a hopefully engaging, informative experience from other apps within the range.

I have designed a logo for ‘applessons’ which you can see below:

applessons-logo

I have also built a website to promote my app.  In his article “20 WAYS TO PROMOTE YOUR APP FOR FREE” Bobby Gill say’s “Create a web site for your app!” Jonathan Saragossi also believes this is a good idea “Again, another major element that I’ve seen many developers overlook. Build a home for your app, a place where you can freely describe why it’s so great without the limitations of the app market description page.”  To see the website that I have created, click here.

My website also features links to various aspects of social media, which I intend to use as promotional tools in order to spread the word and build my brand.  Gill (2013) mentions a number of social media brands in his article, for example “Facebook – It goes without saying: create a Facebook page!”  Social media will be an important tool in the branding and publication of my website.

On my website I will also be promoting a bespoke design service for others who may be looking for an app designer to produce apps for all types of new media, see here.

Gill, B. (2013) Ways to Promote Your App For Free! [online] Available at: http://www.ideatoappster.com/20-ways-to-promote-your-app-for-free/, [accessed 6th July 2013]

Saragossi, J. (2013) 9 Insider Tips for Promoting Your App [online] Available at: http://thenextweb.com/entrepreneur/2013/07/20/9-insider-tips-for-promoting-your-app/, [accessed 6th July 2013]

Wireframing and Prototyping

I have started creating wireframes for my application, a wireframe is a basic diagram showing how the individual elements of the interface are going to be organised, see examples below:

Wireframes_examples

Wireframing is a hugely important part of the design process, the importance of wireframing in digital design is stressed in the Smashing Magazine article “35 Excellent Wireframing Resources” by Cameron Chapman

Wireframing is one of the most valuable parts of any web design project. It can save a designer tons of time by hashing out the details of a site’s architecture, functionality, and content prior to actually starting a visual design. ” Chapman (2009)

In this case the article talks about web design but due to its close relationship in practice, App design values wireframing in the same way, Jake Rocheleau from Speckyboy design magazine says:

“The best way to start off a mobile application is through wireframing. This is a design process where you lay out each of the app’s views in detail. This could be just a rough sketch, but many designers will spend time going that extra step.”

As I have never designed for the iPad before I thought it would be useful to look at the iOS Human Interface Guidelines to inform my wireframing decisions, this was the right step according to Apple Inc as they stress the importance device specific design:

“People appreciate iOS apps that feel as though they were designed expressly for the device. For example, when an app fits well on the device screen and responds to the gestures that people know, it provides much of the experience people are looking for. “

I would like my application to be aesthetically appropriate and effective according to the iOS guidelines, this will help my application to be approved for distribution on the App Store and hopefully it will make my application more desirable and useable.  The terms aesthetically appropriate and effective in this case relate visual and functional values as described by Apple Inc:

“Aesthetic integrity is not a measure of how beautiful an application is. It’s a measure of how well the appearance of the app integrates with its function.”

The wireframe I am creating needs to be implemented throughout my application, which is why careful consideration needs to be given at this stage, it needs to be consistent within itself and consistent  to the conventions of application design to avoid causing user confusion and frustration, Apple Inc say:

“Consistency in the interface allows people to transfer their knowledge and skills from one application to another. A consistent application is not a slavish copy of other applications. Rather, it is an application that takes advantage of the standards and paradigms people are comfortable with.”

The wireframe below is the initial one I have designed for my application, it only features the consistent elements of the application that will be featured throughout the entire application.

wireframe_01_display

I have placed the content which is the most important part of the application at the top of the screen, this fits with my common app interface design practice, Apple Inc also recommended this layout:

Put the most frequently used (usually higher level) information near the top

The navigation at the bottom of the screen thus when people are using the navigation content should not be obstructed by the users hands or arms, again this is an approach I favour and it is backed up by Apples recommendations:

 “For example, in a game, the most important action can take place in the top half of the screen. This leaves the bottom half of the screen for supplementary information and for controls users can tap without obscuring their view.

As you can see I have designed this to fit the default orientation of the iPad, but the iPad is a device that when turned can adapt its interface to take advantage of the different screen layout.  I initially planned to create my application to run in just the default view as I thought the target audience may struggle with any changes in layout due to change of orientation.  Apple Inc favour apps that adapt to orientation change and actively encourage designers to Handle Orientation Changes” they say:

People often expect to use their iOS-based devices in any orientation. You need to determine how to respond to this expectation, within the context of your app and the task it enables.

Apple Inc produce a number of different interactive devices but they stress the expectation of iPad users to be able to use apps in different orientations.

 iPad users, in particular, expect to use your app in whichever orientation they’re currently holding their device.”

They then make this point again further into their guidelines:

On iPad, strive to satisfy users’ expectations by being able to run in all orientations.”

I have also read comments in forums where people have had their applications turned down due to lack of orientation adaptability, so this left me feeling as though I may have to design for different orientations to avoid future problems.  This would mean some changes to my initial wireframe.

Apple Inc advises that:

In all orientations, maintain focus on the primary content. This is your highest priority. People use your application to view and interact with the content they care about. Altering the focus on that content in different orientations can make people feel that they’ve lost control over the application.

As I noted earlier this implies that the content should be at the top of the screen and the secondary content, in this case my navigation should be at the bottom whilst keeping consistency but due to the orientation change this would leave one of two scenarios see below:

Wireframe-scenario1

In scenario 1 the content would have to reduce in size making it harder to view and there is too much negative (unused) space, this could be all to one side or distributed as borders, I felt this would inappropriate.

Wireframe-scenario2

In scenario 2, I looked at another option which meant the content would increase in size but it would still be harder to view as the user would then have to scroll up and down to see the content, this again was something that I hoped to avoid to provide a better user experience.

I had to come up with a solution that was not going to affect the user experience in a negative way.  Apple Inc offers an idea of how this may be possible:

Consider changing how you display auxiliary information or functionality. Although you should make sure that the most important content is always in focus, you can respond to rotation by changing how you provide secondary content.”

Based upon this the solution I came up with for my application required changing the position of my navigation due to orientation change. See below:

wireframe_02_display

wireframe_02_display_landscape

This meant going against my preferred choice of navigation below content but in this case it was the least of the evils, the reason I have aligned the navigation to the left is because this is a long standing digital design convention adapted from web design, you can see this convention in the examples below:

Examples-of-Left-Aligned-App-Navigation

My solution also means the content will constantly stay the same size 768px X 768px without the need for scrolling, I have done this by using the 4:3 aspect ratio of the iPad, using 3/4 of the display which fits into either orientation for content and 1/4 for the navigation.

I created a prototype which you can see in the video below to see how this works:

As you can see no matter what the orientation of the device is, it displays one of the two views which also fits with Apple Inc’s recommendations As much as possible, your application should encourage people to interact with iPad from any side by providing a great experience in all orientations

Having to change my design idea to fit the needs of Apple’s best practices was something I expected and although I am still worried about the orientation change affecting a child’s user experience, there can be no interaction in the first place if my app is not approved for distribution.  I have tried to develop a suitable alternative that provides users with a choice so they can choose the orientation that suits them best.

My next task will be to design the shapes and sizes of the buttons for my application, as you can see by looking at the wireframes the rectangular buttons do not work well in the landscape orientation.

http://speckyboy.com/2012/02/22/tips-for-wireframing-a-usable-mobile-app-interface/

https://developer.apple.com/library/ios/#DOCUMENTATION/UserExperience/Conceptual/MobileHIG/Introduction/Introduction.html

Developing Apps in Adobe Dreamweaver CS5.5

For those of you who have been following my blog, you may remember that I recently purchased the Adobe CS5.5 software to take advantage of its new mobile production features, up until recently developing apps for iOS (Apple’s mobile operating system) had to be done using their own software X-code, which is only available on a Mac (apple computer) and I do not own a Mac nor can I currently afford one, so this was going to be a problem.  The recent release of Adobe CS5.5 software provided me with an alternative and not only an alternative but a platform that would make it easier to create apps using coding language that I already know and have experience with, also the apps could be easily repackaged for multiple mobile platforms.  The two pieces of software that can be used for this are Adobe Dreamweaver CS5.5, usually associated with website design and Adobe Flash CS5.5 which is associated with creating rich interactive experiences.  I have just completed a Lynda.com tutorial course entitled Building Android and iOS Apps with Dreamweaver CS5.5, see my certificate below:


Phillip Shakesby

 

 

 

 

 

 

 

Early on within this course I was dismayed to find out that Adobe’s claims of what the software can do may not be all they are cracked up to be; in chapter 4 Establishing an iOS Workspace, the videos’ narrator Joseph Lowery says the words:

“To develop for iOS devices, the iPhone, iPad, or iPod touch, you’ll need a Mac”

 Lowery, J. http://www.lynda.com/Dreamweaver-CS5-5-tutorials/Building-Android-and-iOS-Apps-with/83788-2.html

At this point I was very confused, I have just spent a large amount of money on this new amazing software that can do all of this stuff without the need of a Mac, haven’t I?  Lowery goes on in his instructions for setting up Dreamweaver to develop for iOS to explain that you need to install the iOS SDK (software development kit) and the iOS development framework called Xcode and this is where the problem lies; the iOS SDK and Xcode are only available for Macs, so if you are working on a PC like me you cannot do any of this.

How could I have missed this when I was looking at the CS5.5 software before I bought it?  I returned to the adobe website and looked at what it said about the software, see the quotes from adobes website below:

“Extend your reach and create rich applications for multiple platforms, including Android, Blackberry, iOS, and Adobe AIR®.”

http://www.adobe.com/products/creativesuite/web.html

“Build and package native apps for Android™ and iOS with new PhoneGap functionality. Convert your existing HTML to a mobile phone application within Dreamweaver using the open source PhoneGapframework.“

“Benefit from new support for mobile application development and testing, enabling the use of a common codebase to build apps for Android™, BlackBerry® Tablet OS, and iOS while sharing code from web applications.”

http://www.adobe.com/products/creativesuite/web/features.html#categorylens_6e75_featureset_ca10

At no point in this propaganda does Adobe acknowledge that you cannot actually build and package your application in Dreamweaver CS5.5 for iOS unless you are working with the Mac edition of the software on a Mac, although I must acknowledge that what they say is accurate, the problem comes in what they don’t say, their website is advertising one software package available on two different platforms PC and Mac, and if you are using the Mac version of the software on a Mac the software can do all the things it claims.  I am very annoyed that I have been misled by this and until I learn about the Flash CS5.5 software’s capabilities I am not definitely left without a Mac build and packaging option, but I do fear that when I look further into Flash CS5.5 capabilities the same problem will arise.

The software is not entirely useless, in fact I am very impressed with what it actually can do, Dreamweaver CS5.5 makes it easy to create both web based apps(content is downloaded from the internet each time the app is used) and native apps (content is stored on the users mobile device). Development is done using HTML5, CSS, JQERY and Javascript using PhoneGap, this is an HTML5 app platform that allows you to author native applications with web technologies and get access to APIs and app stores (see here http://phonegap.com/)

You can basically develop one application and package it for different devices from the same files, which makes it easier to create applications for multiple platforms.

I am impressed with what Dreamweaver can do in terms of creating mobile applications and in the future I believe I will be using this method of development for future mobile apps but for this project Dreamweaver will not be appropriate for allowing me to create the types of interaction I hope to feature in my application.

Where does this leave me?  I know I won’t be using Dreamweaver to create my app so I am a step further forward than I was before, I will now be looking at Adobe Flash CS5.5 to create my application and this is the route that I expected  to take.  I am worried about the journey ahead as I am fairly certain that I will encounter the same issue with iOS development that I found with Dreamweaver, this will not stop my project but it may cause me some fairly significant problems; even without a Mac I will be able to develop my application but I am not sure how I could package the application from an Adobe CS5.5 file without access to Adobe Flash CS5.5 on a Mac?  As a developer I also believe that it is good practice to test regularly through development and although Adobe has some great testing features, accurate testing may become an issue at a later date.

Ultimately I have realised that at some point I will need to purchase a Mac and the CS5.5 software for the Mac, this is going to be a huge outlay.

Resources:

http://www.lynda.com/Dreamweaver-CS5-5-tutorials/Building-Android-and-iOS-Apps-with/83788-2.html

http://www.adobe.com/products/creativesuite/web.html

http://www.adobe.com/products/creativesuite/web/features.html#categorylens_6e75_featureset_ca10

http://phonegap.com/

Html 5 in Practice.

Recently I completed a HTML5 course (see the previous HTML5 blog), in the last week I have had the opportunity to put some of the knowledge that I acquired through that course into practice.  I have built a website for a member of my family (see here) using the new HTML5 standards, this has been a useful experience as it has helped me to apply and practice these new skills, and as a result I believe that I am better prepared to use HTML5 in my MA project, where appropriate.

HTML5

I recently attended a HTML5 master class at Hull School of Art & Design delivered by James Field, this was very interesting and it left me realising that to keep up to date or even stay ahead of the game in my professional field, a good knowledge of HTML5 would not only be useful but essential.  To enhance the knowledge I gained from the HSAD master class, I started and have just completed the course HTML5 First Look by James Williamson on Lynda.com, see certificate below:


Phillip Shakesby

 

 

 

 

 

 

 

I believe that having a working understanding of HTML5 will be very useful to my project, as it offers new possibilities for my supporting website and possibly an option for my application development, although I do not think this will be my direction with application development I will not rule it out until I have done further research.

What is HTML5 and why am I looking at it as part of my MA?  Basically HTML or HyperText Markup Language is the main code used in web pages and HTML5 is the next generation of HTML.

HTML 5 is the next generation or an evolvement of the current html code.  As the internet has grown and developed, third party plug-ins such as Adobe Flash Player and others have been created and used to meet the requirements of users who were demanding an experience that HTML alone could not deliver.  XHTML 2.0 was born in an attempt to meet the changing user needs but it broke the longstanding practice of being backwards compatible and some web professionals were unhappy with this new direction, eventually the W3C (World Wide Web Consortium) who are an international community, whose mission is to lead the World Wide Web to its full potential by developing protocols and guidelines that ensure the long-term growth of the Web and the WHATWG (Web Hypertext Application Technology Working Group), an unofficial collaboration of Web browser manufacturers and interested parties who are concerned in evolving the Web by focussing the development of HTML and APIs needed for Web applications, combined their efforts in a single direction under the name HTML5.

Together they established some rules for HTML5:

  • New features should be based on HTML, CSS, DOM, and JavaScript
  • Reduce the need for external plug-ins (like Flash)
  • Better error handling
  • More mark-up to replace scripting
  • HTML5 should be device independent
  • The development process should be visible to the public

They also looked at developing some interesting new features including:

  • The canvas element for drawing
  • The video and audio elements for media playback
  • Better support for local offline storage
  • New content specific elements, like article, footer, header, nav, section etc.
  • New form controls, like calendar, date, time, email, url, search etc.

HTML5 is not yet an official standard, and no browsers currently have complete support for HTML5 but the rate at which major browsers, such as:

  • Internet Explorer
  • Firefox
  • Chrome
  • Safari
  • Opera

are adding support for HTML5 features is incredibly impressive.  HTML5 through its new structure and features should help me and my fellow designers and developers to build richer user experiences for websites and mobile applications, there will also be less worry about people using older browsers, as it is designed to retain backwards compatibility to previous versions of HTML.

http://www.w3schools.com/html5/html5_intro.asp

http://www.w3.org/Consortium/mission.html

http://www.lynda.com/HTML-5-tutorials/html5-first-look/67161-2.html