Five Ways to Improve Your Graphic Design for Mobile

Over the past few months, I have been researching and practicing mobile design from a graphic designer’s perspective. As a graphic designer, I wanted to learn about the constrictions, features, aesthetic direction, specifications and constraints when working on a mobile design. Through creation, online classes and research, I discovered how to better create effective and innovative mobile designs.

---

1. Aesthetic and Layout

As a designer, I’ve learned that my choice of metaphor dramatically affects the design aesthetics of the interaction. It brings meaning to the design. Interactive elements should be visible, recognizable, reactive (i.e., elicits feedback), safe, and consistent.

A good mobile design does what the user expects it to do and has positive responses to the interactions. I think it is important to consider what the audience desires or likes through an emotional connection with the design. The look and feel should be consistent and designers should obtain any corporate branding materials from the client during the definition phase of the project.

Jen Gordon of Tapptics suggested that when selecting a color palette, a designer should consider the variety of environments for the user when they are using a mobile device. Designing high-contrast elements are helpful in legibility and readability. She said that a designer should have a character count limit for the body copy. This will help keep the design layout less cluttered during the development of the app.

Jen also noted that a four- or five-column layout is best for an app. The reason is because the standard iOS tab bar on the bottom can have no more than five icons. It is best to create columns for every tab element that a designer has within their design.

---

2. Process

I found that Brian Fling’s mobile design process is best suited for a graphic designer when designing for mobile. It also was clear and concise. I have listed Fling’s process below:

“IDEA The first thing we need is an idea that inspires us.
NEEDS & GOALS Identify a basic need with our desired user.
CONTEXT The circumstances where information adds value.
STRATEGY How we can add value to the business.
DEVICE PLAN Choose the devices that best serves our audience.
DESIGN Create a user experience based around needs.
PROTOTYPE Test the experience within the context.
DEVELOPMENT Put all the pieces together.
TESTING And test, and test, and test some more.
OPTIMIZATION Reduce all assets to its lowest possible size.
PORTING Adapt for other devices that fit our strategy.”

---

3. Features and Gestures

When designing, every screen should have a purpose and gestural interaction defined. It is important to plan out the gestures that the user will be using during storyboarding/wireframing. A designer should define the navigational flow when creating sketches. All of the sketches should be rough at first.

Next, a second round of sketches should be created within a grid structure that has more detail and written definition. I have found that these second round of sketches can be used within a basic prototype.

As a result, the navigation and user experience issues that occur later on in the process can be address before any art is created. Through the creation of a prototype made from sketches, the usability can be tested before any graphics are created within Adobe Photoshop or Illustrator.

---

4. Guidelines/Specifications

Because there are so many different platforms and devices when designing for mobile, it is important to know what the specific platform and device will be for the end product. As a result, I’ve come to know that a designer needs to know the dimensions, orientation, sensors and inputs on the device. They must know if it is iOS, Windows or webOS. These choices are going to affect the size of the assets for a developer and overall resolution.

I discovered that when complex designs are displayed on different mobile devices, the limited color depth on one device could cause banding, or unwanted posterization within a graphic. From a production standpoint, I realized it is good to use Adobe Photoshop with vector smart objects that are from Adobe Illustrator. It is best practice to use vector shape layers rather than bitmaps. If bitmaps have to be used, it is important to recreate create them as shape layers or smart objects.

Here is a list of the specifications for various iOS devices:
For iPhone Retina Display
640px wide
960px high
72 ppi

For iPhone Non-Retina Display
320 px wide
480 px high
72 ppi

For iPad (portrait)
768 px wide
1024 px high
72 ppi

For iPad (landscape)
768px high
1024 px wide
72 ppi

Source:http://bjango.com/articles/extrapixels/

I discovered that it is so important to design everything at the smallest file size first then the largest size to maintain fine details and prevent problems with composition and limited real estate. It is also best that when prepping file for the developer, you need to make elements the size they are going to appear in the final application. For example, a vector smart object in Adobe Illustrator should be the final size it will be exported as in Adobe Photoshop.

There are some good practices to follow when saving out files for a developer. For example, leaving a pixel buffer around images when saving out images will allow for better rendering of graphics. I also have come to know that PNGs are the best file type for all graphics when providing them to the developer. The reason is when any other file format is utilized, the iPhone has to do the same processing that Xcode does but it is doing it at run time rather than build time. Basically, the app will run slower if anything other than PNGs are utilized.

For iOS apps, designers also need to save out app icons in various sizes for developers. Apple’s iOS Human Interface Guidelines explains them.

---

5. Usability

As with any design project, the user and target audience need to be a major factor during the entire phase of the project. When designing for mobile, designers need to consider the persona of the user and when will they use the device, how often they will use the device and where they will use the device. It is important to remember that unlike the iPhone, iPad users won't always have Internet access.

In addition, it is more effective to design a website for mobile first and then design for the desktop. “Users don’t complain about lack of features,” said Red Foundry CEO Jim Heising. “Users complain about features that don’t work.” Designers need to compress content where possible, and avoid providing unnecessary content.

---

I’ve learned that a designer needs to create and test the app during the sketching and wireframing in Adobe Photoshop. There are only two states when creating buttons, an inactive and an active state. Test designs on the device it will live on at the end of the project. I’ve used FieldTest and found it very efficient and effective. A designer needs to consider the tactile interaction design and use the icons and buttons that are recognizable in mobile design. This makes the usability more efficient for the user.

GROWMARK iPad and Touchscreen Interactive Design for Farm Progress Show

Iona was asked to help GROWMARK increase one-on-one contacts with their customers at the 2011 Farm Progress Show. To do this, we partnered with GROWMARK to develop an interactive gaming strategy that was entertaining and engaging. GROWMARK provides customers with the inputs they need to be successful in their operations. Their divisions work together to provide member-owners and customers with not only the products they know and trust, but also the means to deliver, market, and store those products.

I had the privilege of working as the lead designer on the team. The end product was really well received at the show and pushed the boundaries of interactive design and development at Iona.

After meetings with GROWMARK staff and determining the goals for this experience, Iona developed written user case concepts for possible development. From the concepts, GROWMARK staff selected the one that was entitled Yield Maximizer. This concept was an interactive game that had an appealing physical interface with an immediate visual WOW factor – how is that happening?. This concept combined the physical nature of an iPad into a game involving FS products. This was achieved by transferring images from an iPad to a touchscreen interactive. Animation, sound effects and music helped create a gaming feel.

There were a total of four interactives that focused on GROWMARK’s main branding products: seed, grain systems, energy and agronomy.

The seed interactive http://farmprogressshow.com/video.aspx?vc=8
invited users to envision themselves as farmers. A user walked up to a large, touchscreen monitor that showed a patch of fertile land and the growing conditions in that field. Next to the monitor was an FS bag that had an iPad embedded onto the surface. The user then saw a question that related to the field conditions and asked them how to best maximize their yield based upon the given conditions. The user had to choose a seed product that best answered the question on the touchscreen. After selecting which product would work best, the user was prompted to pour the seed out of the bag. When the user picked up the physical bag to begin pouring, they saw the seed pouring from the iPad onto the touchscreen monitor. The seed looked as though it was raining down from the top of the touchscreen. Depending upon the seed choice, the conditions provided, and how fast the user poured the seed, their score was calculated. The user’s score corresponded to how tall their field appeared on screen. Users could post their scores to a leaderboard at the end of the game, which created a fun, competitive environment.

The remaining interactives were very similar in the user experience. This made the game play friendly and understandable as the player moved from interactive to interactive.

For the agronomy interactive, the user drove an applicator that sprayed either pests or weeds in the field. The material used was chosen based upon the prompted question and field conditions.

The energy interactive had an iPad attached to an FS jug for lubricants. The user had to fill a tank by pouring the liquid out of the jug with accuracy. The liquid choice was based upon a question posed to the user on the touchscreen monitor. When the user picked up the jug to begin pouring, they saw the liquid pouring from the iPad onto the touchscreen monitor. The liquid looked as though it was falling down from the top of the touchscreen into a reservoir.

Lastly, the grain interactive allowed the user to physically move a knife gate that had an iPad attached to the front. Once the gate door was lifted, the user saw a touchscreen monitor behind the inside of the gate. The user had to answer questions on how to properly dry and store grain. . The interface opened and closed with the knife gate, mimicking the concept a slot machine pull. Once the user answered the question, the seed fell from the inside monitor and provided the user with a score.

Just like any project at Iona, we followed our 4D Process. During the Define phase, we created sketches, determined the goals and objectives of the project, identified the desired learning and experience outcomes, recognized the target audiences, and determined the functional and technical requirements. During the Design phase, wireframes, node maps, sketches, the graphical user interfaces and the system architecture were created. There was also a lot of animation created during the Design phase of the project. The animations and visual style were very fun, energetic and rich in their graphical look and feel. Iona worked closely with Growmark to illustrate all of the elements in the interactive such as the crops, pests, products and machines.

We worked with the client to integrate the software and hardware on site so that during the Development Phase of the project, we were working with the actual final hardware needed for the final output of the project.

Adobe Flash was the main platform for the interactives. The software running on the iPads was written in Objective-C using the cocos2d game engine with the box2d physics engine running under the hood. The iPads communicated with the computer using a socket over a WiFi network. During the Development Phase of the project, we conducted usability testing. We collated the feedback from the testing and created the appropriate revisions to the designs and programming efforts.

One of the unexpected developments at the Farm Progress Show was the extremely high level of wifi interference. We solved this problem by installing individual routers at each station.

As a designer, it is a thrill to see users enjoying and learning from your created product. This project combined interactivity and mobile devices in a fun and appealing way that allowed the client to advertise their product and have users learn about the product they provide. Most importantly, there was a noticeable increase in the one-on-one conversations following the game play. The visitors had fun and the level of engagement by young visitors was extremely high.

The following are photos of users with the interactive from the 2011 Farm Progress Show.

2011 HOW Design Conference Recap

I had a magnificent adventure last week at the HOW Design Conference in Chicago. I learned a lot, became inspired and I interacted with fellow attendees, which created valuable connections.

The HOW Conference is the most comprehensive educational event within the graphic design industry, covering business, creativity, design disciplines, in-house issues, software and web/interactive design.

I renewed my creativity, grew my skillset, learned about how to improve client relationships, learned how to improve marketing and branding and thought about the future of design.

Renewing My Creativity

Stefan Mumaw and Wendy Oldfield’s session, Caffeine for the Creative Team: Turning Brainstorming Into Brainsqualling, taught me effective principles that show what brainstorming should and shouldn’t be for a project.

A project’s conceptual outcome can become more successful by starting with impossible ideas and then pulling back on them. People tend to think that creativity is spontaneous. The reality is that it takes time and it is a habit that is learned.

Stefan explained that creativity is all about different perspectives. There needs to be the right number of people in the room so that everybody brings a different outlook. Additionally, it is important for a designer to always bring something new and innovative to a brainstorming meeting. This could be as simple as a link or a graphic example to help bring out creative ideas. Everyone who attends needs to state all their ideas and not judge anyone else’s because they could trigger a different idea.

During the session, we had a chance to work on various techniques for brainstorming that were fun and insightful. Having the opportunity to work with other designers for a few hours allowed me to think from a different perspective about design. Stefan and Wendy have more than 250 activities that can innovate and bring about creativity for a team. They are available at creativestretching.com.

Gael Towey, the creative director for Martha Stewart Living, gave a presentation on her work with Martha Stewart and some of her experience when working with digital publications. I believe that digital publishing is a perfect way to help users learn and the possibilities are enormous for companies to consider. I have been very interested and have begun to broaden my skillset in digital publications.

Gael stated that audiences can start to feel emotional connections through storytelling. These connections are formed through research that is conducted about the target audience.

Gael explained that a magazine is a perfect marriage between words and imagery. I would like to think that is the case of every design. For example, color can be used in branding to convey emotions and as a way to visually organize elements.

Designers need to know how to tell stories and think about how the navigation and functionality can be fun for the user. One cannot just be a developer when creating a digital publication. Designers need to tailor the stories to the functionality.

During the brainstorming and sketching of their publication, Martha and Gael began mapping out the flow and the rhythm of the magazine through reading the articles vertically rather than horizontally. Gael explained that she believes that the Martha Stewart’s digital publications have become successful because Martha was very supportive of the project. One has to invest in the future, Martha told Gael, to be in the future. Additionally, if you care about your staff’s success, you will invest in the future. Martha knew that consumer behavior is changing and that she needed to be part of that change in order for her company to succeed.

Growing My Skillsets

I love that there are so many fonts at a designer’s disposal. In The NEW Web Typography: Where The Sexy Is, Jason Cranford Teague explained that there are more than 150,000 fonts. But do you know how many of those fonts are web-safe? 182, but only 66 come installed on Mac and Windows. Many designers only use five of the 10 web fonts.

I decided that I want to stand out and not use just those five. Since 2010, designers have been able to use .ttf and .otf as web fonts. That means more than 40,000 web fonts are available. A web font allows designers to upload a font file to the server and then place markup in the CSS. Basically, your web page downloads the font from your computer. Jason said that mobile platforms support .otf and .ttf web fonts, which is great when looking forward in web design.

As a designer, the legibility and readability of a font is very important during the selection and purchasing of the font. I learned from Jason that if a serif font is used for the web, make sure the serif itself is thick so that the letters are wider and have a tall x-height. This allows for better readability for the user. In order to have a successful web design, the typography needs to have a high or low contrast with the background, and the color or width of the type needs to vary. Consistent type variation needs to be utilized within the design, whether it is through contrast, scale or font style.

Jason explained that a 12-pixel font online is equivalent to 9-pixel font in print design. Unlike print design, however, fonts need to be larger. However, when making fonts larger a designer needs to remember to use more space for the leading as the font becomes larger.

The future of web design tends to be leaning toward animations using CSS3 transitions. However, one needs to consider bandwidth capabilities in order for it to be successful.

The current trend in design style has become more realistic and three-dimensional. I believe that much of this is due to touch-screen interaction and how the public is becoming more accustomed to it. A user finds the interaction more intuitive if the interface design looks realistic and familiar.

I attended a session that I thought would help with a more realistic design style: Nick Campbell’s session CINEMA 4D In Production. Hands-on training inspired me to try new techniques and skills with logo and interactive design. I learned how I could create 3D text in CINEMA 4D and then bring the text into Adobe Photoshop. I also learned how I can import an Adobe Illustrator file into CINEMA 4D and extrude it in order to create a more realistic 3D form. The files can then be brought into Adobe Photoshop to create realistic 3D designs from CINEMA 4D. I am excited to try out these techniques for my next creative endeavor.

Improving Client Relationships

Designers sell trust with clients, not design. It is important to realize that you are a partner with a client, not a vendor. Designers realize that knowing how to collaborate with clients is important to the success of any project. I wanted to bring back information to Iona that could only help my co-workers succeed alongside me.

David Sherwin’s sessions Making Clients Part of the Design Process and Effective Brainstorming for Designers helped me think about creating outstanding work and bringing back information to help Iona.

Sherwin explained that when clients and designers work together as equals toward a shared goal, a project succeeds. Before implementing brainstorming activities with clients, they need to be tested internally. There needs to be no more than 12 people to a meeting, with the ratio being three clients to one designer. Everyone in the meeting needs to know the goal and the criteria of the project before any design has started. It was refreshing to hear from David that collaboration needs to happen very early on in the project. This crucial endeavor is the reason why Iona has a Define phase to every project. Iona’s Define phase allows for projects to succeed through the creating trust between designer and client and in being able to relate to clients as people first.

Current Branding Practices

Glenn John Arnowitz’s session Marketing Your In-House Department reaffirmed my belief that Iona is at the top of our game in marketing and branding our services and personality. Glenn explains that you need to know who you are as a company and know your capabilities, competencies, strengths and limitations. I believe Iona has done this and that we communicate with each other and with our clients who we are through various methods. For example, we have a mission statement and vision, make our website personal, have a social media presence and create open communication with our client. Life and business are all about relationships. Glenn suggested lunch-n-learns and having clients evaluate projects and services as needed, which we have been implementing over the past few years at Iona.

Looking Forward

The sessions on app design and technologies for the web utilized real-world case studies from a broad spectrum of world-class companies. These sessions assisted me, and thus Iona, to stay current within the industry in design styles that can be applied to all the various businesses that Iona touches. I was able to learn new innovations and how I can build designs around mobile devices, interactivity, animation and typography.

The most beneficial session was David Link’s presentation on Developing Addictive Experiences for the iPad and Other Interactive Tablets. David, from The Wonder Factory, explained that the majority of consumers use apps at home and in bed. They want apps to be simple, fast-focused, fun and relevant.

However, David says that clients want apps to be inexpensive and seen as a way to save their business from print to digital for magazines. His clients are using apps to test out new products and create brand experiences for niche content. It was refreshing to hear that typography is unlimited in app design. It is evident that gestures are now so important and users are closer to a brand than ever before. David provided considerations during the presentation that a designer needs to think about when designing for an app:

• What is the accelerometer and orientation of the app?
• Will the app be free or have a cost?
• Will the app be a curated or aggregated experience?
• Does the app have downloadable or streaming content?
• Do you want your app to integrate with Apple’s core applications? e.g. calendar or maps
• What type of app will you be producing? e.g. game, entertainment, news, productivity, social networking

To create a successful app, designers need to do the following:

Make the app simple, addictive, curated, focused, technologically advanced, socially integrated and personal.

In order to get clients over their fear of new technology, designers need to think about the psychology of the product and convey to the client their findings.

David shared with the audience his strategies when creating application experiences with clients. His company's multiple platform strategy entails the following: requirements, wireframes, brand-specific UI, visual-specific design, functionality and modules.

Overall, when designing for tablets, one needs to design for the finger not the cursor. It takes approximately two pages from the printed magazine for every page design in a tablet. David’s company researches the current magazine similarities to figure out the content of the project. They create infographics and moodboards before the UI design is created. During the UI design, taxonomy navigation models and wireframes are created to show what the page interactions are for the horizontal and vertical layout. They then design what animations and interactivity there will be on each page.

After the design is completed, prototyping is implemented through various means: paper, keynote, motion graphics or on the device itself. David’s company also does a storyboard with the visual design through the creation of a motion graphics piece. They use keynote for a concept demo and prototype to show the design and interaction together. Lastly, they create any changes necessary before moving to the development of the application.

David shared that the skills needed for digital publication generally lie in a print designer with an interactive background, which might be why I am so gravitated toward this medium since I began as a print designer. The skillsets are divided up into designers doing the design work and the developers doing the developing. He believes that the project becomes more successful when the experts do what they do best.

In closing, I think it is important to think about the future of design and interactive media. I was able to renew my creativity, grow my skillset and learn about how to improve client relationships, marketing and branding efforts, as well as the future of graphic design. During David’s presentation, I realized that tablet design is going to greatly influence web design and vice-versa. I believe that the simultaneous combination of TV, web, social media, tablets and smartphones will be the future.

I plan on continuing to grow my skills in all design media, methods and skills, while at the same time remembering that no matter what process, a core designer realizes that they ultimately solve problems for clients through their creativity, skills and passion.

Float Mobile Learning Symposium from a Designer's Perspective

It is evident to each designer that problem-solving is key to their design process. For me, mobile design is a new medium in which I am learning and growing my skills on a daily basis as well as problem-solving. I attended the Float Mobile Learning Symposium last week, which served as a great boost to my mobile learning progression as well as an inspirational event. I was able to connect with colleagues and listen to, and learn from, some great speakers about various aspects of mobile learning. In this post I want to share some essentials that I learned at the event from a designer’s perspective.

Gary Woodill’s presentation on The Past, Present and Future of Mobile Learning allowed a look into the future of all the creative possibilities mobile learning can provide to visual communication. Gary highlighted the work of Metaio, www.metaio.com , a company which is at the cutting edge of augmented reality. I am excited about the potential of how augmented reality can be utilized within the interactive museum field to provide an even more engaging experience.

Josh Campbell, owner of Magic+Might, spoke about multiscreen design strategies. Josh’s presentation had a lot of great material, especially from a designer’s perspective. His main point was that defining as much information about the device and platform ahead of time allows for a smoother design and development process. Josh explained that when designing for different devices, a designer needs to consider the interactive platform, gestural differences and screen designs of each device. He stressed the importance of considering the specific iOS for which you are designing and whether or not it is a retina display. In addition, he pointed out that there are various screen dimensions and resolutions that need to be taken into account for mobile devices.

Josh focused on the layout and gestures of mobile devices. He explained the three main layout areas within a screen design: navigation, content and the detail area. He advocated hiding the detail area when designing with a large amount of content. Josh also discussed three kinds of screen designs: multiplane, grid layout and coverflow. He said multiplane and grid layouts were good for large screen devices but while coverflows are aesthetically pleasing, they should only be utilized with devices that have remote controls. From a television interface perspective, Josh felt it most important to keep controls near the user on their handheld and then have the content appear on the television. He made me realize how much multiple screens could enhance an experience by making it shared to users and how I might leverage multiple screen designs in order to create an innovative experience for a user.

Gestures are also a very important when designing for mobile and Josh discussed some ideas regarding gestures that one needs to keep in mind during the design of a project. During the design phase, designers need to consider whether or not the gestures are direct or indirect interaction and whether swipe, flick or tap is the best gesture to be utilized with the specific interaction. Josh explained that as a designer moves between devices, one needs to reorganize and reinvent. He feels that if you consider the screen size, resolution, the process speed and upgradability for each phone or tablet, you will have a greater chance to succeed.

The main takeaway from Josh’s presentation for me is that the mobile market is fragmented, making it especially challenging for designers. In order for designers to deal with this issue, it is important to narrow down the target audience and client needs during the definition phase of the project. By designing with a benchmark and target audience in mind, your overall project will be more successful. When the client asks for everything, make sure you narrow in on what they really need as a basis and then work from that starting point. In essence, the more tightly focused a designer can be for their target market, the easier their design process will be during the project.

I am always excited to have an Adobe speaker at an event because they have so much knowledge about the software that I use on a daily basis. I undoubtedly always learn something from their presentations. Kevin Hoyt, an Adobe Evangelist, spoke about some new features Adobe CS5.5 is offering in relation to mobile. Within Dreamweaver, there are new sizing guidelines for screen dimensions of various mobile platforms. One can modify their CSS and then preview the CSS on the device of their choice. During Kevin’s presentation, when he showed examples of mobile projects, it was evident to the knowledgeable designer that the visual style for mobile design is highly realistic. I predict that this will change in 5 years or so, once people become more comfortable in using mobile devices. Eventually the mobile design style will become more abstract, but for now, realistic textural treatments will continue.

I attended Dan Pfeiffer’s presentation on development because as a designer, it is important to understand a developer’s workflow. That way I can understand more specifically what happens once I provide my designs for them to develop, as well as be able to help them during the implementation of the design. I learned from Dan that developers have different code that needs to be written for each mobile platform. Developers use a program called PhoneGap that allows them to code for six different platforms. Webkit in PhoneGap allows developers to render the design to appear similar without having to deal with style inconsistencies across the platforms. He explained that developers have some struggles that designers need to keep in mind when designing for mobile. He specifically mentioned that any project is going to be limited by the device’s browser engine so designers need to keep that in mind. He also pointed out that users expect immediate feedback to their interaction. Since I have knowledge of CSS and HTML, I can assist developers as needed with CSS and some JavaScript in order to create animations and implement styling.

Steve Hoober’s presentation was entitled, Avoiding the Heuristic Solution: Creating Inspiring Mobile Design with UX Principles. He had some good process philosophies that I needed to remind myself of as a designer. Steve stated that designers should define, compare and expand their practices to succeed. He advocated something that I’ve learned over the years; that collaboration is important and a team must stick to the objectives. A team must follow the right process in order to find the right answers to the project’s tasks and challenges. Steve stated that no one idea is perfect and one must embrace their constraints. As a designer and a person, I have learned that one must be open-minded to others’ ideas and suggestions because they provide the opportunity to ask questions and view designs from a different perspective.

All in all I felt that I learned a lot at this conference, most importantly that the future is now for mobile learning. No other technology is more accessible across the globe than mobile devices. It is exciting to be in on the beginnings of an entirely new learning platform and I am looking forward to growing my design skills along with the growing and varied needs of mobile learning.

Graphic Designer Attending 2011 HOW Design Conference in Chicago

Heather Ford, The Iona Group Lead Graphic Designer, will be attending the HOW Design Conference in Chicago June 24 through the 27th. It is the most comprehensive educational event within the graphic design industry, covering business, creativity, design disciplines, in-house issues, software and web/interactive design.

During this four-day event of speaker sessions, exhibits, networking and hands-on training, designers are inspired to renew their creativity with the information and instruction they need to support a successful career and continue to create outstanding work. With over 35 sessions ranging from igniting creativity to handling client expectations to using design tools more effectively, this conference not only inspires designers, but also provides them with the opportunity to interact with speakers and fellow attendees thus making valuable connections.

The creative sessions will emphasize innovation while building designs around typography. There will be opportunities for hands-on training using Adobe software products which will provide valuable techniques to allow Heather to broaden her skill set, become more proficient in design software and ultimately learn how to be more consistently creative. The sessions on app design and technologies for the web utilize real-world case studies from a broad spectrum of world-class companies which will assist Heather, and thus Iona, stay current within the industry in design styles that can be applied to all the various businesses that Iona touches. Additionally, the conference vendors will provide resources and supply the newest “tools of the trade” in order for Heather to create better results for clients.

In the past, Heather has also attended Adobe Max, D2W, and previous HOW Design conferences to broaden her horizons and she is looking forward to sharing the inspiration and information she will garner at the HOW Conference with all of Iona.

Understanding the Differences between Designing for Mobile and Desktop Media While Learning the Best Practices for Designing iPhone Applications

As a designer, my job is to solve problems and create a solution for a client. Mobile devices have now opened a door to a different kind of problem solving than with desktop media. I recently read a book called Tapworthy: Designing Great iPhone Apps by Josh Clark. The book is extremely helpful for any designer who is designing for mobile devices, especially the iOS platform. The mobile experience is a totally different user experience. The design elements and layout need to be thought of in a new and different way than with websites, interactive or application design. I highly recommend this book for anyone who is starting to design for mobile. Even though the book focuses on the iPhone, the methods can be applied for virtually any touchscreen smartphone. One of the main reasons I enjoyed this book so much is that Clark described layout and graphical element design, along with providing visual examples to mobile design methods and standards. Through the reading of this book, designers and developers can create high quality apps that succeed in providing great solutions for their clients. I will describe Clark’s information regarding overall considerations for mobile design, the size and touch experience, layout design, graphical elements and overall style.

Overall Considerations:

Clark describes some key elements that designers need to understand and learn when working towards designing a successful mobile experience.

• An app is used to provide a solution for the user: microtasking, location based information and staving off boredom.
• Just like when designing for the desktop, use cases and scenarios should be considered.
• To succeed with an application, it needs charisma, an identity of what makes it different from other applications and you must replenish content from time to time to give it a long shelf life in the store.
• When designing a website companion app, consider how to improve the website, not just rebuild it.

Size and Touch:

Let's face it, one of the biggest differences from designing for the desktop verses a mobile device is that it is smaller and you touch it to interact with it instead of using the mouse/cursor. Clark writes about best practices for the mobile user experience in the face of these considerations. I have listed his main points below.

• Ergonomics are key. Consider how the interface feels to the user. Tap, slide and flick are based upon the life-like realism of physics.
• When designing the screen layout, the primary controls need to be placed within the thumb’s hot zone.
• Consider that it is a one-hand touch experience.
• Organize the layout to fingers and thumb.
• For the iPhone, designers need to make all tap areas 44 pixels or larger to enable easily tapped areas. If designing with a tab bar, it is 49 pixels wide. All tab bar icons should be 30x30 pixels and icons for the toolbar and navigation should be 20x20 pixels. Keeping in mind that a 44x44 area is the standard for the touch size.
• Place primary content at top and navigation at the bottom, mainly the left-hand side.
• To consider both left and right-hand users span buttons to the entire width of the screen.
• Large buttons not only give a clear guidance, but when using them, the users can’t miss tap targets no matter what hand they are using during their experience.
• Keep on screen elements to a bare minimum. Keep the main navigation in easy reach and avoid scrolling when appropriate.
• It is best practice to have no more than 5 icons for navigation in a tab bar.
• Scrolling should be used with caution, but scrolling can be utilized when users are reading a large amount of content such as an article or book.
• In order to deal with large amounts of content on the screen, designers can create different states through taps. Designers don’t have to show all of the content at once. For example, a weather app can display the weather for daily, weekly and hourly through different buttons.
• Make advanced tools hidden. These tools can emerge from the main navigation upon demand, but don’t need to present up front.

Layout:

Unlike web design, users should be able to flip through screens in a straight line, through sets or categories or a neatly categorized collection of information. There are three ready-made navigation models created by Apple that can be used for one’s design, making it easy for designers to have a jumping off point in their design. I am going to describe the three Clark provided below and list the best practices for each of the models:

1. Flat pages

• Apps with a single main screen that are highly graphical.
• These are no-scroll displays, but might have multiple versions of a main screen that one can swipe left-to-right to view.
• Best used for browsing and discovery for the user.
• Has a standard page control at the bottom of the screen for the user.

2. Tab bar

• Buttons at the bottom of the screen that let you switch among the app’s main functions. One can tap a button to jump to a new screen.
• Good for modes of operation for specific features or information for the user.
• Users can only view 5 tabs at a time.

3. Tree structure

• A drill down of hierarchy through categorized options or content. Users can easily go back to the main content.
• Organization and navigation lends itself to list organization.
• Tables can be used for lists in tree-structured apps. Tables present a selectable list of options, index a long list of items for rapid browsing and list and group content details.
• Within tables, there are labels, text views and web views. Labels are for short text, text views are for longer text and web views allows one to view a web page or view the app’s explicit information.

All three of these models provided by Apple can be combined within a single app. Clark explains that designers can use one model to organize the app's primary features and another for secondary navigation. However, it is my experience that it is best to keep the user experience similar throughout the entire app; otherwise, users become confused when switching to another type of interaction during the experience.

I learned when reading Clark’s book that if users have to type, there are different default keyboards Apple provides to the user: ASCII, numbers and punctuation, URL, email address, number pad, phone pad and name phone pad. According to Clark, users do not like to type with a keyboard and prefer to avoid it if possible. Instead, as an alternative, there are “picker” controls that can be used as another option that look a lot like a slot machine. It allows users to choose from a set of options all at once. There are also “action sheets” which are similar to pull-down menus, offering a selection of commands to choose from for the user. The action sheets are modal views, which means that they pause the action and dim the screen behind when choosing the option. There are radio buttons and sliders that can also be used within the design. Clark explains that sliders are good for video or audio and radio buttons are good when creating settings within the application.

Graphical Elements and Style:

Just like other desktop media and methods, designers should sketch, brainstorm and create wireframes of the visual design and user experience before designing with Adobe Illustrator or Adobe Photoshop. I was reassured to read that the creative process is just as important when designing for apps before jumping into development. Just like interactive or web design, once the concept, look and feel and user experience is defined, then development can begin. I realize that some development is created simultaneously during the design phase but the project has to be defined beforehand. There is a formal sketch application offered called App Sketchpad www.appsketchbook.com designers can use for sketching. When I was designing an iPhone application for a client, I utilized some references online when creating my designs in Adobe Photoshop. The beauty of these mock-up examples is that you don’t have to create all of the basic iPhone elements from scratch and the pixel aspect ratios are begun for designers. Here are two helpful links below:
iPhone elements for Adobe Photoshop by Geoff Teehan:



http://www.teehanlax.com/blog/ipad-gui-psd/

iPhone elements for Adobe Illustrator: http://www.mercuryintermedia.com/blog/index.php/2009/03/iphone-ui-vector-elements
There are visual design tidbits that I found very helpful within the book in regards to the overall design.

• Destructive actions should get special treatment, such as being designed using red. As with any design, consistency in the look and feel of navigation will assist users in understanding their experience.
• Unlike web design where there are up, over and down states to buttons, designers need to design in two states: disabled and selected.
• Limit the screen to two bars: navigation and a tab or toolbar
• Consider the personality you want the design to have to the public. Use this personality to shape the design.
• The app icon is the first impression and the most important design element for the app. Icons in general should be clear silhouettes and have little to no detail. It is good to add labels to icons. Make sure it describes the app’s function, interface, name or brand.
• Realistic interface elements invite touch. Use the physical world for graphical elements, but make sure they are relevant to the controls.
• Use everyday objects as a metaphor for the interface. For example, a musical app that mimics the appearance of a piano or a bookshelf for browsing books. The reason for this is that experience informs gestures.

As a designer I always ask the client to tell me how I can create a look and feel that really gets to the core of what one wants visually to a design. Not only do I want to create realism and mimic everyday object, but also how can I create realism that will not cause the files to become overly large for the developer? Clark did just that for me. I have listed them below. I find that a lot of these techniques are very similar to the old web design 2.0 methodologies.

• Bright colors should be used to draw attention to an area. However, they can cause readability problems in bright sunlight due to glare.
• Use custom colors and graphics to custom controls along with textural elements, which will help a realistic look and feel.
• Use Apple’s signature gloss to one’s advantage when wanting to create a gradient effect to a toolbar.
• Clark suggests to only create slight changes to familiar controls to the user such as for chatting replacing a standard dot with a speech bubble.
• The standard elements can be changed with color tints and background images can be added. A designer has to remember that if you tint one toolbar, you have to tint them all consistently.
• High contrast is important. When working with fonts, gray text needs to be avoided against a white background and black is favored.
• The standard iPhone font is Helvetica. Clark states that it is best to not stray away from that typeface. Users can utilize other typefaces in logos and graphics. Serif fonts can be used for large amounts of text, such as an article.
• Organic textures add luxury to the design and should be utilized as much as possible.
• Use a gentle radial or linear gradient in Adobe Photoshop on elements to suggest top lighting or add a light and dark line between elements to create a beveled border.
• Add only a 1-3 pixel drop shadow in Adobe Photoshop to create depth. Color variation with borders can also be utilized to achieve this effect. Similar to web design, drop shadows can be used for text to create raised or embossed for buttons.
• Keep borders clean with sharp outlines. Jagged areas distract the user.

So what elements can a designer change within the interface without creating problems? After reading this book, I realized that it is indeed effective to not create apps that are blue, white with pinstriped backgrounds that are bland. Designers have the option to create interfaces with style and personality just like with interactive or web design. Developers and designers can use Apple’s stock controls and basic elements in conjunction with interesting visuals or add additional graphical imagery. For example, there are standard icons for toolbars and navigation bars, standard search bars with results, and standard tab bar icons. Many of these elements are in the Adobe Photoshop template image seen above by Geoff Teehan. As long as the standard controls are within the application and the design follows the wireframe, designers can make the app look fresh and have the personality desired.

I learned through reading Designing Great iPhone Apps by Josh Clark how to create high quality, polished apps that succeed in providing great design solutions. Experienced designers know the best practices for web, interactive or application design. One can conclude that when learning about mobile design, many of the techniques and methods are similar. However, some are vastly different. I hope this article brought you some insight in designing for a mobile platform from a designer’s perspective and brought you as much excitement as Clark’s book did for me.

Creating HDR Imagery with Adobe Photoshop

I am currently working on a project in which I need to create photographical HDR imagery for an Adobe After Effects animation. After practicing through various tutorials, I decided to combine some of the tutorials that I learned into a process that worked best for the desired outcome. I wanted to share this process with you in case you wanted to easily create HDR imagery within Adobe Photoshop. You can also create these same effects in After Effects if desired. The reasoning behind creating these effects in Adobe Photoshop rather than Adobe After Effects is that it will save render time. I have created some simple screenshots below for reference to the process that I utilized within Adobe Photoshop.

Here are the steps I used:

1. Seen below is the creation of your raw image. Within the layers palette seen here is a foreground image of corn and a sky in the background. One layer is called “corn raw” and the other is called “background.” I will only be referencing the “corn raw” layer in order to create the HDR effect.





2. Next, duplicate the raw layer and put a Color Dodge layer mode on that layer. You will need to also pull down the opacity to about 30-40%. It will depend upon the value of the image.





3. You will then create a selection of the dark values from the raw image layer. You can use the Color Range shadow selection to easily select those values.






4. Next, create a layer mask of the selected, shadow areas. Then turn that layer mode to Linear Burn. (I found it helpful to name the layers according to which layer mode I was using to create the HDR image.)






5. Next, duplicate the raw image and repeat the process from steps 3 and 4. Except this time, select the Color Range midtone values and make the layer mode Overlay. Make sure the Opacity is set to 100 for your layer.






6. Once again, duplicate the raw image and repeat the process from steps 3 and 4. Except this time, select the Color Range highlight and make the layer mode Overlay. Pull down the opacity to about 30-40%. It will depend upon the value of the image as to how much opacity you create.





7. The final output in seen in the foreground corn below. You might need to create some curve, saturation adjustments and modify the selected areas depending upon your image. Overall, it is a quick, simple and easy way to create beautiful images for your projects.