The 100 show is an annual, juried competition that awards the top 100 pieces (or less) of design in the city and region. Winners are selected in five categories including Graphic Design, Illustration, Photography, Interactive Media and Motion Design, all of which include both professional and student work.

3 Awards for 3 great 2011 projects

The 2011 panel of esteemed judges include David Kampa of McGarrah Jesse in Austin, TX,  Michael Cina of Cina Associates in Minneapolis, MN and Justin Fines of Brand New School in New York, NY.

The lucky winners:

• The Mayan Cafe
• Floyd Memorial Hospital
• VIA Studio- for our fancy letterpress business cards

To our wonderful team: Good job! To our wonderful clients: congratulations!

I’ve gotten frustrated in the past with design competitions that are too print focused. Print judges usually pick web design pieces that are shiny and pretty, but don’t actually take into account user experience design or the process of creating a content rich website. The only way to remedy that, hopefully, is to keep doing strong work and submitting it to local and regional design competitions.

Submit your entries, and we’ll see you at the preview show on October 20.

The most common uses of arrows on the web and mobile are:

• Pagination
• Indication of a link
• Video play buttons
• Calls to action

The right-facing arrow has grown to be the chosen symbol for “if you click here you will go somewhere”, usually referencing the copy preceding it or the image nearby, like a street sign. In the case of a play button of a online video, long before the internet was widely used, the right-facing triangle was a widely accepted as the symbol used on every VHS remote control, so it just made sense to continue its usage. I have no idea who decided the right-facing arrow next to a link was the way to go, but the logic works.

If you visualize the web as a series of crossroads that you select to head off down a path to get your destination (content), a sign with an arrow that indicates a turn makes sense to indicate how to get there. You may only be making right turns to get there, but direction is arbitrary when talking about the abstract idea of a web.

Another use case, arrows for pagination, allows a designer to replace words such as previous and next with visual interesting, easily comprehended symbols. These symbols guide directional movement through a list based on the given that most cultures read from left to right. It’s clear that the usage cases of these symbols have simplified interaction for users while adding a visually stimulating asset for designers to manipulate.

Default Shapes in Photoshop

Although powerful, an arrow usually can’t demand much of the overall design time. Luckily, there are a lot of resources for repetitive use shapes like arrows. Designers using Photoshop have access to a default set of arrows. Photoshop’s shape palette are easily editable using points to adjust to your desired shape.

There is also a vast collection of stock arrow illustrations and fonts containing arrows available for download on the internet. With options galore, designers still tend to use the same arrows or slight variations of the same arrow over and over, myself included. With an urge to harness the power of arrows and not feel like a broken record, I set out to collect a set of arrows that work on some well-designed sites and add to my arsenal for future projects.

I found that most arrows commonly used fit into 4 shapes: a simple triangle, a triangle (head) with a protuding line (shaft), single angle quotes and double angle quotes.

Here are my favorites:

pinterest.com

marthastewart.com

magentocommerce.com

tnvacation.com

foodzie.com

sasquatchfestival.com

premiumpixels.com

path.com

methodandcraft.com

livestrong.org

Google Calendar

adaptivepath.com

tnvacation.com

cnn.com

We recently launched the Mayan Cafe’s new website. Something that we discovered while building this website was the ability to use the exported OpenMenu XML file for your print menus, using Adobe InDesign. The big win here: you’ll never have to re-enter or format the menu data again. Once the initial files are set up, just update your OpenMenu online, export the XML, import it into InDesign, and print.

The basic outline of this Tutorial:

• Intro to OpenMenu & XML
• Creating a Flow-Based layout in Indesign using OpenMenu’s XML structure
• Using XSLT to rearrange the information in the XML file.

One of the great successes of the project was the help that we were able to provide with improving the client’s internal menu production processes. Menus are, not surprisingly, an important marketing piece for a restaurant if they are promoted effectively, but maintaining them has traditionally been a huge challenge on the administrative side. One of our internal goals was to vet this process and improve it, for the web and for the actual print pieces. (See The Oatmeal’s beautiful comic strip on how horrible restaurant websites can be for why we though the web part was so important.)

* The XSLT segment references this linked XSLT file. Feel free to download and use if you’d like.

I hope you enjoy this tutorial. I had fun creating it. VIA Studio is happy to consult on any restaurant website design project you may be interested in. We’d love to scrub all the (entirely) Flash based restaurant sites off the planet!

~jason

As a bit of background on the method that we’ve found works best for us here at VIA, I’ll present to you my workflow when we sign on a new client.

Meeting the Client

As the designer, I’m not typically brought into things until they’ve signed on & we’re ready to kick off their project. I like to go in at this point to meet everyone, to get a feel for their personalities and talk to them a bit about the goals they have in mind for their web presence. What is the point of this project? To sell widgets, to have credibility in your industry, to get people to sign up for this or that or maybe to get them to walk into your store? There could be any number of answers to this & this is a very very important thing to understand before I get started with their Information Architecture.

Information Architecture

At this point, I will take the copy that has been written and the navigation that has been roughed in and I tear it apart. I move this here & that over there and I’ll try to come up with the best way to present the information to the end user. What will be a callout or in the footer instead of in the main navigation? What can I do to make the site structure more simplistic? How can I get the user to the call of action that the client desires in the most elegant way possible? This part is usually a lot of sketching and erasing & arrows pointing here & there all over their site outline. Once I have this worked out, I’ll take it to my Creative Director to work through some more & make sure I’ve got all angles covered.

What comes next?

Depending on the complexity of the site, I will either do a functional wireframe (xhmtl & bare minimum css with blocks & text and no styling) or I will work it all out as boxes & text in Photoshop. That will go back and forth a few times with the boss & once that is settled…finally…it’s time for the design aspect and I find myself in search of inspiration, yet again.

Finding Inspiration

After 11 years of interactive design I still feel like I don’t know where I get my inspiration. It’s not something I have rules for or a set plan of action regarding. I’ve tried a lot of advice from experts in the web design industry and I’m sure I’ve picked up some tricks from some great sources along my way but inevitably I end up just winging it.

Sometimes I do sketches, sometimes I look through books, sometimes I surf stock sites or flickr, sometimes and probably most often it hits me when I’m not looking for it. For instance, yesterday I had just finished my yoga class & was lying there in the last savasana, my mind wandering here & there while I tried to focus it on nothing rather than something & a prototype I had been working on popped into my head with the problem area worked out nicely. I held it in my mind for a bit so I would remember it & then let it go. This morning when I got into the office, I hammered the finishing touches of the design out. I love it when that happens! Maybe if that were a consistent result of doing yoga I could get VIA to cover the expense. I’ll work on that and get back to you.