Designing Inspired Style Guides

Designing Inspired Style Guides talk by Andy Clarke at Design Exchange Nottingham.

Links from slides:

http://atomicdesign.bradfrost.com/
http://patternprimer.adactio.com/
https://britishrailmanual.com/
https://standardsmanual.com/products/nasa-graphics-standards-manual
https://standardsmanual.com/products/nyctacompactedition
https://standardsmanual.com/products/american-revolution-bicentennial-ltd
http://designguidelines.co/
http://rizzo.lonelyplanet.com/styleguide/design-elements/colours
http://ggw-prototype.goalgorilla.com/design-elements/colors.html
http://skyglobal.github.io/web-toolkit/#base-styles–colours
http://www.thetimes.co.uk/styleguide/colours
http://govuk-elements.herokuapp.com/colour/
https://material.io/guidelines/style/color.html
http://wet-boew.github.io/wet-boew-styleguide/v4/design/colour-en.html
https://issuu.com/bellfrog/docs/adobe-corporate-rand-guidelines
https://standards.usa.gov/colors/
https://www.ox.ac.uk/public-affairs/style-guide/digital-style-guide?wssl=1
http://brand.opentable.com
https://issuu.com/bondo/docs/foursquare
https://www.behance.net/gallery/2341732/STIHL-Making-It-Easy-Brand-Guidelines
https://corporateidentity.alberta.ca/downloads/Alberta_Corporate_Identity_Manual.pdf
http://www.barbican.org.uk/branding/
https://issuu.com/janjaneczek/docs/macmillanguidelinesv13fullb
http://www.mashcreative.co.uk/work/royal-mail-rethink/
https://issuu.com/amandymichiru/docs/gsm_rgb
https://issuu.com/warshajamnadas/docs/small
https://issuu.com/bondo/docs/bing_product_guidelines_copy
http://inspired.guide
https://design.atlassian.com/product/
https://gel.westpacgroup.com.au
http://www.thetimes.co.uk/styleguide/getting-started
https://www.timewarnercable.com/en/enjoy/prototypes/style-guide-prototype/styleguide.html
https://marvelapp.com/styleguide/overview/introduction
https://standardsmanual.com
http://codeforamerica.clearleft.com
https://www.mapbox.com/base/styling/icons/
https://design.atlassian.com/product/foundations/iconography/
http://govuk-elements.herokuapp.com/icons-images/
http://rizzo.lonelyplanet.com/styleguide/design-elements/destination-icons
https://britishrailmanual.com/
http://www.doublearrow.co.uk/manual.htm
https://issuu.com/bondo/docs/skype_brand_book_-_look
https://medium.com/salesforce-ux/defining-principles-to-drive-design-decisions-b647b68fb057#.9gr20dxfg
http://red-stone.com/projects/big-lottery-fund-bpr-identity

 

Posted in Conference | Comments Off on Designing Inspired Style Guides

Map Filter App Intro

The idea behind Map Filter App (prototype title) is “Instagram for maps”. The basic use: find an interesting feature on a map, choose a map style, apply a filter.

A more accurate “X for X” comparison may be “filters for maps” because the app will not have social networking features.

 

MVP

Find an interesting feature on a map

The map is centered on Manhattan by default. There are many interesting features in the New York area to immediately start experimenting with the app. There is no search option to navigate to a specific location. Standard pinch/zoom/slide navigation can be used to go anywhere in the world.

 

Choose a map style

There are currently 5 map styles. They range from artistic to satellite imagery.

 

Apply a filter

There are currently 5 map filters. There are colour filters and abstract filters.

 

This limited set of functionality should be enough to gather initial feedback on whether the app is a good idea.

The next version additions are: location search, more map styles and more filters.

If you are interested in experimenting with the app, please get in touch.

 

Posted in Apps, Development, iOS, Maps | Tagged , , | Comments Off on Map Filter App Intro

Map Filter App Dev Progress

Work is coming to a close on the prototype of MapFilter app. The main features are working. It has a clean UI without any animations. It is complete enough to gather feedback on the interest in its use.

It has been written using the Beta versions of Xcode 8 using Swift 3. It is configured with a deployment target of iOS 10. So I had not used in on a device until this week. As its a simple interface there were no real surprises or glitches. The filters perform much faster on the device than in the simulator, as expected. The intermittent crash on UIImageWriteToSavedPhotosAlbum, has been resolved.

The next step will be to get a crash free version deployed to TestFlight. I’m using BuddyBuild for building and deployment. Even on the free tier, it does so much heavy lifting and handling of provisioning profiles that it’s a timesaver. I’ve also installed the BuddyBuild SDK for crash reporting and these are created as issues in Github.

I’m also trying the use of Slack for handling notifications from Github and BuddyBuild. This allows me to keep all my dev alerts in Slack and out of email. Some may call overkill, but they’d be wrong. As an indie dev, I need my workflow to be as tight as possible. My time is my money.

 

 

Posted in Apps, Development, iOS, Maps | Tagged , | Comments Off on Map Filter App Dev Progress

Great App Ideas

Once you’ve had your great app idea. It’s time to be realistic and break it down.

Think of it like the scientific method:

  • Have a business idea (ask a question)
  • Research whether there’s a need (observe and gather information)
  • Build an MVP with metrics to validate your business model (form a hypothesis)
  • Release the MVP to the market (test the hypothesis)
  • Gather feedback and determine whether those metrics were met (analyze and interpret)
  • Improve the app based on what you’ve learned (test again)

Source: Entrepreneurs and the App Development Process | Big Nerd Ranch

Posted in Apps, Development | Comments Off on Great App Ideas

Horsetail Falls Trailhead – Doarama

Created from GPX at: GaiaGPS by Nathan Nguyen

Posted in Maps | Comments Off on Horsetail Falls Trailhead – Doarama

Mount Fuji – Doarama

Created from GPX at: GaiaGPS by Louisa Cheung

Posted in Maps | Comments Off on Mount Fuji – Doarama

Doarama Embed – China

Posted in Maps | Comments Off on Doarama Embed – China

Speedy App Prototyping Without Coding

This overview will introduce the use of Sketch for design, Marvel for prototyping and Lookback for feedback.

If you would to discuss your app design process, please contact me.

No More Xcode

This is the last mention of Xcode in this article because it’s not necessary for prototyping. It’s too cumbersome, restrictive and final. Storyboards seem to be a good fit for this purpose but fall short when compared to the following tools.

Speedy Sketching

Sketch is a user interface design tool. It’s been designed that way from the ground up and it has a healthy ecosystem of plugins and resources.

It’s intuitive use means that the learning curve is low. Although there are a ton of tutorials and guides out there if you get stuck.

iOS App Prototyping

Amazing iOS 9 design resources have been provided by Facebook and Meng To. These contains elements of all levels of app design from entire tableviews to single icons. Each of the resources can be broken down to a granular level. With each one having customisable settings for size, colour, opacity, tint, border, blur, anything, ever.

This means that prototyping becomes a matter of arranging existing elements on screen rather than designing from scratch.

By reusing existing UI elements a design can evolve very quickly.

Building Blocks

Through the use of Symbols and Text Styles is possible to build resuable blocks of elements. These can then be updated in one central library with the change being reflected throughout the design.

(This is the first step in ensuring that the design has been structured correctly and a cohesive style guide has been applied).

Marvelling with Marvel

Marvel is a prototyping tool. It allows you to upload your designs and create links and transitions between screens. A project can then be viewed on the web or via the Marvel iOS app.

Using a third party plugin it is simple to publish your Sketch design in Marvel.

When adding hotspots to a design to link to another screen you also specific the transition type. These settings are stored in Marvel and are kept when a new version of the Sketch design is uploaded.

There is something very powerful about the lack of effort required to deploy your prototype to a device for feedback and testing. The reduction in time so drastic your project feels successful immediately. With early stage feedback from a design preview on device you’re cutting costs and adding value at the same time.

Feedback with Lookback

Lookback is a user testing tool that records a test session in the prototype, including a video of the users reactions.

Through an integration in Marvel, you can watch users testing the design you created in Sketch.

The session is initiated from within Marvel. Users can be invited via a shared URL or by email. They are asked to install the Marvel app and then start the test. It’s a seamless experience for the user.

The results of the testing are presented in a very powerful way. The timeline, app recording and user video recording are all synced to show the route the user took through the design.

It also archives all the user testing for future reference.

Winning Combination

This simple workflow is amazingly powerful. The number of steps are minimal. The value is unfathomable.

From creating a design in Sketch, animating it in Marvel to watching recorded user feedback sessions in Lookback.

 

Any app design process can benefit from this workflow. If you would to discuss your app design process, please contact me.

 

 

 

Posted in Apple, Apps, Development, iOS, iPhone, Learning, Technology | Tagged , , | Comments Off on Speedy App Prototyping Without Coding

Sketch for App Design

SketchIntro

 

Every iOS app developer should stop now and start using Sketch. It’s not Photoshop (because life’s too short). It’s a gamechanger.

It’s got a massively healthy eco system for plugins, resources and third party integrations. Yep, it’s not a drawing tool, it’s a UI prototyping lifesaver.

 

Digital Design

It’s intended for designing digital products. Templates for iOS devices are standard.

Design should be borrowed or inspired by others. It should never be lookng at a blank screen and not knowing how to fill it. With a weatlh of Sketch resources available, the design inspiration is unlimited.

 

Time Saving Resources

Meng To has produced an iOS 9 resource kit, as has Facebook. These contain all the elements of a design that you should ever need. As all elements in Sketch are vector based, every element can be set to the required size, colour, opacity, tint, border, blur, anything, ever. From a developer point of view, this means never actually having to design any elements. Just arranging elements is enough to be able to create new screen layouts.

Although there are plenty of screen layouts included too. If you’re mocking up an app, you can easily use available resources to customise onboarding screens, login screen, tableview with content and a messaging screen. Within Xcode you wouldn’t even bother to attempt this.

Any design can be realised but a design based on iOS controls and principles can be created quicker.

It’s a simple canvas so the ‘limitations’ of device orientation and sizes with accompanying constraints are being ignored, which at the design stage is a good thing.

Any non standard UI elements within the design can be exported as code using the PaintCode plugin.

 

Developer Friendly

Project layout is important. It’s easy to get to a jumbled state of multiple pages, multiple layers, nested layers and duplicated layers. Refactoring will aid the whole process making for quicker iterations and maintainable designs.

Sketch plays to a lot of the strengths of a developer IDE. In fact, it’s almost an IDE for design. Maybe this is nothing new (Photoshop has had an eco system of utilities for a long time), but it’s that Sketch feels like it’s helping you. It has the same attitude. It’s helping you with your design. It wants to be part of your workflow so you’re not battling against it.

 

Great Tutorial

I got my introduction to Sketch through Meng To’s Design+Code and would recommended that you do too.

 

Posted in Apple, Apps, iOS, iPhone | Tagged , , , , | Comments Off on Sketch for App Design

WWDC 2016

WWDC is taking place on June 13 -17th 2016 in San Francisco.

There is a sliding scale of options for “attending” WWDC week:

  • Get a ticket, go to SF, attend sessions
  • Go to SF, watch sessions
  • Stay home, watch sessions

 

WWDC Attendance Cost

Registration is open until April 22nd 2016 closed for 2016. Registering entered you into the lottery for tickets. Successful applicants were notified on April 25th 2016.

Registration cost $1599 which is charged on successful selection during the lottery process. You then have travel and hotels costs. Typical estimates of attendance cost are $4000. This is also a week out of the office so typically you have reduced income for a week.

 

Remote Attendance

If you’re not planning to attend, there are plenty of ways you can join in during WWDC week.

The two key sessions are the Keynote and the Platforms State of the Union. The Keynote is the business update which typically includes new product announcements. The Platforms State of the Union goes deeper in iOS and OSX features and updates.

Apple has announced that many of the sessions will be live streamed.

The Apple WWDC app gives a sneak preview of sessions. Not yet updated for 2016. Expect the schedule to be updated by the end of May.

There are many other events happening in San Francisco during WWDC. Some are satellite events for WWDC and some are alternative events for without a WWDC ticket but are still in the city. Both Layers and AltConf have confirmed 2016 events but have not yet published details. For a taste of the great talks from last year, view the 2015 AltConf videos.

 

Watching WWDC Videos

The release of WWDC videos by Apple has improved year on year. The time to release has reduced every year, with some sessions now being streamed live. Recently they have added searchable transcripts and subtitles. The searchable transcripts provide links to the point in the video. This is very powerful for quickly navigating a video. Subtitles make it easier to absorb the content.

For a full UI to access the videos, you should use WWDC. This Mac app allows you to track videos you’ve watched, save favourites and gives access to all videos and transcripts from previous WWDC’s.

 

Posted in Apple, Apps, Conference, Development, iOS, iPhone | Comments Off on WWDC 2016