Seeing design in 3 simple parts that make it friendly for development
The intent of this article isn’t to teach design to developers(no harm if you want to learn though. I leave it upto you completely). The idea is to see the designs in a way that it becomes more friendly to you rather than a mysterious object that you need to struggle with. By understanding the pattern of what the design team has presented to you, you’ll be much better equipped to work with it. More often than not, just by seeing the design in its broken down, simple components, you’ll be able to approach it with an unmatched clarity. It will make the design much more meaningful to you. You’ll be able to appreciate what went into creating it and with that insight you can approach it with much greater effectiveness. Maybe you won’ t have any more rounds with the QA. You’ll probably become best pals with design and QA team members.
Dear developers, don’t see design as a monster that’s out there to ruin your sleep and make your life hell. Its purpose is to add more meaning, structure and beauty to the work you’re already doing.
Since I as a designers need your engineering capabilities to make the designs a reality by converting it to useful & meaningful products, I want to to make it as easy for you to access designs as possible. Here’s 3 things that breakdown the monstrosity of design for you into 3 simple, unforgettable components — content, layout, interaction.
Though there’s much more to design for designers to understand and create — like emotional part of it, the experience to be drawn from it, productivity and efficiency to be derived through designs, development doesn’t need to get their heads around this if they don’t want.
Knowing the purpose of these parts and what can go wrong with it may help in getting them right probably in the first time.
*If you’re already pro you could probably skip the description and purpose and get to ‘what can go wrong’ parts for each’.*
1. Content
Everything you can read and understand in the design can be labeled as content. The words explaining how to navigate through the application, the sentences describing the various aspects of business on a website. The data both input and output is the essence of the application that helps make sense of the world. The images(real and graphical) and icons support the words and data to make the entire content easier and more interesting to consume.
>Purpose:
This part of design is the king. It forms the bedrock of the product being built. Without this, there’ s no meaning.
All content must always be represented without any flaw.
>What can go wrong here:
The content can often get distorted and damaged when code is operated upon it. Sentences may get harmed by typos, wrong or missed punctuations, incorrect letter cases, unwanted spaces between the characters or breaks between words and lines. It may sometimes get hidden or become inaccessible on the screen. The images may undergo undesired cropping, squeezing, blowing up or shrinking down. The data may get repeated. It may go missing, or may not be getting stored. It may get incorrectly shown in a different part of the application. Unintended, garbage data may show up.
The biggest thing that can go wrong here is for design to break when content different from the design is used.
2. Layout
Manner in which the content is placed and positioned on screen is the layout of the product. It is the spacing of content from the screen edges and from each other. It is the alignment, the size of content. Many times additional elements are also used to enhance the placement of content like lines, shapes, shadows etc…
>Purpose:
Picture all the content just put on the screen without a thought about which content occupies which space and position on screen. Are you able to make sense of it?
>What can go wrong here:
It is not hard to image when the placement is off by a lot. But things mostly go wrong in minutest sense where layout looks almost okay but doesn’t give the right feeling that it should. The alignment may be off by just a couple of pixels, or many items might not be aligned to one side. The spacing between different content may not be consistent across the screen. The width of sentences or the size of images may not appear correctly. Content may overlap or run into each other.
3. Interaction
This is the easiest to explain and gets the most errors. Whenever a user hovers, clicks or taps on the screen, shakes, rotates, swipes the screen to access content, it can be put in the basket of interaction. Links, buttons, input forms, symbols, onscreen directions form the trigger points for interactions.
>Purpose:
To allow users to get ahead and reach the end point for accomplishing or learning something.
>What can go wrong here:
In case something is wrong here, it will obstruct the flow for users to reach to the next content. The links may be missing where a user clicks but nothing happens, it may be broken leading users to a page not found or, mislead users to an unexpected content. The accessibility of the clickable area might be compromised, for ex. rather than the complete button only the text or some other part of screen is clickable. The hover states are not implemented consistently. The transition from one screen to another isn’t smooth. The layout of the screen changes as you click to view some other content. Complete content is not accessible after the interaction with screen. The response rate of the screen may be delayed when users hover or click over something.
Having said all this, it is also important for the developers to understand what the product helps users achieve.
Developers have to be aware of what is it that their engineered product is helping their users perform.
With this knowledge you’ll be able to question your execution more thoroughly in the areas that I have listed above, along the lines of what could go wrong. In turn your output will be loved by your team and your users.
You can also checkout some more practical tips(of UI) to harness design for greater development. This has more illustrated examples of where design implementation can go wrong specifically with UI.
