How can we make the relationship bewtween designers and developers thrive?
A study the ongoing fight between A look intoofthe relationships between Developers and Designers. What you need to know to Developers and Designers and how we make your relations thrive and bloom and what not to canboth improve them. do. What do they do and can anyone do it? And how has advanced technology affected both?
How can we make the relationship bewtween designers and developers thrive?
Written and designed by william suckling
esign is a funny word. Some people think design means how it looks. But of course, if you dig deeper, it’s really how it works,” Steve Jobs in Wired magazine in 1996. That was in 1996 and it’s now 2013. That statement of course applied to design in then and even before, design has always had to be functional, engaging and communicative, it has always had to work. Whether it was propaganda posters, packaging, advertising (the list goes on). However what Jobs said is more accurate today than ever. With technology becoming more ready available and easier on our wallets, the tech has to perform differently and in some cases becomes part of our daily life. By performing differently I mean to be user friendly and intuitive. According to the Guardian, Apple announced that they had sold five million iPhone 5s in the first three days after the product’s launch, one million more than its predecessor, the iPhone 4S, which took a week to sell four million. Five million, that doesn’t include the countless other iPhones and smartphones out there. According to Ofcom over half the population of the UK own a smartphone. So with more and more of us owning smart devices, the design of interfaces and apps has had to dramatically evolve.
How can we make the relationship bewtween designers and developers thrive?
D
“
iphone 5 sold 5m in FIRST THREE DAYS
The term restrictions and limitations appear in many of the answers, and for good reason. Digital design is made for a screen. A screens capability far surpasses those of print. Yet if you are not skilled enough with coding or developing then the design will be static. We play games on screen and watch TV and films, all of which move and excite us. However to make ‘things happen’ on screen as, designers we need to know how to do it, to learn code. However many companies now employ developers alongside designers, however, we still will not become experts in app design. We need the relationship with our developers to blossom and mature yet it may not be easy when talking of praise. Who takes the most credit of a final product, a user interface of digital book for example? Yes, design is how it looks so credit goes to the designer right as it’s what everyone sees? Yet the functionality stems from the developers work so they must receive higher praise. As you can see we may already be off to a bad start. Yet before we look any further, let us take a look at these two individuals. Designers and Developers. What are their main roles? What are their methodologies? Who do we think they are? To start I wanted to answer the latter.
How can we make the relationship bewtween designers and developers thrive?
46% say that coding should be in your toolbox
However it is not an easy task, as a designer who has never worked in digital design, to design something which is highly functional and which would appeal to consumers. As a young designer I want to work in a digital environment. However it seems quite daunting as I myself have no idea how to code nor do I have any experience designing for interfaces. Coding is something that many young designers try to avoid. We are designers not developers, however, maybe we should listen to what Jobs said. It’s how it works, and on a technological level perhaps we should learn how it works. A recent article on GraphicDesign.com, written by Swiss web designer Mirko Humbert asked, “Should you add coding to your graphic design toolbox?”. Nearly half of GraphicDesign.com readers – 46% – responded, “Yes, it has become a necessary skill.” Others argued, “I don’t think designers should code, it just limits your own creativity. A designer should be free to push design to its limits and then ask the programmer to make it work.” Other answers, also said that, “With coding comes restrictions if the designer is not skilled enough. Therefore designers should stick to what they do and get a developer to make it.”
de•vel•op•er Noun A person or organization that develops something. Above is what a developer is in the most simple of forms taken from the dictionary. When asked in a survey conducted by myself, ‘What is a developer?’ forty of one hundred people thought they developed houses. They are not wrong as developer is a very loose term, and only a handful replied with Software developer those being of a younger generation. They were not wrong either. Software developer was the closet answer I received to what I wanted. Yet there are so many different sections within software and computing for a developer to exist. So what is it that they develop. According to Michael Lopps Being Geek: The Software Developer’s Career Handbook a developers role is as follows:
Development and refinement of throw-away simulations or prototypes to confirm requirements Feasibility and cost–benefit analysis, including the choice of application architecture and framework, leading to the budget and schedule for the project Authoring of documentation needed by users and implementation partners etc. Testing, including defining/supporting acceptance testing and gathering feedback from pre-release testers Participation in software release and post release activities, including support for product launch evangelism (e.g. developing demonstrations and/or samples) and competitive analysis for subsequent product build/release cycles
Software design Actual core implementation (programming which is often the most important portion of software Maintenance development) The book goes on to say that ‘In many companies Other required implementations who have a need of a developer may only employ one developer who would oversee most if not all (e.g. installation, configuration, customization, of these roles.’ That is a lot of work, and we can integration, data migration) see why developers get annoyed when a designer Participation in software product definition, gets angry if say the design has changed slightly. including business case or gap analysis A pet hate of developer, Rafael Mumme, writing for netmagazine.com is, ‘Telling the developer Specification about some fancy functionality you read about somewhere on a blog. Then tell them to build Requirements analysis it, because, if you saw it somewhere, clearly it’s possible.’
How can we make the relationship bewtween designers and developers thrive?
What is a developer?
de•sign•er Noun A person who devises or executes designs, especially one who creates forms, structures, and patterns, as for works of art or machines.
Hypenotic is a hybrid as says, ‘Being proficient at Photoshop, knowing PHP and MySQL, knowing your way around a server and a couple of CMS systems is critical to your success as a hybrid Designer/Developer. Not only that, but it is extremely helpful in being able to see the big When asked what a designer is there was a picture when it comes to brainstorming ideas, variety of answers. Most being fashion, product creative strategy, pushing projects ahead and and graphic designers. When asked, ‘What is perhaps most importantly, what is technically the role of a graphic designer was many were possible based on the clients design unsure. Designing magazines or packaging were inspirations framed by the project budget and amongst some answers. One man said, ‘It’s just timeline. Essentially, developers who can design putting images and text on a page isn’t it?’ and designers who can code are the jack of all Naivety, you may say. In a sense yes that is what trades. Knowing one informs the other.’ we do as designers, however, ideas are what However if you are not a jack of all trades then bring work to life. The reason many are unsure you have to make a relationship with those who is that design has expanded from the days of can help. Shaughnessy writes, ‘The consequence Letrasets and letterpress. Graphic design is of this huge rise in technical and other demands now almost entirely a digital activity as Adrian on the modern designer is the increasing Shaughnessy writes in his acclaimed book How To necessity for, and dependency on, collaboration.’ Be A Graphic Designer Without Losing You Soul. Yet what if you want to be a hybrid? Cassie He says, ‘We need never again hold a pencil or McDaniel, a writer and designer for Smashdevelop a photographic print from negative, or ing magazine writes, ‘The democratization of create a font by hand’. The computer has resources in this information age means that we revolutionised the design process. It has made have little excuse not to obtain, or teach, at least the act of designing easier and in many ways a basic understanding of each other’s crafts.’ improved how we design. Processes such as Yet Andy Scarles from Innov8 who he himself is photography of type setting were once the job proficient in design and developing argues, ‘We of a specialist, however, as Shaughnessy says, may all be able to go out and buy Developing ‘Graphic design is no longer a Masonic-like craft. For Dummies, yet it won’t make us experts. I Anyone with a computer can practise it.’ managed to study design easily enough at school With computers we are now seeing a rise in and college, yet the only reason I’m competent hybrid developers/ designers. Those capable at code is because I started when I was Thirteen of designing something that is aesthetically creating little games. We need developing in the right, and functional. Lionel Mann a writer for curriculum if we are to gain successful hybrids.’
How can we make the relationship bewtween designers and developers thrive?
What is a dESIGNER?
As Jolie O’Dell from Mashable writes, ‘Good designers and developers rule the web — they’re the ones who build it, after all. And some of the most interesting and useful players in creating the modern design are hybrids between those two disciplines, people who can translate between the disparate languages of the visual and the technical.’ In a sense it is like learning another language. As stated previously many think that we as designers should learn code. Scarles says, ‘You don’t have to learn all coding just some. Think of it as using a phrase book in a foreign country. You normally just learn enough to get by.’ So what choice phrases of words should we learn. Overleaf, is a list provided by Scarles of the most common terms used in coding.
How can we make the relationship bewtween designers and developers thrive?
ICT, according to The Guardian has always, ‘Been perceived as relatively dull and for boys only.’ But that’s changing. ‘ICT is to change to a subject fit for the 21st century, creative, pervasive and designed for all – from children at key stage one through to mobile app programmers working at A-level standard and beyond.’ In January 2012, Michael Gove the Education Secretary, scrapped the existing curriculum for Information and Communication Technology and proposed giving schools the freedom to create their own curricula for the subject. Speaking at the Google and Guardian event, others gave their opinions on where the new curriculum needed to go and the challenges being faced. Matthew Harrison of the Royal Academy of Engineering said, ‘We need rigorous teaching of computing in schools, but fusing design and technology together. We need to be creators of technology, making games or fighting cyber-crime, rather than just passive users of it. We need an education system that allows design and science to be taught alongside each other.’
Example of Properties in CSS Coding
Elements Selectors Elements are designators that define objects within a page, including structure and content. Some of the more popular elements include h1 through h6, p, a, div, span, strong, and em.
A selector determines exactly which element, or elements, the corresponding styles will be applied. Selectors can include a combination of different IDs, classes, types, and other attributes â&#x20AC;&#x201C; all depending on Tags how specific you wish to be. Selectors can be identified as Elements are often made of everything that comes before multiple sets of tags, the first curly brace, {. identified as opening and closing tags. Opening tags mark Properties the beginning of an element, such as <div>. Closing tags A property determines the style mark the end of an element and that will be applied to an begin with a forward slash, element. Properties can be such as </div>. identified as the text coming immediately before a colon. Attributes There are an abundance number of properties you can use, and Attributes are properties used new ones are continually being to provide additional added. instruction to given elements. More commonly, attributes are Values used to assign an id, class, or title to an element, to give A value determines the media elements a source (src), behaviour of a property. Values or to provide a hyperlink can be identified as the text reference (href). in-between the colon and semicolon.
How can we make the relationship bewtween designers and developers thrive?
p{ color: #ff0; font-size: 16px; }
There has always been tension between developers and designers especially, when it comes down to who receives praise for a good piece of work. David McGillivary a designer at OnSwipe says, ‘Giving credit where credit is due and sharing the rewards is better, but unfortunately, in a fast-paced digital environment, whoever is left sitting at the table is often the one who gets the final praise. It is up to both to pass feedback onto the rest of the team in a meaningful context. The cost is minimal, just shaking a hand will make things better even if you did most of the work, but the shared joy will bond design and development teams because they will see the end product as the force that unites them.’
A handshake will often SUFFICE TO SAY THANKS
How can we make the relationship bewtween designers and developers thrive?
‘Suppose you hated every minute of it (learning code)?’ asks Keith Butters, co-founder of The Barbarian Group, who specialise in creating custom software for developers. ‘Luckily, you’re a designer and you can go back to doing the stuff of design. But even if you never write another line of code in your life, two important things happened: first, you probably developed a newfound appreciation for the coders you know and work with. Second, you’ve discovered that you communicate more effectively when talking about implementation of your designs. Two really good things.’
Julian Walker Developer of magical user experiences at the intersection of art and science. Past work includes pioneering graphics and user-interface technologies for Seadragon, Photosynth, Bing Maps, and Silverlight as showcased in multiple TED Talks.
To find out how a relationship could thrive between both parties I asked Jon Harris and Julian Walker of FiftyThree. The company behind the award winning app Paper which won Apple’s Developer Showcase 2012. The app is essentially a piece of paper where users draw, sketch or write almost anything straight onto screen. Please note that this interview had taken place before they had been nominated for app of the year. However, according AIGA, on launch day, Paper became the number one top-selling iPad app. Within two weeks, Paper was downloaded 1.5 million times, with 7 million pages created,that’s enough paper to stretch 1,215 miles or stack up to 3,500 feet. So it seemed they were already heading for success. Firstly, congratulations on the success of Paper so far. Did you ever think it would be as successful as it is? JW: Well it took around ten months to make, and design from start to finish and we got excited when it was just added to the the store. (Apple’s App Store) JH: Never. It seemed unreal when we saw how many people had downloaded it.
Shaper of soulful product experiences across hardware, software and services inspired by a rich family heritage that spans the world. Crafter behind leading brands at HP, Zune, Xbox, and Pioneer Studios with work recognized by Red Dot, IDSA, iF, CES, ID Magazine and Good Design.
Within the ten month period was there any tension between the two of you? JH: Yeah there was. There were silly things like, when I wanted a colour changed a Julian was having none of it. JW: There was always going to be tension. However we’re friends so things were always resolved quite quickly. Do you find that you need to be friends in order for it to work? JW: If you find yourself in a situation where your work is almost polar opposite then yeah it helps. You can laugh stuff off.
How can we make the relationship bewtween designers and developers thrive?
Interview with Studio 53
When working together have you come across any regular occurring problems? JH: Well, there are times that I think Julian is a wizard. I say, “Can we make this glow and spin around whilst pulsing?” Most of the time he tries to do it and it might work, but the best thing to do is to know exactly what you want first. He’s not a wizard. Would you say that as a designer you need to learn code? JH: I never had but since working with developers over the years I have picked things up. I would say no really, as what you need to know is what the tech or software is capable of. If the tech can’t do it then nine times out of ten it won’t work. Has technology or software hindered your progress at all when making Paper? JW: When we first set out we knew we wanted to make it for iPad. When the new iPad (3rd gen) was released in March (2012) we were amazed by the new screen (It had four times as many pixels than the iPad 2) and this allowed us to see more detail and we could start developing more effects which could be seen on the screen, more clearly. We developed software from the ground up to build Paper which gave us more control. JH: We developed a gesture, when swiping two fingers counter clockwise, undos what you have just done. We had to design that from scratch. Do you have any tips for young designers and developers with regards to forming strong working relationships? JH: Don’t be afraid. Always ask what’s possible when designing. I was always asking Julian, ‘Can we do this.’ If he couldn’t then we tried to do something we can. Both of us always talk things through over and over. Even a simple colour change can halt the process, the developer needs to know every detail of the design. Prototype. Use paper or card to build the app or whatever. See what it looks like before putting the developer through a lot of work. JW: A developer needs to remember a designer’s details. Details can be lost quite easily when coding. And talk in simple terms, a designer may not know what you mean, and translating can help. But being friends always helps.
How can we make the relationship bewtween designers and developers thrive?
Know what you want Developers are not wizards
So it seems that having a friendship can help, yet if you do not find yourself sitting next to or working in the same studio with the other half how can you make your relationship last. When asked, sixty three out of one hundred designers said they felt left out when it came to coding. Speaking again to David McGillivary he says that, ‘Developers need to keep designers engaged. When working on previous projects I have felt excluded from the design process once I have given them initial layout designs. So I have had to follow up on their work and see if they are keeping the work within my designs. If not then the relation can come to a halt, both parties need to keep each other informed.’ Shaughnessy argues, ‘There was a time when designers where able to work solo. But in the high tech digital domain, this is rarely an option. When we couple this with the single biggest change in graphic design since the arrival of computerised design in the 1980’s – design (mainly webpages) that can be controlled, altered, even generated by the user – we see the digital designer has to be a new sort of practitioner. There is no room for the old control freak designer.’ So it seems there are still restrictions, and in this case not even technological restrictions, as a designer when designing apps or interfaces. Cassie McDaniel, writing for Smashing Magazine again, lists a few things we need to know. Explain the design rationale. Design isn’t magic, and making an effort to analyze and share design decisions will create a conversation and demonstrate to colleagues that their insights are valued.
Make yourself available. Being a part of the process from concept to realization will translate into a sense of ownership of the project. Ask colleagues what they’re working on. Make your expertise available as a resource.
Design thoroughly Think through the interactivity of the product, which includes designing the on, off and current states, designing error messages for forms, designing 404 pages, etc. This will save your teammates valuable time.
Simplify the explanation. If you can help team members from all levels and backgrounds understand high-level concepts and how they affect a project, you will become more valuable.
Be considerate. Avoid making others wait on you. Be proactive and organized, and ask for feedback often. Learn about development. Knowing even a little about code will make you a better designer.
Be honest about what can’t be done and why. As a developer big ideas often struggle against time and budget constraints; that’s nothing new. Knowing the development constraints ahead of time allows the team to create more appropriate solutions.
How can we make the relationship bewtween designers and developers thrive?
there is no room for the old control freak
‘For God’s sake! Name your f**cking files properly!’
How can we make the relationship bewtween designers and developers thrive?
Usability is so important when it comes to interactive design and the way a project is started can be very similar whether you are a designer or developer. With interactive design, Dmitri Siegel, web art director of Urban Outfitters spoke of the process. ‘Before you design a poster you would do research into typefaces, colours, your audience and a lot more. It’s the same with interactive design.’ So we can see that designers and developers work simultaneously at the beginning, side by side. However, as Siegel points out, “That way of working has to carry on through the whole process. If one walks away then the other is stuck. And the project will be lost.’ We’ve learnt that we need to learn some code to further ourselves for this to happen, yet Jon Harris argues, ‘You can pick it up on the way.’ And Andy Scarles say we can scrape by knowing a few terms. A handshake can be enough to give credit, and friendship may not always be there between the two yet I can help. There have been some great advice, however, I leave you with one more tip for designers from, Julian Walker.
Lopps, M. (2012) Being Geek: The Software Developer’s Career Handbook O’Reilly Media Gary Wolf (1996) ‘The Next Insanely Great Thing’. Wired. Dominic Rushe. Apple sells 5m in first three days | Technology | guardian.co.uk . [ONLINE] Available at: http://www.guardian.co.uk/technology/2012/sep/24/iphone5-apple-sales-first-weekend. Cassie McDaniel. Two Cats In A Sack: Designer-Developer Discord | Smashing Magazine. [ONLINE] Available at: http://www.smashingmagazine.com/2011/05/13/two-cats-in-a-sack-designer-developer-discord/. Ofcom | A nation addicted to smartphones. [ONLINE] Available at: http://media.ofcom.org. uk/2011/08/04/a-nation-addicted-to-smartphones/. Lionel Mann. Thoughts on being a Hybrid Web Designer/Developer | Hypenotic. [ONLINE] Available at: http://hypenotic.com/technology/6099/being-a-hybrid-web-designer-developer. Mirko Humbert. Should You Add Coding to Your Graphic Design Toolbox. [ONLINE] Available at: http:// www.graphicdesign.com/article/should-designers-code-poll-question/. Heather McLean. New ICT curriculum proposed by Royal Academy of Engineering and BCS | Education | guardian.co.uk . [ONLINE] Available at: http://www.guardian.co.uk/education/mortarboard/2012/ nov/13/ict-computing. Jolie O’Dell. HOW TO: Be a Hybrid Designer/Developer. [ONLINE] Available at: http://mashable. com/2010/09/08/hybrid-designer-developers/. Keith Butters. How much code should designers know? | Opinion | .net magazine. [ONLINE] Available at: http://www.netmagazine.com/opinions/how-much-code-should-designers-know. Rafael Mumme. 20 things that drive web developers crazy | Opinion | .net magazine. [ONLINE] Available at: http://www.netmagazine.com/opinions/20-things-drive-web-developers-crazy. AIGA | Case Study: Paper . [ONLINE] Available at: http://www.aiga.org/justified-2012--case-study-paper/.
How can we make the relationship bewtween designers and developers thrive?
Shaughnessy. A. (2010) How To Be A Graphic Designer Without Losing Your Soul Laurence King