fbpx

Designer/Developer Hybrids will rule the IPhone 6+ world

By
Updated September 9, 2014
22 Comments
5
Designers and developers hybrid, designing visually with code article

Designer/Developer Hybrids will rule the IPhone 6+ world


Tim Brown

Tim Brown is the owner of Hook Agency, and strategic marketer focused primarily on driving traffic and leads for small businesses and construction companies.

Today the iPhone 6 was released along with a gigantic iPhone plus. The sizes are additions to these size categories with several other large phones and phablets and designing with them in mind will reveal a deeper struggle in the minds of designers and developers.

UI or User interface development is a world of intricacies.

Like creating the appearance of the border around the edge of menu having a rounded curve, or creating a button that has a light gradient to make it look pressable, and having a pleasantly pressable hover state. The world of responsive design is presenting us with more and more shapes and sizes to design for, and the design work will be increasingly difficult and perhaps overkill to represent in photoshop. Because… The world of web design is becoming more and more efficient to design with HTML, CSS, Javascript and other coding languages rather than mocking up every change and intricacy.

Now before a hoard of designers call me a brute (2 people on twitter), let me say I’m a huge fan of making beautiful things in Illustrator and mocking things up so that there is a creative direction before a line of code is touched. Just as I like to sketch out things to give an idea of the layout, and wireframe things as appropriate. It’s just this distinction that has to be made though, visual design in photoshop or illustrator is an approximation of what the design will look like in the end, and can’t account for all of the intricacies of how things react when clicked, hovered over, dropped-down, shrunken or enlarged. Said a different way, a mock-up in a design program is just a painting to the real thing of working code.

I often ask myself the question; ‘am I a designer or a developer?’

The designers and developers who have been out in the job market for a longer time than myself have found it quite important to make this distinction, it’s essential to their focus at work, their pocketbook and their sense of identity. If it takes 10,000 hours for someone to master something than goddammit I’m going to choose one and attack it with the full force of my 5 senses. I’m going to eat, sleep and shit web design. Or I’m going to crack out on visual design until I am the go-to guy for delicious looking graphic design.

So I’ve reached the understanding with myself. I have to be one thing.

I just now consider myself a visual designer who often designs in code. This is going to sound pretentious, but bear with me for a second. Artists for thousands of years didn’t take it for granted that understanding and learning how to master their tools and medium were all part of long part of becoming a master. They collected the secretions of sea snails and ground flowers to get the perfect shade of purple or yellow. They knew how to trim brushes and maintain their materials. Becoming a master of your materials was all part of the game, and I believe that code can be that medium for creative individuals today. To start a journey with code is to start a journey exploring and understanding the ‘material’ of web design; to begin to master it is to be more fully prepared to wield everything the real tools of web design have.

When someone is able to master using code for User Interface design you can see that it makes a difference.

Things that were made in the browser have a native feel that lets a site visitor navigate freely and appreciate the natural interactive environment. Designs that have been cut and spliced from a photoshop document feel clunky and un-natural. This is by no means a rule, but I project that more and more designers will lay down the photoshop and illustrator tools they feel so attached to on a regular basis to pursue more elegant ways to render visual design. Ways that allow them to feel the natural restraints of their designs native environment, and play with ways to enhance the design with interactive options and possibilities.

Do you feel that “visual designers who often design in code” is a movement that is gaining momentum? Tweet at me, or leave a comment below. I’m extremely interested in hearing other peoples opinions on this, as it is a pretty life defining element of my journey and career. Are you appalled by my insensitivity to the true artists of graphic design, who slave away at incredible logo designs and sweat style, please let me know as well. I welcome alternate opinions, and even controversy.

Feel free to check out my current Designer/Developer Toolkit For 2014

  •  
  •  
  •  
  •  

Related Posts


Tim Brown

Tim Brown is the owner of Hook Agency, and strategic marketer focused primarily on driving traffic and leads for small businesses and construction companies.

Free Marketing Audiobook

Leave a Reply

22 Comments on "Designer/Developer Hybrids will rule the IPhone 6+ world"

Notify of
avatar
Sort by:   newest | oldest | most voted
Luke Swenson
Guest
Nice post Tim. I’ve tried designing directly in the browser a few times, but I’ve come to the conclusion that I like to finalize flat designs then code. I do this because I rarely get a design right the first time (ha!) and even though I consider myself a fast front-end developer, it’s faster for me to explore a wide variety of visual concepts in Photoshop and Illustrator than in HTML/CSS/JS. I will also dive into snippets of code at the same time as I am designing in Photoshop to explore Javascript interactions. I do this a lot to see… Read more »
Tim Brown
Guest

I think what you’re saying enhances my thoughts here, and I agree with you quite a bit. If someone had gone to far onto the development side and didn’t take into consideration the PS and Illustrator pieces, I’d also take issue. I love how you say you dive into the snippets and consider that while your visually designing. I think these thoughts are great, and maybe I agree with this point of view more than my article might lead someone to believe. 🙂 Thanks for sharing!

fortyminstofive
Guest

Imagine Photoshop with CSS support.

Tim Brown
Guest

It’s getting there huh? So far many of the possibilities for doing this spit out less than ideal code. I think when it is efficient, it will still be important to consider functions, layers and behavior and once you make a program able to respond to all these options without touching code I can’t imagine it being simple, or simple to learn. Functions, layers and behavior are complex and unless we’re looking for the most basic of brochure websites I’m going to want to access and manipulate these aspects.

fortyminstofive
Guest

Apologies for not explaining myself very well. I was thinking of creating responsive photoshop documents rather then creating the actual site in photoshop. Usual workflows would still apply.

Tim Brown
Guest

Ahhhh.. I like that. Hard to imagine exactly what that would look like. I wonder if an intense photoshop plugin could do that.

fortyminstofive
Guest

A plugin should do it to a point, I think a totally new application would be better though, dedicated to web/app design on multiple platforms.

Tim Brown
Guest

I can dig it, I guess I haven’t dug much into Muse or other Adobe web application to know how much of this has been attempted so far with more developer/hybrid centric visual design program. Usually it seems like they are targeting visual designers who don’t understand code, looking for shortcuts.

AdeebmDesign
Guest

Learning inDesign liquid layouts gave me some ideas for creating responsive web layouts, but obviously there are a lot of draw backs doing that kind of design in inDesign, however after looking at information about Adobe Reflow I feel this will be a great way to design one document that can act as three Photoshop documents. Check it out if you haven’t already. http://tv.adobe.com/watch/adobe-edge-reflow/whats-new-in-adobe-edge-reflow-cc-preview-7/

Tim Brown
Guest

Will Check that out! thanks Adeeb

ArtssyAbs
Guest

With the popularity if frameworks, and being easy to use, traditional design tools are needed a lot less now. Only in the very beginning of the design process since frameworks can be used for such agile projects.

Tim Brown
Guest

Absolutely. Frameworks.. but also as people get more fluent in coding languages being able to rustle any particular elements they are looking to achieve with code from scratch, and yes as well being able to find what they need as it exists already and make it look and react/respond right with strong coding knowledge.

Chris Young
Guest

As someone who has designed in Photoshop and Illustrator for more than 20 years, as well as coded websites, I totally relate to what you’re saying. Coding and designing with code is the future (if not the present), and it’s one of the reasons I’m teaching my son to code at the same time as he learns to draw.

Tim Brown
Guest

Love it Chris! I can’t help but think youngins that get an early start on coding will have a crazy advantage by the time they reach their late twenties and early thirties in the work force.

fortyminstofive
Guest

I would just teach pseudo-code, as well as drawing. In 20 years coding will probably look a lot different to how it does today. Also pseudo-code can be applied to life as well as computers.

Tim Brown
Guest

Can you explain a little better what you mean by pseudo code?

fortyminstofive
Guest

Instead of valid syntax, just plain English. A very crude example snippet you might use when planning jquery or php:

—-
• if user clicks button with ID send:
check to see if there is any text in box with ID “message-box”
• if there is:
copy text in box with ID “message-box” and send it to supplied email address
• if there isn’t

display div with ID “no-text”

—-

I find it useful to break it down like this when asking developers to help.

Tim Brown
Guest

I dig it. Very good insight

Ready to Get Started?

Get a free consultation now