PORTFOLIO UPDATE  |  APRIL 2012

 

Occasionally I forget that the reason I created this website was to display my creative work, and showcase projects that I've had the privledge of working on.  That being said, here's a couple of projects that I've completed in April 2012. Many of them were a collaborative effort with fellow designer / illustrator Matt Low.

 

 

Sarah Byrne - Professional Makeup Artist

(Website Design)

www.sarahbyrne.ca

 

When Sarah approached me to recreate her online portfolio (the original was done in flash - enough said), I was delighted to help.  She desired a clean, modern layout with plenty of room to breathe, and was hoping to have the new site online as soon as possible.  Her portfolio was so impressive that it made my job easy!  We designed a contemporary layout that wouldn't overpower the photos, and went from concept to completion in three short weeks.  Sarah's site was a great candidate for Adobe's new software "Muse", and using Muse was the key to designing the site so quickly.

 

 

​

Triceratops Brand Logic - Logo Design

 

With a powerful business name like Triceratops Brands, we wanted to design an equally powerful logo with impact and visual strength. Often it's best to avoid creating graphics that are a literal representation of the business name, but in the case of Triceratops, developing a stylized graphic of the three-horned prehistoric dinosaur was fitting for their business model (and... it was fun).  A big thanks goes to illustrator Matt Low for his help on this project!

 

​

 

 

The Main Dish - Takeaway Bag

 

Here's a quickie - a takeaway plastic bag for The Main Dish.  Killer mockup and design.

 

​

 

 

​

 

PLACING A PSD IN ADOBE MUSE   |  VIDEO TUTORIAL

 

Here's a comprehensive video tutorial that I recorded explaining how I build an Adobe Muse website using a Photoshop PSD.  The tutorial and video were featured in the October 2011 issue of Computer Arts Magazine. You can find a few more video overviews & tutorials on my YouTube channel.

 

 

​

 

Note: this video uses an older beta version of Adobe Muse.  The latest release now supports selecting multiple layers of the PSD when placing the file (which is awesome!)

 

 

​

 

 

 

PORTFOLIO UPDATE   |  FEBRUARY 2012

 

Kaitlyn Harris, Decorating Life - Interior Design

Designed using only black and white to reduce the influence of color, Kaitlyn Harris’ logo is a strong mark that can stand alone on a variety of applications.  Her style of interior design is very classic, modern and elegant, which is reflected in her new personal brand.

 

​

 

 

 

​

 

 

 

Pro Bono Project - The Beasts, Bantam Hockey Team (Logo / Hoodies)

In late 2011 I was approached by the coach of “The Beasts”, a girls bantam hockey team located in Calgary, Canada.  She needed assistance putting together an intimidating mark or brand that could be used to produce apparel.  The beasts icon is reminiscent of a mythical creature, and was later embroidered on hoodies and screen printed on

sweat pants.

 

​

 

 

​

 

 

 

Trifold Menu Design / Printing - Funky Banana, Fresh Fuel Lounge & The Main Dish

 

​

 

 

​

 

x

 

 

 

PUBLISHED IN COMPUTER ARTS MAGAZINE

 

Check out the October 2011 issue of the world's leading digital art magazine Computer Arts for my tutorial on Rapid Web Prototyping without Coding using Adobe Muse (codename).  Complete with screen captures, working files and a video screen cast, this tutorial explains in detail how to transform a Photoshop mockup into an HTML website using round-trip editing.

 

​

 

“Sending website layouts to third-party developers for early prototyping can be slow and costly for front-end designers.  However, by using Adobe Muse in conjunction with Photoshop, graphic artists of any medium can rapidly design, preview and publish and HTML site without writing code.  Using a simple layout created in Photoshop and the Place command in Muse, I’ll show you how to efficiently create a working prototype of your site.”

 

 

VVisual ArmsxVVisual Arms

VVisual Armsx

 

 

 

CALGARY WEB DESIGN SHOWCASE   |  BEST OF THE BEST

 

 

Visual Arms.com is currently featured on Calgary Web Design, a showcase of the best websites in Calgary!

Look for the listing under the category "Best of the Best".

 

 

 

VVisual Armsx

 

 

ADOBE MUSE  |  INSIGHTS AND TIPS FROM A

PRE-RELEASE TESTER

 

If you're following #AdobeMuse on twitter, you've probably noticed a great deal of negativity surrounding the quality and structure of code it generates, specifically from within the web development community.

 

As a freelancer and former hand-coder, I see the issue at hand from each unique perspective and certainly understand and identify with both sides. I will say however that having worked with the software for a period of months (rather than hours like most of the twitter followers), I'm quite impressed at what Adobe Muse has to offer.

 

My history on the web follows a windy path. From hand-coding and Photoshop slicing, to automated solutions like Sitegrinder and Adobe Muse, I've experimented with just about every web design tool and method I could find.

 

I did this experimentation for one main reason: Efficiency

 

Every extra billable second matters when you've got mouths to feed.  While I do firmly believe in doing a job properly the first time and never taking shortcuts that will jeopardize the quality of the final product, I also agree that there are some battles not worth fighting.  I'm not ashamed to admit that the existence of an extraneous <div> tag does not constitute a worthy battle in my books.

 

If your client has the budget for beautiful code then I suggest you fill your boots.  When you're on a tight budget and a limited timeline (like 90% of freelance work) tools like Muse give you the ability to deliver visually appealing and highly functional websites in record time.

 

 

Why the Negativity?

 

Based on my observations on twitter (and my own personal reaction to Muse), I believe web designers / developers are apprehensive about this tool for two reasons:

 

Reason 1: "It will significantly reduce the value of a website.  Any Creative-Suite capable designer with basic layout skills can now sell the same service that I do."

 

While this may be true if you're typically building brochure / small business websites, the majority of negative tweets seem to come from designers who focus on Wordpress (or other CMS integration) and E-Commerce solutions.  Muse was not designed to serve these purposes (yet), so I can't understand the resistance.

 

If your portfolio is as impressive as you make it out to be, your educated and informed clients should have no problem distinguishing it from the entry level print designers using Muse.  But just to clarify, not all Muse users are new to the web.  I consider myself a jack of all trades, and work heavily in many facets of design (print / web / interactive etc.)

 

Reason 2: Fear.

 

Fear is what I felt when I watched a live demo of Muse at HOW Design Live in Chicago.  Fear of the potentially superior design abilities of all of the wide-eyed print designers drooling with anticipation.  Let's face it - coders aren't typically known as top notch visual artists (myself included).  My fear subsided though after sifting through many of the gallery sites submitted to the Adobe Pre-release portal.  It became abundantly clear that just because you can now post something on the web, doesn't mean you know jack about user interaction, accessibility or simply what makes a beautiful website.

 

Everyone has to start somewhere.

 

While it may be perceived as a step backwards in terms of clean mark-up, I personally see Muse as a potential leap forward in great design on the web.  Eager print designers will emerge with stunning websites, and it will challenge the rest of us to improve, grow and adapt (or die).

 

What about code soup?  Let's let Adobe take care of this one.  Until my clients start viewing source code and commenting on my use of div tags, I'm happy to focus on what they care about - design and functionality. 

 

Ninety percent of this website was built using Muse (with the exception of the flash gallery).  Everything from Clicky and Google Analytics integration, Wufoo contact forms and simple JavaScript pop ups were integrated through the visual design interface.  While it was unsettling for me not to be able to tinker with my code, I put my faith in Adobe.  They are after all the undisputed leaders in the field of graphics software, and I believe that they very successfully identified and filled a major need in the design community with the development of Muse.

 

 

Here's a Muse Tip!

 

Photoshop has been my tool of choice for web mock-ups, and Muse plays nicely with it.  After creating my design in Photoshop and appropriately naming layers, I simply Place (Command-D or Control-D) my .PSD file into Muse. 

 

​

Muse can detect each individual layer in your Photoshop file, and allows you to place them one at a time for maximum control.  After laying out the site structure on a master page, content population is a breeze.  If that's not rapid prototyping and design, I don't know what is.

 

Eager new designers, feel free to email me your Muse questions at steve@visualarms.com.  I'd be delighted to help make you a better designer in any way I can.

 

Share your feedback & thoughts with me on twitter!

 

​Follow @VisualArms

 

Cheers!

~SH

 

​

 

 

 

VVisual Armsx

 

Want more news?  Visit the News Archive