Creating great work needs time and a great amount of attention to detail. However, sometimes even experienced designers make some mistakes or overlook some areas while creating their masterpieces.
The following best practices for digital designers and developers are simply a reference to be used by them, while building designs or following design specifications, whether you are doing in-house work or assets as freelancers.
Try to keep your paddings equal on both the left and right sides of your layout; starting from the header/action bar elements, such as the logo, home button, menu, search or share icons, etc.
This helps improve overall experience and also makes it easier for the user to focus on content. It can also have a hint of possible scrollable content in case an element is “spilled” out of padding, suggesting that there is more scrollable content outside the layout.
Depending on the device you are displaying your website design, paddings should be adjusted accordingly.
Using some increments will make it easier for you when building design styles and the overall layout. This should also be defined in the specification so the developer can reuse the values and get the sense of element relations throughout the layout compositions.
Let’s say that we have a profile image, full name and job position labels, with a “view bio” button below it. Of course you will adjust the spaces according to overall aesthetics and readability needs, but try to keep them in meaningful increment values such as 20, 40, 60, 80 or 15, 30, 60, 90, 120 pixels.
Sometimes there will be exceptions, but your design specifications will overall be clean and the developer will be clear about consistency while reading your specifications. In this case, you might use 30px space from the image to the person’s name, 15px space from the person’s name to the job position label and again 30px to the “view bio” button. Not having precise numbers can confuse developers or bring inconsistency throughout your design. Imagine one spacing to be 17px while the other one is 28, and the next one is 31. Visually some of them may appear the same, but remember that there is a developer reading these specs after you are done with your deliverables.
Type styles and values
It is important to use all typography values defined in design specs and keep in mind that line spacing and letter spacing can make a huge difference in design and experience.
For example letter spacing can change the overall layout appearance, but on the other hand, when handled poorly, it can decrease content readability. The same applies to line spacing.
Remember just how annoying it can be when you cannot read a simple paragraph because your eyes keep adjusting back to the previous line of text. On the other hand, your eye cannot solely focus on the current line you are reading because of small proximity of the upper and lower text line of the paragraph.
When designing text, there is a point where we stack paragraphs. We should keep in mind to divide our content by leaving some space between each paragraph.
There is often a case where the content is stacked with no paragraph separations and this just makes it harder to absorb content and easier to get lost within the lines. Another good practice is to make an indent to each paragraph that follows (never place indent on the first paragraph of the chapter), but if you do so, leaving empty space between each paragraph is not needed.
When it comes to justification, avoid the “justified” style and keep your text either left, right or center aligned, especially on low character count per line. This breaks text with empty spaces and makes it ugly and very hard to read. The ideal character count per line is 70-100.
When stacking paragraphs, make sure that each sub-headline is visually grouped / closer to the paragraph it belongs to. There should be more space from the ending of paragraph “A” to the title of paragraph “B”. This makes it clear which paragraph the title label is related to. Sounds like common sense, but this mistake can often be seen on websites or apps.
Buttons and icons states
Pay close attention to hover states and including them while designing a web layout, otherwise it decreases the experience and might confuse the user. Avoid crazy transitions on buttons so you don’t get a circus on your layout.
For example if you have a green-filled button with rounded corners, don’t make the hover state to be stroked, purple style with corner… and add drop shadow effect to it.
If the designer didn’t provide all hover states in the specification, try to spend just a few seconds and see if there is already a similar case for button behaviors, perhaps some different size button or an icon. Sometimes for icons there is no “selected” or hovered state available as an exportable asset, but it is rather defined as “alpha=70%” (for example icon behavior on mobile phone / native app).
Text links inside paragraphs
Define the style of text links inside paragraphs whether or not you currently have them in your layout designs. This is an important element in digital products and there is a big change it will appear eventually inside your website or app.
Make the link stand out but don’t make the type size bigger than the body text (or whichever type style it appears within). Good practice is to use a different type color and perhaps underline or italic. Try to avoid using multiple differences in style such as color+bold+italic+underline.
Stick to 16:9, 4:3 and 1:1 image ratios since those are usual standards for images and video. These might vary according to your design, whether those are portrait or landscape or they just depend on the media source.
Sometimes there might be a slight adjustment but a good practice is to avoid random formats like 15:13 or 4:4,5 and so on. In this way your media might look off or just get cropped unnaturally (for example you have perfect 4:3 ratio photos on your website but your layout image frames are designed to be 5:3).
Common clickable areas on mobile phone
For iOS apps, by Apple’s guidelines, buttons and clickable areas around icons or other CTA’s are recommended to be minimal size of 44px (88px for retina / @2x), and for Android apps, by Google material design guidelines there is 48px minimal standard (96px for xhdpi density / @2x).
While making clickable areas on your web layout (@1x), keep button heights and overall clickable areas as mentioned, try it and mirror view it on your phone as needed and adjust accordingly.
Header bar behaviors
There are many types of main or header navigations. It is all up to design.
Keep in mind that if the header surface is. For example, 140px high, you might want to add an additional state to your specification which shows it decreased by height. This happens when the user scrolls so there is more room for content to display.
Sometimes the header gets hidden or transparent or collapses to icons or labels floating around or on top of the screen. Don’t let it just flow and cover other elements on the layout.
Scrollable content visibility (tab labels, thumbs, cards)
When adding multiple tabs to your action bar, stacked thumbs for gallery preview or card items to be scrolled through, keep in mind to make it obvious to the user that there are more items than the ones you see at first glance.
To achieve this, leave one item only partially revealed (half of the last label, half or small part of card visible, etc), and define it in specification as an important element, intended to be that way. Otherwise all element spaces and widths might be equalized to fit layout_width perfectly, and when there are no arrows or “view more” label, user might not see them.
Edge cases or unusual behaviors
Make sure to deliver specs for edge cases and communicate them with your team / developer to avoid confusion. Of course there might be some additional adjustments or workarounds for the project, but thinking about these will help developer understand your designs better, and will save a lot of your time in the future.
Sometimes it is crucial to make more tablet or mobile layouts for web design because of some unusual behaviors or layout elements, and sometimes only basic elements are needed to be defined, it all depends on design for the specific project.
It all comes down to communication with your team and providing detailed guidelines.
Digital designers and developers should work closely on the projects but once the specification is delivered to a developer, it should be followed precisely. Make sure that you deliver all specifications to your developer and sync with them on the project while handing it off.
Using the Zeplin plugin for Sketch or the Inspect feature from InVision are good ways to go for specification deliverables, but don’t rely solely on technology- count on human factor and communication as well, since there are human beings behind each computer.
Learn how to use WordPress for your first website with this guide.
If you’re interested in project management, learn about workflows with JIRA.
Become an expert when running design sprints with a remote team.