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?

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 posted about the Serato Itch 2.0 public beta, and guess what?

Itch 2.0 is now available – full release.

download it here and enjoy the new features with a stable release.
http://serato.com/itch

For those who use Serato Itch with a MIDI controller, Serato has releases the new 2.0 beta for public testing.

What does this mean? Well, the current version is 1.7.1 which has some nice updates from the previous, but 2.0 has the long awaited SP6 sampler feature!

Here is the Itch 2.0 demo:

If you use Serato Scratch with traditional decks, you may have been using the SP6 in there and if you are using Itch solo or to supplement your other DJ set up, the SP6 can be a valuable feature to use with Itch.

What is the SP6 exactly? It’s pretty much a sampler bank where you can playback cue points and/or loops (drops) utilizing the cue and loop markers that you would normally use on tracks via the standard deck controls in the software. And don’t let the “6″ mislead you. There are actually 4 banks (A,B,C,D) of 6 sample slots (24 total). Now, this may go against DJ purists, but it does add another tool to your DJ set up to enhance your performance.

You can trigger these with standard keyboard actions, but you can map an external MIDI controller to trigger these items in Scratch. One of the big delays with adding the SP6 to Itch was that the hardware has had a strict and limiting 1-to-1 mapping for most of the features, so like any feature in the interface, there is a keyboard mapping, and for Itch 2.0, the keys are:

• z (slot 1)
• x (slot 2)
• c (slot 3)
• v (slot 4)
• b (slot 5)
• n (slot 6)

I’m not sure if Itch 2.0 has MIDI mapping yet, where you could potentially map them to an external MIDI controller or not.

There is a new interface theme and layout options, which makes the interface appear more closely to its sister app Scratch.

Most of the other new features pretty much bring Itch up to speed with the features currently found in Scratch.

This new update defintiely makes me more happy with my investment with the Vestax VCI-300, which I primarily use for smaller events and practicing, but now I can carry most of my performance across the two set ups  easily.

Please vist their website to see all of the new features.

For the Serato Itch 2.0 beta download visit:
(please take precautions with any beta software and especially if you have recently updated OS X Lion)
http://serato.com/forum/discussion/475909

manual:

http://serato.com/manuals/itch/software/2.0/introduction

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.

The iconic symbol and industry standard of hip hop and DJ’ing is now being laid to rest. Panasonic officially announced they are stopping production on the analogue turntable line-up under Technics, the popular 1200 and 1210.

Resident Advisor reported on this and provided a press release from Panasonic stating:

After more than 35 years as a leading manufacturer of analogue turntables, Panasonic has regretfully taken the decision to leave this market. However, Panasonic will continue to sell headphones under the Technics brand.

We are sure that retailers and consumers will understand that our product range has to reflect the accelerating transformation of the entire audio market from analogue to digital.

In addition, the number of component suppliers serving the analogue market has dwindled in recent years and we brought forward the decision to leave the market rather than risk being unable to fulfill future orders because of a lack of parts.

It is sad to see this day come, especially for purist analog audiophiles. DJ’ing has evolved exponentially in the past 0 years with the introduction of digital solutions such as CD/DVD tables to the popular control record interfaces like Serato Scratch and now MIDI controller interfaces.

Using vinyl is an aspect of DJ’ing that brings a lot more to the culture than just a medium to play, mix and scratch with. It is an art form with unique aspects that only analogue vinyl could bring.

As much as I do participate in the digital world and advocate for evolution of technology, I’m glad I still have a nice collection of 1200′s and vinyl and have been able to be immersed in a side of DJ’ing that may soon be history for new generations of DJ’s.

Read NPR’s post for more info

Novation and Serato just released the Dicer MIDI control to supplement your decks with Serato or other MIDI assignable DJ software.

This control makes it a lot easier to control your software, cue points, loops, etc., so you don’t have to mess around with your laptop keyboard to navigate these features.

Check the video:

This project looks pretty sick. And the good thing about it is, that even though it is bringing technology and graffiti/street art together, it’s not exploiting it with some mainstream adulteration.

Graffiti Analysis 2.0: Digital Blackbook from Evan Roth on Vimeo.

I think it is pretty tight how it not only renders the visual result of a tag/piece, but it focuses on capturing the “motion,” which is a big characteristic and and driving mechanism of defining the unique styles portrayed in graffiti and individuals that most would never be able to see or perceive. That is a finely tuned attribute of the craft that really isn’t a secret or anything, but it just isn’t something that is easily exposed or conveyed to some. It’s the “feel” of creating art, that even though this analysis project is getting really close to it, I’m still not sure if that can ever be transmitted precisely to everyone. It not only goes for visual art, but even other skills such as shooting a basketball, or playing the violin. Sometimes you just gotta’ “feel it.”

Visit the project site here:
http://graffitianalysis.com/