Designing for iOS7

-->

Designing for iOS7

With the recent launch of iOS7, designers are scrambling to understand what it means to create in this new “flat” centric creative world. With over 200 million devices upgraded to iOS7 in just 5 days its clear apple’s redesign has real staying power.  This release represents Apple’s the final design break from skeuomorphism, to minimalism that simplifies design and pushes the user experience to the forefront.  So how do you design for it?

Put your UX thinking cap on

The conversation about  iOS7 tends to focus on visual design, what’s really happening is bigger than moving away from glossy buttons:  We are moving away from being spoon-fed usability.  Since the release of the iPhone in 2000, users have evolved to anticipate user patterns and no longer need the skeumorphic borders and buttons that helped guide them through their first couple of smart phones.

iOS7 design pushes UX to the forefront of design, while simplifying obvious interactions. No longer can bad UX behind overly complicated interactions and glossy buttons. It is the responsibility of UX/visual designers to simplify known UX patterns to help users complete tasks faster.

Think Flat

The new flat design style doesn’t mean gradients and drop shadows are a thing of the past. Rather designers are thinking “flatter”. Take the keyboard for example; every letter contained in the keyboard contains a very simple 1pixel lower drop shadow.  This separates the letters from the transparency of the background, while giving a tackle feel to the keyboard. 

This same flatter design thinking can be seen in messages.

A bright blue gradient behind the primary users message visually separates the light grey background of the sender’s message. The gradient serves alternative purpose by appearing in a darker gradient towards the most recent message, vs. gradually appearing lighter as older messages move towards the top of the screen.

Helvetica, Helvetica, Helvetica

Type is the key to iOS7design, and the reigning king of apples typography kingdom is Helvetica Neue. This doesn’t mean your designs need to be constrained by this sans-serif heavy weight. Rather, choose typefaces with a variety of weights giving design flexibility to vary type weights to define UX elements.

Some great free sans-serif, non-Helvetica alternatives include: 

Source Sans Pro: http://www.fontsquirrel.com/fonts/source-sans-pro

PT Sans: http://www.fontsquirrel.com/fonts/PT-Sans

Serif options:  when choosing a serif font keep weights in mind while looking for fonts with a slight retro edge to them.

Roboto Slab: http://www.google.com/fonts/specimen/Roboto+Slab

Kameron: http://www.fontsquirrel.com/fonts/kameron

Serif fonts will differentiate your designs from apples Helvetica overload while still keeping a minimalistic character to your typography.

COLOR!

The movement of Flat design, as trend tends to rely on on muted retro colors and subtle color differentiators. (http://www.webdesignerdepot.com/2013/09/the-ultimate-guide-to-flat-design/). iOS7 took a bolder approach to color. The new bold neon color palette differentiates design from the muted colors created with the new blurry transparency effect.

Consider a broad palette and test your hues across a spectrum to be sure they behave in lighter and darker versions. Ensure you have enough range for both subtle and high contrast elements.  Be brave,  try pairing colors like neon yellow, green and red might sound crazy but place them into a simple flat icon on a users dashboard and watch how they interact with it.

Build Depth By Using Layers

 

One of the new tools apple has given designers is a new way to create depth of field in iOS7.  For a UX example take a look at safari– when shifting through tabs you now have multiple levels of layers to help users switch tabs or close windows.

  

 

This layering effect also includes transparency. If you open menus from the bottom of your device you can see through it. The colors blur to create a shallow depth of field, but you can see through it. Consider how to incorporate these effects into your app design.  If your looking for a way to recreate this effect in Photoshop - a 10pixel Gaussian blur seems to do the trick, but play with exaggerating this effect , or decreasing transparency to increase the feel of depth.

Design without boarders

The new iOS7 styling means there are no longer black bars breaking the top of your design to tell you what time it is. Rather photos now go full frame – opening the ux and design for a seamless mobile experience.  What has replaced the original iOS6 grid base is white space meaning for example there no longer borders around buttons rather “hit area’s” for users are defined by plain text and simple arrows.

The lack of lines throughout the design creates more visual space harsh outlines on  buttons to define “hit space”. This adds to the overall minimalist clean and simple design aesthetic that defines iOS7. In the calendar app, gone are the harsh gradients and tight typography.  Instead the design flows right to the edge of the screen, giving visual space for users to move though the app.

See what your doing - Design on your Device

Whether your designing for mobile or tablet its important to see the proportions of the design in context.  Especially with the new iOS7 simplistic & flat style, its never been more important to be particular about the kinds of design decisions you make.

The primary thing to keep in mind when designing for a device - no mater what tool you choose to create in is  - the proportions of your design in context to the device. Enter LiveView for iPhone & iPad http://zambetti.com/projects/liveview/ - and https://itunes.apple.com/us/app/liveview/id301069270?mt=8

. Live view is a free  app that lets you see your canvas in real time on your iOS device.  It will help put your design in context as your working.

I also found resoures like http://ivomynttinen.com/blog/the-ios-7-design-cheat-sheet/ incredibly useful for everything from resolution & display specifics to free links to GUI’s and starter guides.

Icons have changed

 

Designing your app icon is as important as the app itself. The old simple radii values for rounded corners are gone. Apple introduced a new shape, which got named "superellipse" by Michael Flarup. The new shape has a slightly rounded edge and focuses on symmetry in design. One of the best templates I have found to create icons is http://appicontemplate.com/ios7

Wrapping up

There are no hard and fast rules in design. Just like fashion, design trends change. What’s out today will make a come back 10 years from now. With that in mind, creating clean and simple interfaces is never out of style. In our overly connected, information at your fingertips world; minimal designs resurgence is a refreshing visual approach that when applied thoughtfully can make digital experience highly usable and enjoyable.

Already have an app, and looking to refresh it using some of our talented design expertise – check out Have you updated your app for iOS7? By Matt Crist

The Lux Life - Designing for a luxury market.

Luxury brands are associated with the core competencies of creativity, exclusivity, precession and craftsmanship. Designing for these product attributes can be a challenging yet satisfying experience. From golf & country clubs to luxury handbags, the demographic challenges associated with each sector are specific to consumers on the top end of the wealth spectrum.


The Creative Challenge: Understanding your Target Audience:
Your target audience is looking for you – they just don’t know it yet. Your brand can position itself to the front end of their radar through design.

Be Consistent: Crossing Mediums
Websites, blog’s, business cards, brochures, the list of your creative mediums can span across an endless array of mediums. Keeping your brand image consistent, keeps it memorable. That being said, creatively updating your brand image can strike new relationships with your current target audience as well as new prospects.

The Listening Creative

I am always astounded by the amount of pressure to be creative I am as a “Design Professional”. In my schooling I found myself painting, drawing, doodling, in a seemingly endless bank of creativity. However with deadlines and a variety of clients, I’m constantly challenging my creativity and left to wonder where my inner creative lives. I compare creativity to a bank - sometimes you make deposits – and sometimes you make withdrawals; finding that beautiful balance of more deposits then withdrawals is rare. However here are a few sound techniques I find that help the creativity flow:

Meet the Audiobook:

If you like to listen to music while you work, a nice change of pace may is the audio book. Now you don’t have to treck down to the bookstore and spend 40+ dollars for 6 cd’s of ( insert book title here ) sites like “www.audible.com/ can bring you everything from romance to suspense. Listening to these while creating - help me think of new concepts and idea’s otherwise not apparent. Sometimes hearing a description in a book can stimulate your brain to visualize color, placement, variety, and perception. Not only are you partaking in the arts, but your adding variety and learning at the same time - a little multi tasking that will not only help expand your brainpower, but also jump start your creativity.

Here are a few of my favorites:

The Tipping Point: How Little Things Can Make a Big Difference

Outliers: The Story of Success

Both by Malcolm Gladwell

Eat, Pray, Love: One Woman's Search for Everything Across Italy, India, and Indonesia

Elizabeth Gilbert

Middlesex

Jeffrey Eugenides

Water for Elephants

Sara Gruen

The Last Lecture

Randy Pausch, Jeffrey Zaslow

The Podcast Prevails: Tune in and listen to a variety of creative podcasts, news, music, and stories. Staying informed and an open mind is key to creativity. Podcasts are a series of digital media files, that can be in either video or audio form, which are released through web syndication. The vast market of podcasts can bring you creative inspiration from a variety of angles.

Here are a few of my favorites:

This American Life: You can download each episode for free weekly on itunes or stream it directly from their site http://www.thisamericanlife.org/ where you can also listen to a library of their older episodes.

Radio Lab: Hosted by WNYC this podcast gives an interesting look into science – everything from sleep to the afterlife. http://www.wnyc.org/shows/radiolab/

The Accidental Creative: http://accidentalcreative.com/ solutions to creative problems, and several unique perspectives on creatives. This is the best blog to keeping your creative mind healthy and taking responsibility for your work.

CSS Peer Recognition!

I am pleased to announce www.ambermiro.com has been featured as design of the day on both cssbased.com as well as csschick.com. There is a plethora of amazing inspiration sites and I am incredibly honored to be a part of this unique and elite crowed. I hope that I can lend to inspiring other designers as well as my creative peers as they have done for me for so many years.

Saying connected. “For a Better Tomorrow”

Every industry should have a board, a way to connect with your fellow peers with a witty repartee. Mine is www.qbn.com. It has been an excellent resource to talk about the creative industry and also share new work. Here are some other great creative blogs to connect and stimulate your inner muse.

www.qbn.com
http://www.makefive.com/categories/news-business/design
http://designobserver.com/
http://www.ideasonideas.com/
http://www.smashingmagazine.com/
http://ilovetypography.com/
http://www.swiss-miss.com/
http://www.notcot.org/

Inspiration - I need it, I crave it, I want it.

Racking my brain and CSS design award winners can land me right back to the age old problem. Staring at a white paper- with no design plan. With this problem on my mind I have compiled a few websites, artists and design work that rattles my brain and gets my creative mojo back.

Break Down http://www.ianwharton.com/
The best part of this design is the design breakdowns. As an art director so much of your work relys on communication. I think this is an excellent example of communicating print, web, and design campaigns to the viewer.

Virgo it out
No sense in viewing the same websites over and over again or saying to yourself. What was that site that the client mentioned? Screen Shoot and organize your favorite inspirations for your sites. You can use them over and over again and see them at the click of an arrow rather then with load times and flash distractions. Its an amazing way to see the bones of a website and combine your inspirations into one place.


Watch
Movie Trailers and Opening Sequences - there is more to them then you might think. I am so inspired by the opening sequence of movies like Kiss Kiss, Bang Bang, and Stranger then fiction. Designers like Danny Yount have a way of telling a narrative but keeping intrigue with in an opening sequence. In the end is'nt that the point of design - to tell a story?

Stranger than Fiction: Opening Sequence
by Razorbuzz

Put Wallpaper Up
I am always amazed when i see working design professionals with a standard apple or windows desktop, i know you want to be at the beach right now, but lets be honest that palm tree is'nt giving anyone a "warm and fuzzy feeling". ::yawn:: When i have a new client or i am in a design rut the first thing i do is grab a new wallpaper or make my own. I find it important to put something on my desktop that makes me think and give me a "virtual ambiance" the more whimsical the better. I love these wallpapers from vladstudio : http://www.vladstudio.com/home/ and from desktopography : http://www.desktopography.net/

Get the Info
By Fueling my Starbucks addiction i have noticed an interesting info design series called "Good", each week there is an amazing info graphics piece breaking down everything from fuel to the economy in an compact easy to read chart. Information graphics is the hardest thing in my arsenal of things that a designer has to do (hats off to you!). So when doing info graphics i need more then a kick in the pants to get a great design completed. I am inspired by Edward Tufte yes, but more so but his protege' Megan Jaegerman her work is clever, conveyed and inspirational!

Free CMS!

Designers near and far know that 2008 and beyond brings a new era for client interactions. Clients demand CMS, and while it may take a few minutes to set up blogging sites like Wordpress and Blogger are just the tip of the iceberg when it comes to building incredible blogs, websites, and flexible interactive pages.

I have been testing several free CMS systems and here are 2 of the best, easiest and most importantly free results.

Idiot proof CMS: Cushy CMS
You don't have to download anything, the client does'nt have to touch things they are not suppost to and you can just worry about editing div tags to say "cushycms". This site is intellegent CMS that is both easy for the clients to use as well as the designers.
www.cushycms.com/

Under a rock?: WordPress
Okay so i admit, i have been under a rock with the wordpress phenomenon. A semantic personal publishing platform with a focus on aesthetics, web standards, and usability. This is blogging software so flexible and easy to use - several top companies and design blogs are using this SQL blogging system to produce up to the minunte updated beauitufl sites. There is some small download time and confusion with the SQL databases. But once your on! your up and running. They also have an incredible user based documentation from other users for troubleshooting. Its well moterated and well documented! Finally - if your feeling a little lazy there is a plethora of incredible wordpress themes out there to get you started. Use em' and tweak em'.
http://wordpress.org/