Patrick Hansen.com

Do designers need to know how to code?

(there are many fields of design and this post relates more towards interaction/UI/UX design)

This question seems to be getting a lot of exposure and traction in the pipes lately from blog posts, user groups, UX resources and I have already provided my 2 cents on some LinkedIn discussions regarding this. And I was surprised to see some of the responses, which I’m sure this blog post and my perspective will trigger some interesting comments as well.

It’s definitely an interesting question and can make you think quite a bit about an answer. Especially if you are a designer who has some coding experience, which I am. I’m not claiming to be great developer, but I have and still do get into development often, mostly on the front-end. With this experience, I think it has provided me some insights that I normally would not have if I were solely a designer and it has benefitted various other aspects of my design.

But in general, my answer to this question is “NO” …it is not a simple “No” however.

I will admit, that being able to get my feet wet with some development has helped me improve my design skills, but it has not been the driving factor behind my ability to design. I work alongside many talented designers who continuously achieve successful designs without any or very minimal development knowledge. This has not prohibited them from doing their job well. This has resonated throughout the design community for many years. I also work with a few designers who do have some development experience like Leonard Souza, Juan Sanchez and Jeremy Graston.

I will add to this though, a designer should have a solid understanding of what they are designing for in order to create something that will be successful. So, understanding the frameworks, platforms, devices, and technologies involved, will help the designer create a solution that will actually work well for the problem and the level of comprehension requirements vary. This does not require the designer to learn how to code though.

Let’s take a look at an example in a different industry like architecture. An architect does not need to know how to build the building, home or bridge that they are designing. But they do need to understand some engineering principles, materials, fabrication processes and the labor that would be involved in building their designs in order to create a successful concept.

Looking at another field of design such as graphic design and illustration, where the end result is typically the design printed on a product such as a t-shirt, poster, or packaging. The designer in this scenario can still create a very successful design without knowing how to actually perform the printing methods, be it off-set, digital process, type-set, screen printing, etc. But it does help if the designer does know how to layer and prepare the design properly for possible separation requirements, scalability, and any other implementation needs.

In music, a songwriter or composer does not need to know how to play the instruments such as drums, guitar, violin, etc, in order to create a good song. However, understanding music theory, beat structure, rhythm, and other aspects of a solid musical framework that a musician would typically understand will likely ensure that the result is “good.”

And yes, there are literally “one-man-bands” out there who are skilled in multiple disciplines from songwriting to playing an instrument or multiple instruments. And they are fully capable of making great songs single handedly. There is absolutely nothing wrong with that and if you have the skills, more power to you, but finding resources who are highly and efficiently skilled in multiple areas is far less common than someone who is specialized in one area. Also, an individual that does not have the skills in multiple areas or us NOT a one-man-band, can be just as successful writing a song and then having band/orchestra separate of themselves perform and record it.

I will emphasize again, that there is absolutely nothing wrong with a person being skilled in multiple disciplines in any industry, and in this case, I do not see any negatives about a designer knowing how to code, although some would argue that it may box the designer’s mind in too much by being aware of conventional boundaries in development.

It WILL help improve upon some facets of the design process and this is based on my personal experience from my days prior to having development experience through today where I have gained more knowledge in that area. A designer could gain some of this knowledge without knowing how to code though, but with some simple research.

I still have design questions regarding development in many situations, and if I cannot answer them myself, I go directly to someone who can, a developer. There is almost always a resource available to help provide answers from that perspective and by having this point of communication into development, a designer has the tools to produce great design.

What we also see here, is that there are a lot of instances where a TEAM is involved in order to produce a successful final result, and having multiple resources who are specialists in certain areas does help create a solid result. We also see that there are times when an individual who is skilled in multiple areas can also produce a successful result and may likely do it in a more efficient manner pending on the process and pieces involved. There’s nothing wrong with either approach.

The one concept that does remain constant in either scenario is that the resource or resources involved, all should share an understanding and knowledge of the system in which they are working within in order to produce a successful result.

There are also some other roles where a designer who knows how to code may be able to satisfy other than the full fledge traditional developer role, especially with the growth of more programmatic styling and design such as HTML5/CSS3, FXG, mobile, and areas where more dynamic design is required like responsive design.

The ability to be able to implement the visual design of a UI using programmatic techniques is making the design to develop process crossover even further. A designer who may have some experience in these areas does not necessarily need to handle complex code or need a computer science background, but the designer can help develop the front-end and help ensure that the final product is more aligned with the original vision leaving the “complex” development for the primary developer(s). This is even true with more traditional styling approaches using bitmap and older technologies.

Prototyping has always been an appropriate place for a hybrid to work within and a crucial phase in UI/UX design, be it interactive or static. But interactive prototyping definitely extends possibilities and requires that additional knowledge and effort of development in most cases and it helps when a designer can also help produce a prototype, since schedules and budgets are almost always a factor.

So, even though my answer is NO to this question, I do encourage designers to explore some development. It may open a new door to you and personally, I find it quite fulfilling to be able to make your own or even another’s designs come to life.

If a designer was required to know how to develop, would that person be a developer?

Do developers need to know how to design?

The BordoBello 2011 artshow is this Friday September 30 at Redline Gallery in Denver.

Here is a sneak peek at the deck that I painted for this year’s event.

title: Rabbits’ Head
Acrylic on Skateboard Deck
Sept 2011
(click to zoom)

You can visit my previous blog post for more details: Bordo Bello 2011

BordoBello Artshow
Redline Gallery 2350 Araphoe Street
Denver, CO 80205
click here for map
$15/$20 day of

more info and to purchase tickets: http://www.bordobello.com/

Bordo Bello 2011 is coming up Friday, September 30 and will be held at Redline Gallery at 2350 Arapahoe Street in Denver. This is a great art show featuring a lot of artists and many local ones. Each artist paints or designs a skateboard deck and these decks will be for sale with proceeds going towards AIGA mentorship opportunities among with charities Access Gallery and  The Robert Taylor AIGA Colorado Scholarship.

A few friends of mine among with myself will have pieces featured in this gallery, so come down and not only support your art communities, education and artists, but get a visual taste of the talent with some amazing paintings & designs on skateboard decks.

I’ll be posting a sneak peek of my deck just before the show.

BordoBello Artshow
Redline Gallery 2350 Araphoe Street
Denver, CO 80205
click here for map
$15

more info and to purchase tickets: http://www.bordobello.com/

I frequently come across designs that use placeholders, as this is a common practice in the design industry. I think we’re all familiar with “lorem ipsum” and “John Doe.” Those work well in most cases for filler and/or placeholder content, but can wreak havoc in your design once it goes into actual production and all of a sudden you realize that the data providing your content is about 100 words vs. the 20 you designed for and the names contain a lot more characters than John Doe, which now disrupts your design and things aren’t looking so pretty anymore when the label or greeting is being pushed into the logo of the header, because “John Doe” is now “Keaweaheulu Smithsonian.”

note: this is a slightly exaggerated example

Now, that’s only about 15 characters more than the placeholder, but it could have a huge impact on the design if not thought out properly. It is a fundamental mistake that occurs often and sometimes isn’t discovered until further into the process and can cause a domino effect in your design.

This post isn’t just about long names or words, this philosophy should be applied to the whole design overall, from text handling to containers, lists, etc.

In the interactive realm, considerations for multiple screen sizes has been around for years, but it is more important now than ever with all of the devices popping up every other week. Making sure that your design fits the screen it is being displayed on is key, but making sure the content that is being displayed is usable and valuable is even more important; you can’t just truncate everything, that’s just a copout.

Any aspect of your design that will contain content, especially dynamic data that you may not have a lot of control over, needs to be considered in a “worse case scenario” presentation. It may not look pretty and when most designs are being created, it is preferred to have a nice and pretty best case scenario or the “happy path” view, especially if you are presenting to a client. I don’t disagree, but the design should consider those other scenarios be it edge case or not. And if it is so edge case that the probability is almost 0 that means it isn’t impossible, thus there still needs to be a rule and design to define what would happen under those circumstances, as it will go into development and code will have to instruct the UI on what to do and how to handle content.

You don’t have to show that worse case scenario design to the client if isn’t ideal or required, but at least you know that you have taken the time to plan and have a viable solution for it when and if it occurs. If you can make that scenario look good, then more power to you and your design has probably been well thought out to handle scalability without much impact to the integrity of the design.

In short, as much as placeholder data is easy to throw in and efficient, make sure your placeholder content mimics the real world data as much as possible and always throw in that wild card like the Hawaii state fish, Humuhumunukunukuapuaa, just to see how well your design will handle a scenario around that.

I just designed a new limited edition skateboard deck graphic for BC Surf & Sport and a new series to help raise funds for Japan Tsunami relief efforts.

The sun rays and the red cross are pretty obvious in what they signify. The bamboo was inspired by the the various meanings it has to Japanese culture, primarily strength, resiliency and regrowth. I can’t think of a better time than now where that holds true.

You can purchase the deck at BC Surf & Sport locations for about $35 and proceeds will go to Japan Relief efforts.

Go skate an help the world!

Thanks to Jake Pedroza (Snakes) and BC Surf & Sport for helping with this project.

I keep having the conversation with colleagues about PNG’s and the bit formats available, why Photoshop and Fireworks seem to offer different options, and which format is the best to use. Although I know some of the answers and reasons, I wanted to make sure to clarify and explain as much as possible, so I did a little further research and tests.

First off, what is a PNG?

wikipedia’s definition:
A PNG is a bitmapped image format and video codec that employs lossless data compression. PNG was created to improve upon and replace GIF (Graphics Interchange Format) as an image-file format not requiring a patent license.

Now that we have a general definition of a PNG, let’s try to understand the various types. (8, 24, 32, FW)

Here is a PNG-Type matrix I created to help clarify and demonstrate the visual differences.
The subject is a light blue to dark blue gradient rounded rectangle.
I used an annoying red for the background and/or matte color for some of the tests.

“Download the full-size PNG Type Matrix Here

Now, what type of PNG’s are there?
1) PNG- 8
The 8 stands for 8 bit. It can handle up to 256 colors, similar to GIF, and uses a lossless compression method. You will receive a low file size similar to GIF, approximately 10-30% smaller than other bitmap formats like JPG.

It will also support background index & alpha transparency and matte.

PNG-8 is good for small graphics, line-art, logos, but may not be suitable for complex graphics with gradients or photos. You can see in my matrix, that all of the PNG-8′s have banding across the gradient. You can see the banding on the PNG-8 images in the matrix.

With PNG-8 index transparency, you can see that you will get jagged aliased rounded edges, but if you choose a matte color, then the matte color becomes jagged and will blend in with your true background that you will apply this graphic to and it will appear smooth.

2) PNG-24
PNG 24 is similar to 8, but has support for 16 million colors and will preserve color variations such as gradients better and help prevent “banding.” It does use the same lossless compression as PNG-8, but you will obtain a larger file size due to the amount of information that will be retained vs. PNG-8.

PNG-24 is great for basic graphics, line-art, logos, etc., but you will have an unnecessary larger file size then needed. If you have more complex graphics or photos which require more detail retention, PNG-24 is a great choice.

PNG-24 provides support for background index transparency and matte.

Since PNG-24 supports index transparency, you usually apply a matte color of the color of the background you will apply this graphic on top of. This will provide the illusion of a smooth transparency along the curves or anti-aliased parts of your graphic.

In 24-B and 24-B2, you can see around the corners on the none matte images that they are aliased and jagged. Also, you will notice the black, these were exported on a transparent background, but I did not select a matte color, so it defaulted to black.

This also means that if yo have a graphic like an overlay with a percentage opacity of 50%, it will become fully opaque, since index can only handle a single level of transparency. You will have to use Alpha Transparency to achieve this.

The issue using PNG-24 with index transparency, is if you are planning on using your graphic like a rounded rectangle on top of a gradient or multi-colored backgrounds, you can’t really apply a single matte color to accomplish the effect appropriately in all cases. (backgrounds with a subtle gradient could be accomplished with minimal conflict if you pick the median color of your gradient).

That’s when you have to use Alpha Transparency, which will entail, turn your PNG-24 into a PNG-32. Or you could say it is a PNG-24 with Alpha Transparency based on traditional definitions.

3) PNG-32
Whoa – there’s a PNG-32?
If you use Photoshop and Illustrator primarily, you’re probably only familiar with PNG-8 an PNG-24. However, Fireworks provides an option for a PNG-32.
Why?
Well, Photoshop and Illustrator produce PNG-32′s if you choose full alpha transparency option on a PNG-24. It just doesn’t really inform the user that it is creating a PNG-32. Why? I don’t know.

PNG-32 is the highest quality most of the time, but that also means high file sizes. Use this format only when necessary for those complex graphics that have gradients, varying colors, rounded edges and transparency.

PNG-32 will support full Alpha Transparency. You can technically make a PNG-32 with no transparency visually, but it would be somewhat overkill, because it still contains alpha meta data and you can achieve practically the same quality with a PNG-24.

Alpha transparency vs. Index Transparency?
Well, index transparency provides a single index color and level to be transparent. It’s either on or off.
Alpha Transparency provides multiple levels of transparency which in turn, provides a much smoother blend along curves or anti-aliased edges. This also means you can have varying percentages of transparency for your graphic/image, like a graphic that may be used as an overlay and it has 50% opacity on the whole image.

You can see in the matrix, that 8-C2 and 32-C2 show the graphic as intended, with a 50% opacity. But most other formats, such as index, reverted it to 100% opacity.

4) Fireworks layered PNG
Yes, there is technically one more format. Adobe Fireworks, formally Macromedia, uses PNG as it’s file format, but it is a “layered” PNG which means that it could potentially be large in file size, because it retains all of the raw, layered information of the Fireworks file.

This is NOT what you would want to use for your production web graphics. So, if you have an unusually large PNG, that might be the reason why.

Please correct me if I am incorrect about any of this

note:
IE5 and IE6 do not support alpha transparency (PNG-8 alpha, PNG-32 alpha), it may convert it to single index, or it may not display at all. There are some PNG fix libraries to help handle this for those browsers.

Additional Resources
If you want to further optimize your web graphics, then try http://www.smushit.com/ysmush.it/

This tool will help you compress your PNG’s even further, and provide feedback of any images that could be compressed and what your file size savings are after the additional compression.

references:
I did use some references that other have posted to help provide these defintions – thanks.
deepbluesky.com
bkwld.com
iit.bloomu.edu
en.wikipedia.org

Web Designer Magazine 179 is on sale now!

A few co workers/friends of mine (Michael Salamon & Jason Bowers) along with myself are featured in the Hot 100 predictions for web trends we’ll see in 2011.

The magazine has a lot of great content in addition to the shameless plug I just mentioned:

- Main Features
Web Designer HOT 100 2011

- Rounding up the top talent, tech and trends for the year ahead
Pro File with Firstborn

- Exclusive agency tour with one of NYC’s finest creative teams
Design diary: We Love

- Chronicling the build of a brand new agency website
Whatever happened to Augmented Reality?

- Discussing the state and potential of one of web designs fallen trends

Also inside… (full list of features/reviews/previews)
- The future of web fonts – news and views
- Cool products rounded up in Webkit
- Awesome site designs showcased in the latest Lightbox
- 3D transforms with CSS and HTML
- Create content for the HTML5 canvas tag
- Create an animated navigation menu
- Multilingual WordPress blogs with qTranslate
- Build a Twitter app with jQuery Mobile
- Facebook page design with 520 Grid System
- Free CD resources

Bold WordPress Theme from Organic Themes worth £40
XML 3D Google Map worth £15 from FlashReseller.com
30 music loops and sound FX from Soundsnap worth £18
Ultrashock Breeze Effect widget for Flash/AS3
Soft Grunge Patterns Vol 2 from WeGraphics
9 eCommerce vector icons from Snap2Objects.com
AS3 Basics par 4 from Cartoon Smart worth £35
Dreamweaver CS4 Basics video from Killersites

For more info, visit:
http://www.webdesignermag.co.uk/blog/web-designer-179-on-sale/

With the amount of new mobile and digital devices that are on the market today, many companies are trying to jump on the “app” bandwagon. This is a natural response, from both a marketing aspect and a business perspective.

Marketing wants to take advantage of exposure in the latest trend channel, and business sees new opportunities to reach their customers and provide additional pipelines of potential revenue. The main issue that I constantly see lately is that the decisions to try to provide a presence of your company in a certain digital environment or platform is narrow sighted and many of these companies are losing sight of context, usable purpose or utility and do not consider all of the channels that make up this digital ecosystem to distribute content and services through effectively.

Making an application for the sake of jumping on the “app bandwagon” isn’t going to provide the returns that most would anticipate, especially when it is so general, there is no context on how it relates to your business. Some companies believe that even if their app provides some form of entertainment, like a basic puzzle game, that it is valuable to their customers and will provide a venue for branding, advertising and exposure that customers can absorb. This can backfire, especially if the application turns out NOT to be valuable to the user. They will not only likely discontinue using the application, but your company’s face is now associated with an application that is collecting dust or has been deleted. Offering an application that provides entertainment isn’t bad, but provide solid context on how it relates to your business and features that can help connect users to your brand.

Utility is strongly related to my previous point about context. An application that does nothing more than associate your business with an app is practically useless. It needs to provide the user with some functional value.

For instance, if your business is a ski/snowboard related, you could provide a user with a variety of features in an application. I’m going to throw out a hypothetical and simple scenario. One option would be to provide a ski or snowboard game, where the user can ski down the run and hit jumps to score points. That’s not a bad idea, until the user becomes bored of the game due to low budget and poor strategy and the user decides moves on to something else, because the app provides nothing else to the user that is truly valuable other than brief entertainment.

Now, the obvious feature set would be to provide the user with snow reports and weather conditions, a feature that not only possibly draw the user back to the app in the future, but really DRIVE the user back to check the conditions, because that is what the user wants to know, plus the data constantly changes and updates. On top of that, a map of the resort would be another valuable feature that would serve the user with some purpose. The entertainment or game side can be useful, say the user is in the lodge having a beer and wants to kill some time, but still experience the sport. Give the user something that other apps cannot or do not do very well. The ski reports and maps are obvious choices in this case, and although they would be useful, there is so much more that can be done. You can take these features to the next level like Vail Resorts’ EpicMix mountain, mobile and online experience.

This system allows tracking of your movements with RF receivers throughout their mountains from RF chips in your season pass, calculating your achievements, days on the mountain, locations, vertical feet traveled, history and more. It also allows you to connect to others and share your stories. They added an incentive/reward pin system for accomplishments, which in a sense is a game, but unlike the one noted earlier, this feature really engages the user in a real world experience and crosses over into a game. This is one aspect of gaming mechanics that can help your app succeed and keep your users engaged, even if it is not a game.

A solid understanding of the various channels that your content and services will thrive in is key to being able to provide the user with the appropriate data during the appropriate time and on the appropriate device.

This model has already been in practice with businesses that have online sources, television, radio and possibly print. A major issue is distinguishing between the content and mediums of presentation. Some online sources simply mirror exactly what was printed, yet the online space is interactive and you could provide the user with so much more content and enhance the experience with visuals such as animations and slideshows that cannot be accomplished in a print format.

Centralizing your data is another important factor. This is NOT A NEW concept, as many businesses and sites have been doing this with a simple database and then pulling the desired data/content as needed to present on the intended device or medium. This makes it exponentially easier to manage content even though you may have several outlets. It is important to decipher which parts of that consolidated data should be distributed to which device and how to present it.

Simply resizing your content to fit on an iPhone doesn’t really mean it is optimized for iPhone. And the dataflow should not be viewed as a waterfall or pyramid distribution system, where many models have a primary source of content and then it deltas outward to various portal types with minimal adaptation or tributaries that feed downstream. Info and content should also be able to feedback upstream and/or laterally to other distribution points, so that when content is added or optimized mid-stream, it could also be used elsewhere in the system even back to the source, especially when that other outlet evolves.

Utilizing the hardware of specific devices like a smart phone, allows you to provide more features and present content that is catered to a user on the move. Geo-location to help a user find out where they are, and where they need to go can be a very valuable feature for a mobile device app. Tapping into the accelerometer allows for unique experiences that would only suit a mobile user, like scrolling content by tilting the device due to being on the move and having limited interactions or tracking speed of the user who is on the move. These are things that would not really benefit someone at their desk, but are great for the mobile world.

Flipboard for iPad is a really great example of an app that can adapt and restructure content for the device that it is on and the interactions the device allows. Most of the content that is pulled from Flipboard already exist somewhere on the web, but Flipboard reformats and presents it to the user in a very intuitive manner that takes advantage of the iPad’s touch screen, interactions and resolution.

One blog post is not going to cover all aspects of the digital ecosystem and can’t guarantee to make your business successful, but with some better insight to the platforms, research, and user experience considerations, you can take the correct steps in understanding how you can propel your business in the right direction with your interactive content. These are just some thoughts I had recently.

Our new iPad application, Smart Stacks, is available ($1.99)!

My colleague and friend, developer John Blanco (Rapture in Venice), and myself, have just completed a new iPad application called Smart Stacks.

This application is focused around education and children. This isn’t the first flash card-based application, but after reviewing some of the existing ones, we felt there was some room for improvements to this arena.

This application is based on digital metaphor of the traditional flash card model. Using visual image and word association to teach and learn. Currently, we have decks featuring alphabet, numbers, animals, and foods.

We really wanted to focus on the user, be it a 35 year old mom or dad, or a 3 year old child. Now, not many 3 year olds have iPads, but there are plenty parents that do. Many more children are being exposed to technology and devices at earlier ages as these items become more common in daily life and activities. By considering the user personas, we wanted to provide a really simple and easy-to-use application.

Streamlining the UI and reducing the clutter of unnecessary complex features, allowed us to make an application that helps steer the user to the primary objective of the application, which is interacting/playing with the flash cards. We wanted the path of least resistance to get the user to the play view, even if they are 3 years of age, as long as they interact with the objects on screen, they will end up in the play view. Navigation is also provided as a simple and minimal “back button.” The user can always get back to the main menu when needed and without a focus detouring or UI obstructing navigation.

Another feature I’d like to point out is the multi-language support. The application has built-in localization support for up to 7 languages: English, Spanish, Italian, German, French, Russian and Greek.

Alongside localization, we wanted to add to the educational aspect of this application by utilizing the multi-language support to allow for translation and multi-language teaching also. This is the other UI element on the screen, and it provides a menu of languages to select from. This can be done on-the-fly and from wherever they are in the play view, so the user doesn’t have to interrupt their flow.

As for the visual design, we wanted to make this have a very analog, classic feel, like if you found a flash card deck in your granny’s attic. Although some younger users may not perceive the feel as “vintage,” we wanted to deviate from a modern technical direction to a feel that is more traditional. We also wanted to use hand drawn illustrations instead of photos, to help emphasize the features of the subjects and provide a more unique and fun visual experience.

John Blanco provided great insight to make this application happen, with his iPhone development experience and direct user feedback. We worked on the interaction architecture together making sure that both of our knowledge and perspectives were considered in the creation of this app. John is a great developer to work with, helping make the stereotypical developer/designer challenges non-existent. I also provided the visual design and illustrations.

We do have a list of features for a following version, but we would still love to hear feedback. I’m sure the App Store reviews will provide honest feedback and criticism.

It’s priced at only: $1.99!
You can check it out at the App Store: Click Here

Visit:
SmartStacks

If you’re in Denver today, or for the next few days, be sure to roll down to Lisa Kowalski Gallery on 27th & Walnut for the 2010 Denver ArtCrank poster show.

Here is a preview of my new poster for ArtCrank:

The Big Wheel ‘o Death!

Event Info:
September 4 – 11
Lisa Kowalski Gallery
2762 Walnut St., Denver, CO

For more info visit:
http://www.artcrankpostershow.com

http://www.artcrankpostershow.com/denver/

http://www.facebook.com/event.php?eid=143447882348886&ref=ts