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

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

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.

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.

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.

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)

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/Home/Entries/2009/10/30_Bookbinder.html

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

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.