Nextr - Presentation of Work Case Study

I'm going to discuss methods of presenting your work through a case study of 'Nextr', a German public transport live guide for iOS created by Marcus Wermuth.

The main purpose of this discussion is twofold; firstly (and primarily) to demonstrate methods of presenting your work via mediums other than the one a product is designed to run. In this instance the product is an iPhone app and yet you can see it working without accessing the actual app. Secondly, this particular product is a good example of how to promote digital work with a consistent footprint across a range of platforms designed to improve the visibility of your work.

We'll start with the latter because it's an easy one to discuss and the example used sets the context nicely for the first point.

Promotion Basics

Below is a list of all the paces I found Nextr on the web. All from a simple Google search:

• Web: http://www.nextr.info/


• Design Fridge: http://www.designfridge.co.uk/inspiration/clean/nextr


• Oberhaeuser.info: http://www.oberhaeuser.info/nextr-iphone-app


• Vimeo: https://vimeo.com/64794635


• Behance: http://www.behance.net/gallery/nextr-app-public-transportation-guidance/7121205


• Facebook: https://www.facebook.com/nextr.info


• Dribble: http://dribbble.com/shots/907743-nextr-app-landing-page


• Twitter: https://twitter.com/nextrinfo

The majority of this presence the creator (or owning company) has created themselves to promote the product. Each of the above presences does a slightly different job and has been listed in the order they appeared from the Google search.

Looking at the order you might be surprised at the bottom four. The big social networks of Facebook and Twitter are very low. So too are Behance and Dribble (similar to Behance). Whilst it is important to engage potential users on social networks as you have access to the largest people database in the world, you can not simply rely on it to market your product for you.

Clearly, the best presence you can have is your own website(s) that promote the product and do little else. This is because with a dedicated website you have the power to provide the websites metadata, content, structure & semantics which are all things the Google search engine and its web crawlers like. This process is known as SEO (Search Engine Optimisation) and this in itself is a subject that has companies setup just for sorting out other companies, brands,  products and services ranking in search engine results!

There is a clear message here. Promote your work/product in as many places as appropriate (you decide which platforms to use based on who it's for and what it is) but don't just rely on social networking or showcase sites; you need take ownership of promotion with a bespoke website. This website can simply be a single page with a concise description, images, videos (is appropriate) and links to the other places it appears (social networks, showcase sites, etc.).

Obviously, if you didn't create the dedicated web presence then the showcase and social network pages would be higher but consider for a moment that your product is called something less distinctive than 'Nextr'. Take my 'Experiment 2'  for example: It's called Breeze.

There are going to be a LOT of web hits for this name. In fact, the domain 'breeze.com' and 'breeze.co.uk' have already been taken (unsurprisingly) and 'breezeapp.com' has actually gone too! Thankfully the domain name doesn't have a detrimental effect on SEO but it would certainly be nice to have something short, relevant and memorable for marketing purposes.

Coming back to my original point, if your product is named after something else then the chances are, if you rely on social network and showcase sites, if searched for on Google, you probably wouldn't make the first page.

There is a great deal more you can do but all this can be done for free (discounting the hosting for the web site/page) and doing these things will give your product good visibility and is your first step up the ladder!

Now onto the fun stuff. An example of how to present your work.

Presentation Study

We're going to use 'Nextr' as an example of how to present your concepts. Head over to Behance and check out the entry for this app.

I've broken this down into sections (to match the structure of the Behance portfolio), analyzed it and numbered them accordingly (see below):

Please note that this analysis is purely my opinion and is no way meant to reflect negatively on this portfolio. I actually think this is a wonderfully designed product and wish we had something similar here in the UK as London's public transport can be a nightmare to navigate for the uninitiated.

I have categorised the sections based on importance, type of information being presented and whether or not this can be produced without producing the actual product:

1) Essential information - what the app is and what is does in 4 words (its tagline) supported by a nice visual. This is perfect. The less words required in your tagline the better. If you can not describe your product in less than sentence then you need to work on being more concise or your idea is probably too complicated for an app (in this instance). ALL PROJECTS REQUIRE THIS.

2) Supporting information - the video places the product in context which can be essential but difficult if you haven't actually produced it yet. In this instance, the app being put to work is the focus of the narrative. If you haven't got a product but are handy with tracking in AfterEffects and have enough of your design to animate, then you could try and fake it - but it had better be good!

3) Essential information - presentation of functionality which is especially essential if you weren't able to demonstrate in context (video above).

4) Supporting information - this is clarifying the essential information above and wouldn't necessarily be required, especially if time/space was at a premium.

5) Showing off - although the animated search feature is nice, it is not necessary to present the product and if this wasn't in a design showcase context (such as Behance - which it is), then this would be quite vulgar.

6) Supporting / Unnecessary information - although this information is essential to the product, it is presented here in an unnecessary way as it takes up a lot of space and the map is kind of superfluous.

7) Unnecessary information - we expect that kind of functionality in our apps now and is nothing revolutionary.

8) Supporting information - a demonstration of what you can expect important functionality to look like within the app.

9) Supporting / Unnecessary information - although this information is important to the product, it is over-presented here.

10) Unnecessary information - 'settings' are not new or glamorous. Demonstrating them here suggest a potential complicated app to use (although I doubt it is), and 'error' is something we hope never to see!

11) Showing off - again, not a criticism here because the author wants to demonstrate all aspects of design but showing the clarity of text because it's demonstrated on a retina display. It also suggests however, that the app won't work on less than an iPhone 4 (and maybe not even on that). If this product did, seeing this might make owners of a non-retina display iPhone think "this won't work on my stupid old phone".

12) Unnecessary information - basically this is a long screen grab of the entire website. A link would have sufficed, especially considering all the imagery and information on the website is present in this presentation.

13) Essential information - where to the get the app from and who produced it (just in case the viewer wants to see what else you've produced if you've caught their eye).

As I have stressed many time previously, any criticism is based solely on the suitability for this a representation of a product for promotion, not as an entry on a showcase website. The reason I didn't use the 'Nextr' website to deconstruct is because it  doesn't feature as many examples for types of presentation methods as the Behance profile. But it does its job very well.

So, a little summary:

Style Manual

Don't get too excited as it might not be what you're expecting but this handy little website covers all the common content-related (so text mainly) issues that befoul web copy.



Head over to http://stylemanual.org/ and pay attention. Some of the stuff is rudimentary English, but some is very useful and may answer potential questions you want or were too embarrassed to ask.

 

 

Breeze on Behance

I decided to publish Breeze on Behance, a creative network for all aspects of art & design. What I particularly like about Behance is the clean, professional looks it gives to your projects and you can publish a "Work In Progress" just to get feedback. You can then follow up with a "revision" to show how you've applied feedback. This proves the usefulness of this process and when we are asking you (students) to undertake this process for aspects of your work, particularly user interface design, we are not just out to create more work for you!

Below is a screen grab from the Behance portfolio project I created for Breeze. On it you can post images, videos and text. More importantly however you can see how many people have looked at it, how many have appreciated it and left comments. There are also many tools to help you promote your project on social networks.

Promotion, feedback and networking go hand-in-hand so I urge you to get registered on one of the digital/design promotion networks such as Behance. There are quite a few out there.

Others include: Deviant Art, Coroflot and Krop. There's a list here that suggests even more. I wouldn't recommend creating an account on all of them because you'll have to remember to update them all each time you add or amend a project. I suggest choosing 2 or 3 that seem best suited to your type of work (or opposite ends of the spectrum if you produce diverse work) and updating them often. There's nothing worse than having to submit 5 projects at a time... they can't possible all get the attention they deserve!

There are also other resources for general project level feedback including usability issue identification, user testing and collaboration. This collection explores most of the popular ones.

I will cover more in my next posts on this subject where I plan to, start at least, discuss methods of presenting your work.

Tools for Planning & Producing your Projects

I have just stumbled across "Damn You Art School", a website hosting links to tools (some free, others not) to help during the planning and initial production stages of design & digital projects.



Their short mission statement:

Apps, Tools, and Resources creative professionals use to improve Productivity & Creativity. For everything they never taught you in art school. And other cool stuff.

I haven't used all of the tools featured on the site but others I have and will showcase some of the more appropriate tools in time.

Also, I'm not quite sure how choosing a header for the different industries affects the tools on offer (maybe changes the order of prominence?)

One tool I'm surprised they missed off (unless I missed it) is Pop, an app that allows you to demonstrate a menu driven project for iOS (and Android soon) by taking photos of your interface designs and linking them together to create a demo of how your app might work.

Either way, there's some great tools there for your design and digital projects so check it out! Thank you to Smashing Magazine (another great resource) for bringing that to my (and by proxy; your) attention.

Experiment 2 - Branding

I do like to dabble in branding and identity. I'm no expert, but I know what is appropriate and how to create it. True, my solutions may not always be the most creative in the world but this isn't my main skill area.

I will post more on branding and identity including resources that I really want to share with those who are interested in this particular area of design. It's a subject that fascinates me so I'm going to have a go at creating a name for my product (the weather app) and a logo which will hopefully serve as the identity for the product.

There are various processes which different designers like to adhere to when creating branding for a brief but because the brief for this experiment was the creation of interface designs (and maybe an animation presenting the concept clearer), branding, whilst still important, takes a bit of a back seat in terms of priorities especially considering I don't want to assign too much of my time to this project.

Therefore I am not going to document the process here (because it was rushed). I will save that for when I document the process properly. I am simply going to talk you through the branding I came up with.

The Name

All good products require a name and I can't keep referring to this project as 'Experiment 2'.

I wanted a name that reflected the clean, crisp, airy feel and approach to the interface designs but, as with my project, I didn't want something too abstract. It had to be related to the subject area of weather but not use the word 'weather'.

I decided to try using a term used to describe the weather and that... er... didn't go too well (I'll spare you the bad suggestions here for the sake of brevity). But all of a sudden it hit me:Breeze. It works on so many levels. It suggests crisp and airy. It also suggests that the app will be easy to use and finally, it's a word relative to the weather. Ok so it may be a little obvious but it fits the bill and is only a single, short word. Perfect for creating an appropriate identity.

Identity

The same brief is required for how the branding will be presented.

I decided to use the typeface I had used for the Interface designs to keep everything connected and create an associated image to go with the text.

Incidentally, the font is called 'Text Me One' and is available to download and use on web pages from Google Web Fonts.

To be honest it was very simple to create and I quickly visualised how I wanted to portray breeze in my head before jumping straight onto the computer. Normally you would put a lot more effort in than go with your first idea, but, as previously mentioned, this project is a quickie.

Here is the final result anyway:

[caption id="attachment_220" align="aligncenter" width="640"] A presentation of the logo in abstract from all other design elements. This is a perfect way to present your banding in its own right. Obviously the branding also needs showing against any design work to which it will appear on or next to.[/caption]

The colours match those found in the interface designs and I imagine this would be used for the loading screen for the app. In fact, I could animate the little 'swirls' to unravel as it loads. That might look nice. Or nasty. Only one way to find out!

 

 

Experiment 2 - Process (Development Pt. 2.1)

Ok, so I couldn't wait to get started on my next planned phase of development: the animated mockup.

If you are unable to build a digital project, or if there's a project you're creating that could realistically be produced and you are only the designer pitching the proof of concept to a financial backer or development team/freelancer, it is a good idea to show how your proposed product will work in the real world.

However, you may not have the technical skills required to build a prototype. So why not create an animated short using the interface or designs you have created to tell the story of how your product will work? All you need is your designs in an appropriate format and some basic AfterEffects skills.

I am going to do just this, but before I can even get to the planning stage, I need to realise more of the design, in particular; the wheel of fortune weather display!

This post is dedicated to the development of this asset:

1) Appropriate format

It's important that this interface remains as crisp and clear as possible. I admit it's not going to win any legibility awards in its current state but that's not what this project is all about.

I can however, try my best not to make matters worse by using a visual graphics format that will yield blurry results, hence my decision to use vectors!

The screen mockups produced in Photoshop are fine but they're bitmap based and although were designed at the correct screen resolution for an iPhone 4 (320 x 480), they were in fact created at 72dpi so they actually look blurry already when displayed as an image on the iPhone.

Therefore, I am going to have to create the whole interface again from scratch using vectors.

Sadly viewers, I have a bit of an admission to make here. I can not use Illustrator properly. I use it all the time, but mostly for printing vector artwork I've created elsewhere. And that 'elsewhere' is... and there's no other way of saying this... Flash! I just prefer its organic way of creating shapes and paths. You have to remember, I am not a trained graphic designer, I am a developer that happens to try his hand at design from time-to-time and as such, I was trained to use Flash and have stuck with it ever since.

2) Creating the Template

The next task is to create the template that will hold all the different weather conditions for the 24 hour period. Obviously this is stretching what can be done with Met Office's DataPoint API because that only yields 3-hourly weather reports, but, because other weather apps tell the story hourly, there's no reason why my app can't.

My design requires a disc that can fit 24, individual hourly reports within it:

[caption id="attachment_167" align="aligncenter" width="328"] A quick reminder of how the "disc" should look.[/caption]

So the first thing I had to do was work out the diameter of the disc. This isn't as easy as you may think! Firstly, you have to consider the amount of iterations of information (in this case: 24). Then you have to work out how much space you have to allow between their rotational increments (in this case: 15º because 360 / 24 = 15).

Whilst there might be a mathematical formula based on the width of the asset and the amount of increments, I decided it would be quicker (for me) to just take a stab at a diameter based on the visual clues provided by my interface mockups. I chose 1000px and wasn't far off because when I had created my information holders (3 for each of the 3 circular windows in the design - see image below), grouped them, set their rotation origin to the centre of the 1000px circle (500px, 500px) I saw there was a little bit of overlap on the main (top) circular window.

It wasn't too much but because of the harsh transition of day to night, it needed expanding so I set the diameter to 1200px and tried again. Second time lucky as you can see below:

[caption id="attachment_153" align="aligncenter" width="696"] The development of the disc meant that a more accurate, and measured approach was taken to ensure all data could fit into the space that was worked out.[/caption]

Here it is evident that 24 pieces of data can exist on a disc without hardly any overlap, and 1200px is as large as I wanted any asset really. Hopefully by now you can appreciate how this app might actually work. It should become even more evident when I create the final disc with the correct symbols and values for a typical day. In fact, I plan to create a summer disc and a winter version to demonstrate the differences in colour, symbol, and an opportunity to display the 2 warnings the app could offer of high UV (summer) and harsh "feels like" temperatures (winter).

One thing to note, I did check the space allocated to temperature to support 3 digits for double figure negative values and triple figure positive values. Always consider the space required for information when dealing with dynamically generated content.

Before any of that however, I needed to decide on a colour pallet to represent temperature & wind speed.

3) Creating Colour Scales

It's not just a case of creating a nice colour pallet. There's science behind the information on display here. Added to this the conventional way we are used to seeing, temperature at least, displayed on the weather broadcast on television and now delivered on web pages and apps.

Therefore I put my "developer" hat back on and started logically combining colours from convention with a little maths to keep things accurate.

Temperature

I started with scale. This app is designed to be used in the UK where the weather rarely exceeds 35ºc and hardly ever drops below -20ºc. Therefore I decided my minimum temperature would be -20 and my highest 40 giving a total range of 60. True, these temperatures can be exceeded, and, thinking ahead to make this work for the rest of the world I should consider what to do in these cases. The answer is simple. Just use the highest and lowest colour for numbers that exceed the scale. Their colours will be enough of a visual clue to indicate these extremes and don't forget, these colours are secondary information as the numerical value is the key feature of this information.

I then roughed out a sample colour scheme of this using colours that would compliment the visual style created so far:



That was simple enough. Now to get a little more accurate.

Using the Gradient Editor (below) I was able to align the colour values I needed at specific locations. For example, for 0ºc I wanted to use the cold looking green colour. Based on a range of -20 to 40 that put's the location along the gradient at roughly 33% and that's where it was:

[caption id="attachment_173" align="aligncenter" width="457"] The Gradient editor in Photoshop CS6.[/caption]

I checked all the other key values too and they aligned quite nicely. I saved the gradient (as it's bound to be useful again in the future) and applied it to my 240px wide test document, I now had a smooth gradient but there isn't really any definition to the colours I required at the 60 steps:



In order to obtain 60 values there are two possible approaches to take.

Firstly, I could re-size the document to 60 pixels wide and grab the colour value for each pixel horizontally - which could be tricky. Or secondly, I could save the file as a PNG8 with 60 colour values. I chose the latter and I am finally left with this "banded" gradient of 60 colours ranging from coldest to hottest:



In the end I realised that colour-picking from a file like this was going to be a little inaccurate so what I'm going to do instead is use the Gradient Tool to accurately determine a percentage location based on a value. Eventually, if this project ever goes into production, I will create a colour chart, but until then, I now have my colours for temperature.

There was one slight problem with the gradient however. 0ºc wasn't blue like we see on the weather. In fact, it's quite a mid-green and that was no good. So I amended the gradient slightly to ensure that 0 was blue:



I then realised that I couldn't actually use the percentage sliders of the gradient to accurate colours for certain percentages (after being converted from temperature values from the range). So I created a quick colour pallet for all 60 shades of hue from the range:

[caption id="attachment_190" align="aligncenter" width="378"] Colour pallet for the temperature range.[/caption]

This allows me to quickly use the colour picker tool to colour correctly the temperatures of the discs.

Wind-speed

Because I am intending to create a new, secondary method of displaying wind-speed, I can be a little less accurate as I won't be breaking convention.

The plan is to create a greyscale gradient that starts with a mid-to-dark grey for the lowest wind-speeds and go all the way up to black for the highest.

After some research I found that in the UK (Shetlands mostly), the wind speed can exceed 170mph so triple digits are required! I decided to cap the colour change at 60 because it is very rare to get sustained wind above this and it is only for secondary display purposes anyway. Also, because I plan to stay with mid grey, getting 160+ steps to black might prove difficult!

I used the same process as for the temperature:

[caption id="attachment_193" align="aligncenter" width="348"] Colour pallet for wind speed range.[/caption]

 

4) The Final Discs

And here they are in all their glory complete with typical weather for an extreme summers and winters day:

5) True Flat or embrace a little Skeuomorphism?

You may remember my brief investigation into the shift in design trends concerning digital media application and interface design (and graphic design in general).

My conclusion was that they were both tools to be used when appropriate and that one wasn't necessarily better than the other. What I haven't considered is can the two coexist in the same design?

The reason I bring this is up is because I am considering using a drop shadow in my design (see last image). I know of many designers who shudder when the words 'drop' and 'shadow' are uttered in the same sentence but hear me out, and to be honest, this isn't a very good example of a skeuomorphic design but because I am comparing it to a (fictional) physical product made of card, there are elements that do conform to a skeuomorphic way of thinking.

Compare the examples below:



We have a true flat design (left), a drop shadow from the whole of the main interface onto the disc (centre) and the same but with a further drop shadow from the main interface onto the white "surround" as in the original design (right).

In my opinion the design on the right has too much shadow action. It starts to get confusing with now 3 "layers" of interface. Also, on the smaller circular "windows", there is now a 'button' type effect appearing which adds to the confusion.

Conversely, I think the design on the left is also confusing. It might be sticking to true flat design principles but it suggests that this is a still image and can not be interacted with directly. That's not what I want, I want to convey the concept that the information displayed in these windows is on a separate layer behind the main interface and can be interacted with - just as if the design were made of card and you could spin the wheel to achieve this.

The conclusion is to go with what seems to convey my original intention of design - the centre option.

6) A Simple Presentation

Below is a Photoshop mockup of demonstrating how the wheel will work in relation to the rest of the interface and although it's only a static image, you can already imagine how the interaction model of this app would be implemented and how it would function:



 

I now have pretty much everything I need to create the animated presentation of my weather app concept. The one thing I am sill missing however is a name and branding. This will be covered in my next post.

Experiment 2 - Process (Development Pt. 1)

So, after a very short time in the planning stage, I fired up Photoshop and started to realise my concept.

Because the proposed weather app featured a novel way of communicating the time of the weather in question, and because it had to display secondary data dynamically (when required), it was essential to produce a number of mock-ups to demonstrate how the design would display this dynamic information:

[caption id="attachment_135" align="aligncenter" width="320"] A chilly day in Lincoln (where the person using this app would currently be located), with a strong southerly wind. It's partly cloudy and it's 12.00pm.[/caption]

[caption id="attachment_136" align="aligncenter" width="320"] mockup3 20.22.57
Meanwhile in Hull (some is browsing the weather in Hull but not located there - check the icon difference), there's going to a 60% chance of snow at 11pm and be very cold thanks to that northerly wind. Better wrap up.[/caption]

[caption id="attachment_137" align="aligncenter" width="320"] I thought it would be nice to show a warm summer / autumn day to demonstrate that the temperature display would use a similar hue scale to that of the BBC weather to indicate how warm / cold it was. Ranging from deep blue for the coldest temperatures (-20°) to deep red for the hottest (40°).[/caption]

[caption id="attachment_138" align="aligncenter" width="320"] An alert for high UV Index would be displayed next to the temperature (because the issue is linked to the high temperature in this instance). There would also be a red highlight on the temporal display informing the user they better check this time slot out! This represents dynamic data and would only be displayed if the value required care to be taken in the sun - which in the UK, doesn't happen all that often![/caption]

[caption id="attachment_139" align="aligncenter" width="320"] It's a similar story for the Feels Like temperature. If it's a set distance below the ambient temperature (for arguments sake; let's say 5°), then it would be displayed as an alert positioned between the temperature and the wind speed/direction. Also, the moon icon is highlighted red indicating this is for the weather conditions at 11pm.[/caption]

So, job done. I set out to visualise a concept for a weather app that would be a joy to use (probably), display useful data in a slightly abstract way and feature the new art direction of choice: flat. On that subject however, I did mock up my earlier interface design with a mix of the interaction model from the concept above and from its own original concept, but this time, I added subtle drop shadows to the circular "windows" because I am not sure, without animating the mockup (see foot of post), if a rotating disc with flat shading would have the same impact as if it were made out of card for example. I have a feeling I might have to bring the two styles together in order to make the effect I am after, work:

[caption id="attachment_134" align="aligncenter" width="320"] Does the drop shadow reinforce the notion that the weather information is contained on a layer "below" the main interface? Or is it too distracting and is it an issue that breaks the Flat design principle?[/caption]

You may have notice I have labelled this as part 1. This is because I fully intend to use this example to demonstrate how to present a concept for an interface or functional piece of digital design without actually creating it with code. Something that I think a great deal of you (students) will find useful! Check back for that soon!