Heather Joy Ford Graphic Designer

GROWMARK iPad and Touchscreen Interactive Design for Farm Progress Show

2011-09-02T12:09:00.000-07:00

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

2011-07-01T14:00:00.001-07:00

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

2011-06-14T11:57:00.000-07:00

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

2011-06-14T11:48:00.001-07:00

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

2011-05-23T06:13:00.000-07:00

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

2011-05-19T17:09:00.001-07:00

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:

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.

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.

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.

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.)

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.

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.

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.

Web Design Content Management and the Design Process

2011-04-19T07:54:00.000-07:00

Recently, I have been designing a great deal for the web. I have been using various Content Management Systems and design processes when creating web designs. The creation of mobile, HTML 5 and CSS3 have suggested to change the design process in removing Photoshop and designing only with markup. I have had the opportunity to design with only Photoshop and only markup. There are benefits and drawbacks to both processes. Currently, I am not leaning towards one or the other. I think it is important to consider the service and budget that the client has requested to determine what methods and tools are used for the project.

The benefit of designing with markup language is, according to Thomas Giannattasio, “HTML and CSS mock-ups require no explanation. They present the final product in the final environment.” I agree with this comment. I have been first creating mood boards and then moving into the layout using CSS and CMS. Moodboards are essential to this process and must be created before any markup. This process is very helpful when a project is low budget and has a short timeline. Templates can be modified and adjusted as needed, which saves time and money. Taking the moodboard and implementing it within the layout shows the client an exact representation of what the design will look like during the development of the project.

However, Giannattasio also suggests that process makes perfect. I have found that I do not have to focus on the markup when first designing with Photoshop. As a result, I can focus entirely on design solutions rather than both design and markup at the same time.

According to Giannattasio:

“Photoshop is vital to good Web design because it extends the process that was started on paper. It gives stakeholders a direct connection to the visuals without regard for the technical execution of the product. In other words, it accommodates visual processing. The designer is given a blank canvas—a playground for experimentation—on which anything is possible.”

However, if I were a designer who did not understand CSS or CMS, then this solution would be detrimental to the development process. With the growth of CSS3 and HTML5, the visual concept a designer creates in Photoshop is much easier to implement than it was 3 years ago. I think every designer needs to work in CSS and CMS. Designers do not have to be a master in development, but it is very important that they understand the development process and know markup language. I have been striving towards that goal for the past three years. Overall, I have found that each tool or method is best utilized when the service the client has requested and the budget of the project are taken into account. Coming from a designer’s perspective, I think the creative process is vital no matter which process you choose. As a result, moodboards or mockups must be created before any markup is produced.

Also, there are two Content Management Systems I have been working in to date: Drupal and WordPress. There are benefits to both systems and the one chosen depends entirely on the end product and service of the client. According to Omar Kattan Drupal has the following benefits:
1. Flexible
2. Open Source
3. Powerful
4. Search Engine-friendly

In addition, WordPress has as its benefits, according to its website:
1. Cheap or Free
2. Very User-Friendly
3. Do It Yourself
4. Multiuser
5. Optimizes search engine results

I have found that Drupal is difficult for the average client to use and understand in order to manage content on their own. If a project is going to be in-house content management, then deciding whether or not to use Drupal or WordPress isn’t an issue. However, many clients find WordPress much more user-friendly and easier to understand.

Based upon my experience, the client requested end product and service determines which CMS or web design process is utilized. And, of course, budget and time are also factors. I am proud to say that I can design using traditional Photoshop techniques using the more recent CSS markup language techniques, and working within Drupal or WordPress. This range of skills is beneficial for myself as a designer as I continue to create web designs.

The Iona Group Launches a New Website

2011-03-07T12:33:00.002-08:00

http://www.ionagroup.com

The Iona Group has launched a new website! Our goal was to create a website that is engaging and informs clients of our creativity and expertise. We are excited with the overall design, functionality, and navigation. We feel that the site represents Iona’s professionalism and strong relationships with clients such as Pioneer Hi-Bred International, The Chicago Museum of Science and Industry, Caterpillar, Tyson Foods, Adler Planetarium, and Shure Incorporated.

We conducted a survey, reviewed the previous site’s Google analytics, and conducted a competitive analysis during the Define Phase of the project. Based upon the website analysis findings, we set out to create a website that was easily navigable, highlighted social networking, and showcased our expertise. Iona is comprised of experts. We showcase this in our new website through the following methods: blog posts, client project examples, seminars, and speaking at conferences. A SWOT analysis was conducted on companies whose services are equivalent to Iona's services. The analysis was based upon the strengths, weaknesses, opportunities, and threats of our competitors. The companies design aesthetic, content, navigation, and functionality were evaluated. The companies evaluated are regionally and nationally located in relation to Iona. Through the analysis findings, we wanted to create a website that has no limits or boundaries with our competition.

There are various visual elements within the website that help us achieve our goals and findings from the analysis conducted in the Define Phase of the project. Iona wanted to create a greater emphasis on case studies, current work, and blog features on the homepage to show our expertise and knowledge through writing and work examples during the Design of the project.

There is a positioning statement on the homepage that informs users of "who we are" and "what we do" through the “process” and “about” links. We are chartering the great work we design and develop for our clients as the main visual element within the website. There are four service areas Iona divides projects into within the website: Event, Web, eLearning, and Exhibit. These service areas provide users with projects to view. In addition, there is a listing of clients that we currently work with that allows users to view projects from that client. Once the user has entered a client project subpage, there is a project description and project thumbnail examples. The user can select thumbnails of video and still images from the project that can be viewed.

We are now using the typeface Helvetica for it’s marketing and branding. The font is legible, sophisticated, and has a large type-family. We are showcasing individual portfolio projects as the core design elements within the website. A more sophisticated tertiary color scheme has been created to convey a more sophisticated message. The layout is easily expandable which will allow the design to stay fresh and showcase our more current work. This is accomplished by the website being developed using WordPress during the Design and Development Phase of the project. In addition, we considered mobile media for the functionality and design of our website. As a result, the website has gesture navigation for the viewing of projects.

As mentioned earlier, we are thrilled with the overall design, functionality, and navigation. We feel that it represents Iona’s expertise, professionalism, and creativity. We look forward to the future.

User Experience Focused Mobile Design

2011-01-02T11:51:00.000-08:00

As a designer, I have learned that every media has particular user experiences that need to be considered. Recently, I have been designing more and more for mobile learning. I have recently read chapters from the book The Mobile Learning Edge by Gary Woodill, ED.D. about creating content and experiences for mobile learning.

Unlike design for interactive media or the web, mobile design and development is very complex and not black and white. There are different forms of mobility, technologies, learners and context that need to be taken into account in the design process. This method reminds me of the beginning of web design. Different markup and designs needed to be created for various browsers. It is my hope that much like web design became easier with the creation of CSS, mobile learning will hopefully one day become easier with more concise changes in the technology.

According to Woodill, the mobile learning ecosystem consists of 5,000 mobile devices, more than 30 different web browsers and multiple input and output choices. As a result, we need to look at mobile learning experiences and content when designing for mobile devices. Woodill lists some targeted end users and their content that a designer needs to consider regarding their end user:
1. Location and setting
2. Movement and posture
3. Device
4. Workloads, distractions and activities
5. User's persona

In addition, Woodill describes different types of mobile learning content:
1. Textually organized: Exposition
2. Telling stories through a narrative: Exploration
3. Sharing and discussing concepts to broaden knowledge base: Elaboration
4. Create new experiences to broaden knowledge base: Exploitation

Source: The Mobile Learning Edge by Gary Woodill, ED.D.

After reading Woodill, I started doing some additional research regarding mobile design and found the following two articles helpful. First, Smash magazine released an article by Steven Snell that lists some challenges of mobile design:
1. Variety of screen sizes
2. User lack of understanding
3. Rapid change in technology
4. Deciding what is essential

Source: http://www.smashingmagazine.com/2009/01/13/mobile-web-design-trends-2009/

So I asked myself, “As a designer, what sort of techniques do I need to take into account when designing for mobile media?" The second article I found was by Alessandra dos Santos from Brazil also described some of these techniques that need to be considered during the design process:
1. An omnipresent menu can´t always be applied. As a result, vertical menus are used more often.
2. Use a lot of negative space and content in the main priority
3. Make links easy to select
4. Consider cross-platform browsers

I’ve also found that icons can be a way to foster visual creativity in mobile design.

Source: http://abduzeedo.com/mobile-web-design

I’m currently working with Digital Publishing Suite for an IPad product related sales representative PDF. Once again, this is new frontier that I have joined and am increasingly excited about the challenges and rewards mobile learning has to offer for designers and agencies.

Design for Mobile Media

2010-10-06T17:48:00.000-07:00

In this ever-evolving industry, I have learned that there are different methods and techniques to every media. More recently, I have been learning various standards for designing for mobile. I attend programming seminars as a designer because it is important for a designer to have an understanding and basic knowledge for programming in order to understand the possibilities and constraints of a medium.

As a result, I attended an online class by Amy Hoy and Thomas Fuchs entitled HTML5 Mobile Pro Workshop that focused on building mobile web apps with CSS. I have a working knowledge of HTML and CSS and own a mobile device. I thought that the class would be a great next step in gaining great knowledge of mobile design. The class focused on mobile media, CSS transformations, the program Canvas and CSS animations.

The class began with an overview of HTML5 by Amy Hoy. She described the reality of mobile design and development being the timely development of custom code (style sheets) for different browsers and platforms. However, developers and designers are learning the best ways to limit different style sheets just as developers have dealt with Internet Explorer when developing websites. Much like when the web began, mobile is always changing and moving.

Amy also explained in the class that when designing a website UI, one must consider hover state and large areas of interactivity. When designing for mobile UI, a designer must learn that there are elements that differ from online desktop websites: hover states, caching file sizes, multiple tabs, and the ability to click accurately in small areas. However, on the up-side, things that are gained on mobile are geolocation, linking to phone numbers, multitouch and pocketablility. As a designer, the multiple gestures and small canvas area are items that need to be evaluated in the defining of the project and functionality.

Hoy said that there are 3 guiding questions for UI design that need to be asked. First, where is the user going to use the phone? Second, where is the user? Third, what can the user do? When designing an application, I need to think about the physical location of the user when using the application, the type of internet and cell phone connection they will have when using the device and if they have the ability to use both thumbs during their gesturing. As a designer, I must consider screen obscuring from thumbs and hands which is very different from a desktop mouse icon.

Thomas Fuchs informed me how HTML5 works and what encompasses HTML5. HTML5 is a family of many technologies: animation, 3D, CSS3, video, offline apps, audio and geolocation. The beauty of HTML5 is that it allows for much more powerful styling with CSS3. When working with HTML5 Webkit browsers are the most flexible since it is open source. However, reality is that connection speeds are unpredictable when designing for mobile. When prepping graphics for HTML5, Thomas provided the following graphic on what is possible on various platforms.

For the iOS and Android, there are some key graphic preparation techniques that Thomas provided that was very useful for a designer. Pixel units are relative to a viewing device. When creating iOS graphics, file sizes for images must be smaller than 10MB, JPEGs should be less than 2 megapixels, and PNGs are great for iOS file formats. For default rendering of fonts, the iPhone 4 uses Helvetica Neue which is a lovely font. The Android does not support animated GIFs and has no subpixel antialiasing.

I learned about the program Canvas and CSS3 from Thomas. Canvas is a tool for 2D bitmap graphic creation. Interestingly, in order for the user to make a 1px graphic in Canvas, they have to create a .5 pixel coordinating system in order for it to render correctly. This program heightened the speed for the user and renders pixels line circles images, etc. fast. However, it doesn’t generate an HTML/DOM overhead file. CSS can be used to create visual design elements to assist in performance speed and graphic preparation. CSS transforms take fully rendered elements rotates, scows or scales an element; CSS Transitions can smoothly animate CSS properties from one value to an other, including sub-properties; CSS Animations smoothly animates CSS properties between keyframes of the animation. Since I also create video and motion graphics, I learned that when compressing video for mobile devices, a designers need to use H264 for iPod setting.

Source: http://html5mobilepro.com/
To learn more you can visit Amy Hoy’s blog at:
http://slash7.com/about/

D2WC Conference Recap

2010-06-23T17:16:00.001-07:00

d2wc.com

I recently attended Kansas City's first D2WC Designer/Developer Workflow Conference. The conference not only emphasized workflow but also skills and philosophies around design and development. I attended sessions that focused on CS5, JavaScript, design philosophy, integrating art and code, prototypes, and mobile design.

The first session I attended was the keynote by Doug Winnie. He emphasized the new Adobe products that assist in designer and developer workflow. Adobe’s CS Review enables designers and developers the ability to post files for client feedback and create comments for internal reviews. Users can post web-links and it provides easy client access online. This program keeps comments in one area and enables comments to be more specific. For example, the person receiving feedback can see comments highlighted in Adobe Illustrator or Photoshop, which creates clarity for the designer. Doug also discussed Adobe’s Flash Catalyst, which works well with Illustrator or Photoshop and enables file transfer to be much easier from designer to developer. Adobe’s Workflow Lab Beta 2 can track how a project evolved and how to make adjustments for the next project. It is a way to plan workflow that adds tasks based upon each designer's or developer’s visual discipline requirements. This program can have assets work together and creates paths of where files are on the network. I like that this program shows what everyone on the team is currently working on and what tools they are currently using to create the project.

The next session I attended was Kevin Stohlmeyer Fast Web Design with Adobe Creative Suite. c2gps.com I learned that the new CS5 Fireworks allows designers to save out CSS files along with HTML and instructs how to create Adobe Bridge Output to Web Galleries for professional design reviews with clients. Seb Lee-Delisle's "Killing the “transition” – True integration between art and code" was inspiring. pluginmedia.net He was a wonderful speaker and very charismatic. Collaboration and prioritization are key to a project's success. His discussion on workflow made it very apparent that designers and developers need to have a shared workspace that has file version control. Through using templates that are worked on by designer and coder up front, the designer can solve visual problems independently. In the hallway of his office, he has a physical chart where designers and developers can place post-its of where they are currently at with their individual milestones for the project. For example, “waiting,” “in progress,” and “complete” are written down along with the hours it will take to finish the task. There is something very powerful about having a physical object that one must write on and that is placed on the wall for all to see.

Chris Griffith’s Practical Design and Development with Flash on Mobile and Devices was informative, discussing how to design for mobile technology. chrisgriffith.wordpress.com I learned that it is better to start all UI design in a vector rather than bitmap format, 8 bit PNGs are the standard graphic choice when saving out files and that gradients often have banding.

Rob Huddleston Adobe Flash Catalyst and Flex for Designers emphasized how there is currently complete “round tripping” from Illustrator to Catalyst but not from Photoshop to Catalyst. robhuddleston.com The beauty of Catalyst is that one can remove all of the assumptions of what things “have to” look like and don’t worry about positioning. However, Catalyst is a resource hog and is a fixed size; it is a 1.0 product so one has to keep that in mind. One must design for interactivity, animation and video, but remember to not overuse interactivity. As with any project, Catalyst requires users to stay organized, use a naming convention, keep the naming consistent, layer names with underscore and create outlines for text with uncommon fonts that are non-dynamic.

Next, I attended Ryan Jeffords-“JavaScript Libraries for Designers and Developers.” epicenterconsulting.com I wanted to learn more about JavaScript and Ajax in order to fully understand what kinds of constraints there are and what the possibilities can be for endless creativity. In a nutshell, Ajax enables one to do two or more things at once. It is important for designers to be able to properly prototype/design and indicate JS functionality. One of its core features is page searching and modifying specific elements on the page. Another is event handling and binding, which locks code to an event. The developer is in charge of what can happen on the page, e.g. a rollover that has a pop-up. Triggering allows developers to fire events whenever desired. One can program things to happen vs. not, e.g. checking a box without actually checking the box it checks when you hit another button. Ryan emphasized that Ajax changes everything we know about the web. It gets data without telling the user or can tell the user it is getting data. For example, Mac’s spinning beach ball. jQuery UIs provide a comprehensive set of core interaction plug-ins, UI widgets and visual effects that use a jQuery-style, event-driven architecture and a focus on web standards, accessibility, flexible styling, and user-friendly design. Ryan emphasized that the sky's the limit, use pen and paper to start with and then create a prototype and wireframe. Listed are some useful website that Ryan provided: jquery.com, jqueryui.com, prototypejs.org, and sencha.com.

I think what I get the most excited about when attending conferences is that I have the ability right when I get back into the office to start forming and creating the techniques and methods I have learned. It is wonderful to see that once they are put into practice, they work. It is amazing what one can learn in just two short days. I think this philosophy by Vince Vaughan is for many things in life: “Think about the outcome you want to produce and design for it.”

The Alder Planetarium Iteractive Design and MSI Science Storms DVD Design

2010-04-28T10:40:00.000-07:00

It is very important that a designer grows and develops at every moment in their career. When I began my career as a designer, my media knowledge was limited to only interactive design and print. Over the past three years, I have become knowledgeable in compositing, motion graphics, DVD authoring, compression, video editing, and web design and development. Recently at Iona, we completed two projects that really helped myself and the team advance our skills.

First, The Adler Planetarium Planet Xplorers exhibit recently opened as a permanent exhibit in Chicago. The Iona Group supplied all audio visual and interactive elements for integration with the design by Kraemer and Associates and fabrication by Murphy Catton. The Explorers Club exhibit is a high-energy, interactive experience with the educational goal of teaching children ages 3-8 about exploration that is happening all around them and its connection to their everyday life as well as to explore space. I was able to help create, design, composite and edit some of the interactive exhibit’s videos and Flash elements. This project allowed myself to advance my video and interactive design skills through the challenges of video integration into Flash.

Secondly, The Iona Group developed a DVD that would extend the experience of the physical Science Storms exhibit that has just recently opened at the Museum of Science and Industry (MSI). This type of DVD format allows the Museum guest to have an inside look at the exhibit, sparks memories of the exhibit and its “wow” factor and also allows someone who was not able to visit the exhibit to still have a dramatic and compelling experience. I created the graphical user interface design, DVD authoring, jacket design and motion graphics for the DVD. The DVD includes the making of the exhibit, how they built the exhibit, the exhibit media, facts about the exhibit and scientist interviews. I treasure this project because it provided me with the opportunity to learn a new media (DVD authoring), allowed me to advance in my interactive design skills, challenged my motion graphics skills, and re-live my print design days.

I believe that if a designer has the drive along with design and fine art skills, they can achieve any media. I plan on growing and continuing to achieve in these skills for many years to come. Below are screenshots of the Adler Planetarium interactive designs and the MSI Science Storms graphical user interface design from the DVD. I also have included the MSI DVD jacket design.

The Iona Group Launches Mobile Learning Solutions

2010-04-05T10:35:00.000-07:00

The Iona Group recently launched a new website for their mobile learning solutions. Below is the link to the website.

floatlearning.com

What is mobile learning you might ask? Iona defines it as the following:

“mLearning is the use of mobile technology to aid in the learning of, reference of or exploration of information useful to the user at that moment or in a specific use context.”

The website describes how Float originated and the basic concepts that originated their key services. The key services that Float offers are:

Diagnostic
Strategy
Prof of Concept
Prototyping
Development

If you are interested in contacting Iona about their Float services, please click on the following link:

floatlearning.com/contact

Innovatively Creating a Culture of Sustainability through Interactive Design

2010-02-04T17:37:00.000-08:00

The Iona team and myself as the Lead Designer recently completed an interactive design for Richland Community College’s Center for Sustainability and Innovation Building (CSI Building). The interactive was to convey key concepts related to the green CSI Building and its use of SMART building technology. The Iona team of Jeanne Foster, Mark Tovey, and Jeff Idleman brought their expertise to the project. Having such a great team allowed Iona to achieve a successful solution to the client’s needs on the Define and Design phase of the project. The “big idea” of the project was to create a sustainable, innovative community-regionally through interactive media.

The two key points and objectives of the project were to demonstrate how the CSI Building meets the LEED criteria. In addition, it was to demonstrate some of the career skills and people who worked together to make the CSI Building. The client was very adamant in having a “wow” factor. We created the following milestones to meet the client’s objectives:

•Strategic Plan – Define the purposes of the interactive, identify key messages to be developed, identify the communication goals to be achieved, identify the audience, define how the new programs will support Richland’s long term goals, identify the results expected from the interactive and how they will be measured.

•High-Level Design – Determine conceptual design. Identify narrative story lines that will be developed. Identify the “look and feel” that should be used. This will include: fonts, color and other graphic standard issues; music, narration, screen composition, navigation, user interface styles, etc.

•Content Outline – Define project content and assets and how they will be formatted for these presentations.

•Navigation Outline – Organize the content and outline a navigational structure.

Iona suggested that Richland Community College would use higher media production values and enhanced interactivity to increase the dramatic impact of the display. This approach will add video commentaries by virtual guides to increase the human aspect of the interpretation. In addition, this would be complemented by allowing visitors to manipulate high-resolution images of certain key features by dragging the images with their fingers and zooming in for greater detail. The project will be created in Flash and will use CMS plug-ins for the image manipulation interaction. In addition, the project will use Flash video to provide testimonials and key green features of the building.

Overall, the project was well received and gave Iona the chance to really use our 4D Process to its greatest achievement. Below are some of the Graphical User Interface Designs from the project.

Iona's New Collateral Design

2010-02-03T16:00:00.001-08:00

I think it is good for a designer to go back to her roots. I recently have spent much of my time designing interactives, editing video and creating motion graphics. I think when anyone breaks the pattern from the current media they are working on, it can help foster creativity. Recently, The Iona Group has begun redesigning some of their collateral materials. Being the Lead Designer at Iona, I accepted the challenge. I created a new design that corresponds to the current branding. The Iona Group has always had a simplified, geometric look and feel to their design. The classic simple-to-complex design philosophy is portrayed in Iona’s identity. The design shown here mimics how simple shapes can create complex forms. In geometry, a dodecahedron is any polyhedron with twelve flat faces, which results in a simple shape that creates a complex form. I took this concept and created Iona’s 2010 success factors as a three-dimensional infographic. The infographic describes the success factors of the year based upon Iona’s 4Cs (clients, company, coworkers, community). I wanted to create a design that was fun yet cohesive in order to represent how all of the 2010 success factors are equal and rely upon one another. I also have included below some additional collateral that I have created for a proposal cover. I wanted to create depth to our new collateral by not only creating a three-dimensional object but also through subtle gradients. Look forward for more to come.

Bradley University Year at a Glance

2009-12-19T05:44:00.000-08:00

This year I taught Introduction to Interactive Media at Bradley University. As each year progresses, I always have some driven students who exceed expectations on all of the projects. I have a few examples from some of my exemplary students below:

One of the project's criteria was to create a composition using Adobe Photoshop to design a CD cover (just the front cover). The cover could be for an existing recording, or make one up. The design had to include text effects created in Adobe Photoshop, scanned objects and artwork.

Another project's criteria was to create a self-portrait using Adobe Illustrator. Starting with a photograph, the students had to use vector-based graphic and text elements to recreate the image, giving the viewer a little more insight into the person they are and who they portray themselves to be.

The final project of the semester was for students to create their own personal website. Many of the students used a combination of web techniques. The students had to use Dreamweaver and CSS. Here are some examples of the websites that the student’s created:

http://justinrestaino.com/
http://www.silvernewedge.com/

In addition, Bradley University recently launched a new Curriculum program. The program specializes in three different program areas. These three areas will be available as different concentration for Interactive Media majors.

Animation and Visual Effects – the production of digital character animation and visual effects for film, television, animation and game cinematics.

Game Design – the design and media elements of console, computer and mobile games and the production of games.

Web and Application Design – the creation of rich Internet rich Internet and mobile applications, experience design and web development.

http://slane.bradley.edu/interactive-media

I look forward to the next semester, knowing that the students will continue to exceed my expectations.

2009-12-02T18:34:00.000-08:00

I recently designed and created the graphics for a music video that was shot for the local musical talent Bob Krouse. He is a cowboy balladeer music star that is trying to break it big into the music business. The talented Jim Conover of Sand Prairie Productions from Peoria, Illinois directed the video. The video was filmed and edited here in the local Peoria area by Reality's End Films. The video was shot on a set that was built by Sand Prairie Productions. I used Motion to create the title sequence graphics. The visual effects within the video used stop motion techniques along with ghostly fading edits.

On the left is a picture of the set along with some of the stunt men, actors and Bob singing in the background. In addition, there is a sample of the DVD case cover design that I created for Sand Prairie Productions.

To hear some of Bob's music you can go to http://alonetone.com/bobkrouse10/tracks.

Recently, the music video was created on a DVD that was delivered by hand to Brad Paisley so we'll see what happens. Pretty cool to think he saw some of my work:)

(photo and graphics © Sand Prairie Productions and Bob Krouse)

Bookbinder The Movie

2009-10-20T06:02:00.000-07:00

The locally produced film "Bookbinder" opens Friday, October 30, 2009 at 7:00 p.m.with discussion/Q&A to follow. The movie is based on the ghost tale about a man named "A. Manual Bookbinder" from the Peoria State Insane Asylum. His story is finally brought to life in all its creepy glory. Based on a true story that took place at the Peoria State Asylum for the Incurable Insane from 1906 to 1911 and its haunting.

So is the old Bartonville hospital really haunted? Scores of people who have visited the place certainly think so, including experienced investigators. It certainly has more than enough opportunity to be haunted, even excluding the story of A. Bookbinder and the haunted tree. The atmosphere of the place alone is more than enough to justify the reports of the apparitions and strange energy encountered there. The residual impressions of the past would certainly be strong in a building where mentally ill people were housed and where "psychic" disturbances would be common. There is also the matter of conscious spirits. Hospitals have long been places where the spirits of the dead are said to linger. Besides that, the hospital was the only home that many of the patients knew and they are going to stay where they are the most comfortable. (source: http://www.prairieghosts.com/barton.html)

I helped out a very small amount on the film. Mostly, I was encouragement:) The donations go towards the current Bartonville hospital grounds and building. Please come check it out!

For more information on the film visit: http://www.peoriatheater.com/peoria_theater/Now_Soon/Entries/2009/10/30_Bookbinder.html

How to Throw the Digital Lariat While Herding Cats Presented by Iona Group

2009-10-13T07:06:00.001-07:00

Myself and my coworkers will be speaking at a Peoria Ad Club event. Here is a brief description with the location and time.

The Iona Group engages with a wide variety of clients using the latest communication strategies and technologies. Join us for a discussion of trends in digital advertising, audience engagement, and online strategy. The Iona Group will share their recent work and research and development; including killer wireless robots, eye bulging video installations, incredibly sticky phone applications, and websites that will make you scratch your head and wonder, how?

Date: October 14, 2009

Time: 11:3oam

Location: The Waterhouse at 619 SW Water St., Suite B in Peoria

http://www.peoriaadclub.org/index.php?option=com_content&task=view&id=16&Itemid=55

2009-07-29T20:34:00.000-07:00

Over the past month, I have been taking a life drawing class at the Peoria Contemporary Arts Center. I believe that practice drawing can make one a better designer. It allows you to have an eye for detail, understanding balance on a page and an object’s light source and perspective. I have been spending so much time in front of the computer lately that I wanted to force myself to take a pencil to paper each week. Drawing is a means of quickly communicating an idea or concept. For example, drawing a sketch allows one an ability to explain a visual concept or idea to a client or coworker. This is very beneficial in the design process. I use drawing as a record of ideas, concept development and I believe it helps with problem-solving skills. When I have to illustrate or edit a photograph, drawing skills help me create better results by knowing how to correctly manipulate a Photoshop image or draw an illustration in Illustrator. Just like designing on the computer, drawing is evidence of thinking. No matter what the project, I always find myself coming back to my drawing as a means to an end.

L. Brent Kington: Mythic Metalsmith

2009-07-06T05:57:00.000-07:00

This weekend I visited the Lockport, IL museum to see the work of sculpture artist Brent Kington.
http://www.museum.state.il.us/exhibits/brentkington/

The exhibit, featuring objects borrowed from private and museum collections, revisits Kington's early cast silver and bronze toys he made for his children in the 1960s, his pivotal pieces of forged iron and steel from the 1970s that transition into blacksmithing, and ultimately to his larger, contemporary abstract sculptures presenting us with crosiers, spires and crescents. Spanning four decades, the selection demonstrates the breadth of his work in scale, materials, and subject. Decorative toys of silver and bronze just two inches in height are shown with intuitively-balanced kinetic weathervanes forged from iron and steel and alongside towering crosiers and spires—some almost 8 feet—which incorporate metal, stone, wood, and paint. As a whole, the objects illustrate the logical progression from the playful to the ritual, inviting the viewer to define the nature of that duality on an individual basis. (from http://www.museum.state.il.us/pressroom/index.html?NPR=697)

I found the exhibit very inspiring in that he started out as a cartoonist and then became a blacksmith artist. I myself have been taking life drawing classes for the past month and have found it very beneficial to my work. Often as a graphic designer you spend your time in front of the computer and limit the time you spend with your fine art skills. I have been balancing learning new Motion graphics programs, such as Motion, while revitalizing my drawing skills. This class has been able to force me to make sure I keep up those skills and not loose them along the way.

The Iona Group 25 Years of Exceptional Creativity

2009-06-28T05:56:00.000-07:00

This weekend the company that I work for, The Iona Group, had a picnic to celebrate their past 25 years of exceptional creativity in business. The entire company put forth a great effort in preparing for the picnic. It is very exciting and memorable for a company to be recognized for their many, many years of service. It is the years of hard work and wonderful employees that helped make it possible. Overall, it is a great accomplishment for a company to be successful for so many years and many more to come. Congratulations to Iona!

Computer Illustration

2009-04-27T07:32:00.000-07:00

This is a new illustration I created over the weekend using Illustrator and Photoshop. I have been interested in creating drawn sketched elements by hand and then scanning them into the computer to make them vector. However, for this piece I created it completely on the computer. It’s a great way to keep drawing while also using the computer. I have a series of these feminine drawings that I have created and evolved over the past year. Hope you like the most recent addition.

Ecofont

2009-04-14T05:59:00.002-07:00

http://www.ecofont.eu/ecofont_en.html

Ink cartridges (or toner) could last longer. As a result, the company SPRANQ developed an ecofriendly font. Here is the link to download the font as a TTF. It uses 20% less ink when you print. The Ecofont was created by omitting parts of a letter using circles. At the shown size, this obviously is not as adaptable, but at a regular font size it is actually very usable. The only downfall is that it is only in uppercase. Naturally, the results vary depending on your software and the quality of your screen.

Photography Show at ISU

2009-04-05T17:59:00.000-07:00

I think it is very important for an designer to make the time to go to fine art exhibits to keep their creativity and motivation in tact. I went to a wonderful Fine Art Photography exhibit at Illinois State University. The exhibit was for BFA photography student Michael Prault. He is a photographer who is combining sculptural materials with his work. His exhibit title is "Normalady" which is a play on the words "normal" and "malady". The concept of his work is how his memories are from bits and pieces of his visual impressions along with how his subconsciousness instinctively drives his choices within his work.The exhibit at the University Galleries (Center for Visual Arts Building) Gallery 2 and lasts until April 13th.

Typography Applied to the Web

2009-03-11T15:13:00.000-07:00

The website http://webtypography.net has wonderful information on CSS typography and how it applies to the web. The topics focus on type rhythm and proportion, horizontal and vertical spacing, blocks and paragraphs, and hyphenation and pagination. There were a few items I wanted to highlight that can really help tighten one’s typographical web design. Enjoy!

1. The designer should size text using the em unit since it is a true typographic unit and is recommended by the W3C rather than pixels.

2. Paragraphs can be indented using the text-indent property. To set a paragraph to flush left, the text-indent should be set to zero:
p {
text-indent:0 }

3. To set text justified or ragged, the designer sets the CSS text-align property, as follows:
p {
text-align:left /* ragged right */ }
p {
text-align:right /* ragged left */ }
p {
text-align:justify }

4. In justified text, the evenness of word spacing and frequency of hyphenation can be difficult. One should set their text ragged right to lighten the page when using multiple column. In addition, sans-serif type looks better when set to ragged.

5. Just like in print layout programs, such as Adobe InDesign, the designer can specify the minimum number of characters in a hyphenated word before and after the hyphenation character. For example:
blockquote {
margin:1.5em }
p {
hyphenate-before:2;
hyphenate-after:3; }

6. A designer can also insert a page-break before or after a specified element. For example:
h1 {
page-break-before:always }
.section {
page-break-after:always }

2009-03-08T19:37:00.000-07:00

I've been wondering if there was something that expands upon Kuler and Colour Lovers is the answer. If you need a little creative inspiration or ideas then you need to visit http://www.colourlovers.com/. This website provides color palettes, patterns, trends, etc. in design. There are many moments when as a designer I need to search for a innovative web or print cover design and this website provides that option. It has blog discussion that range from trial face paint to pinball machine design. Color is such an important and vital role to any design that it almost isn't its own entity to a composition. Without color, sometimes the design seems lifeless.

The Iona Group Wins Addy Awards

2009-03-02T15:10:00.000-08:00

The Iona Group won 6 Silver Peoria Addy Awards among others on Friday night for their work on the Morton Economic Development Council Website, Bradley University Gala, Black Creativity Green Revolution Video, Bradley Basketball Area Intro Video, Bradley Basketball Are You Fan Enough Commercial, and the Bradley Braves Arena Intro Video. In addition, Steve McNair and Scott McCormick (the founders of the company) were awarded the Award of Excellence for their wonderful leadership and work. Each year the Peoria Ad Club has judges choice awards that are announced the night of the awards banquet. Iona won a judges choice award for the Bradley University Gala. Congratulations to Iona and all those involved for their tremendous success at this years Peoria Addy Awards. www.ionagroup.com

My Personal Artwork Examples

2009-03-01T13:29:00.001-08:00

Tim Kowalczyk

2009-03-01T13:11:00.000-08:00

My friend Tim Kowalczyk is a MFA Sculpture graduate at Illinois State University. His work is very innovative and inquisitive. You can check out his work at timkowalczyk.blogspot.com. Here is his artist statement: "Cardboard boxes are metaphors for containers of human memories. Made from clay, the cardboard boxes show the longevity and frailty of each memory. Indicative of the memory the box holds, it is shelved and stored only to be opened again. Each memory, handled differently, can be ravaged and even lost by time and feelings. The fragments of the memories left behind are protected and even hidden by the simple cardboard box. Every box is kept waiting to be remembered at a different time and in a different place."-Tim Kowalczyk

MM113 Student Work

2009-03-01T13:04:00.000-08:00

I teach a class at Bradley University called MM113. I am continually impressed with the work I am receiving from all of my students. There latest project was a CD cover design. They could chose any musical group they wanted. I have placed an example from Brandon Scott of his CD cover design. It is of his own band in which he is a member. My students next project is to create an audio piece using Garage Band. I will keep you updated. The Bradley University Multimedia program is wonderful and this artwork is just one example of the talented students that it encompasses.

About Me

2009-03-01T07:01:00.000-08:00

Lead Graphic Designer 2005 – Present (4 years)

Designs and produces art using design software for visual communication media including (but not limited to) print, video and web media. Designs for print and multimedia and creates graphical preparation for print and multimedia. Iona creates exhibits, websites, videos, employee training software, and many more programs which allow our clients to educate and engage their intended audience.

The Herald & Review

Graphic Layout Artist 2003 – 2005 (2 years)

Magazine and Various other Tabular and Newspaper Inserts. Created and conceptualized an entire magazine design, illustration, and layout monthly.

Education

Illinois Institute of Art

BFA, Bachelors Fine Art in Visual Communications 2001

Dean's List and President's List 4.0 av. Focus on Graphic Design and Multimedia/Motion Graphics

Activities and Societies: AIGA

Honors and Awards
Adobe Level 1 Certified in Final Cut Studio Pro Adobe Skin to Win Challenge Winner http://scalenine.com/blog/2008/10/16/and-the-winners-are/ I was the lead designer on the Tyson Website project that won a 2008 Addy Award for The Iona Group

I was the lead designer on the Morton Economic Development Website project that won a 2009 Addy Award for The Iona Group

How Design Conference Attendee
2006

Adobe MAX Attendee
2007
Teaching Experience
Bradley University Multimedia Department 2009