Designer/Developer Hybrids will rule the IPhone 6+ world

by on September 9, 2014

Designers and developers hybrid, designing visually with code article

Designer/Developer Hybrids will rule the IPhone 6+ world

  •  
  •  
  •  
  •  

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


  •  
  •  
  •  
  •  
Free Web Design Audiobook
  • http://creodesign.co Chris Young

    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

      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

        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

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

          • fortyminstofive

            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

            I dig it. Very good insight

  • ArtssyAbs

    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

      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.

  • fortyminstofive

    Imagine Photoshop with CSS support.

    • Tim Brown

      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

        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

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

          • fortyminstofive

            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

            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

            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

            Will Check that out! thanks Adeeb

  • Luke Swenson

    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 what’s feasible and to show team members what’s possible as we’re collaborating on a project.

    That said, there is always tweaking to be done once in the browser. I’ve come to that conclusion as well. Spacing relationships seem to change, line-heights, responsive quarks need to be worked out, etc. No getting around it. Cheers!

    • Tim Brown

      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!

  • Pingback: Experiments in Blogging - What worked in 2014 - Tim Brown()

  • Pingback: Originality Doesnt Exist | Web Design Inspiration | Tim Brown()

  • Pingback: 7 Principles of Solid Modern Logo Design - Tim Brown()

  • Pingback: Portfolio Redesign 2015 - Tim Brown()

Ready to get started?

Get a free consultation now