Web design is needed to solve business problems. And this rule is important if this website offers both beauty products and online casino slots. In this case, there are always certain restrictions that should be taken into account: on the downloadable content, its updating and display on different devices, on working with databases and external systems, and not only.
However, not all designers think about how their layouts will function on a website or in an app.
Not Taking Into Account Adaptive Layout and Non-standard User Screen Resolutions
Designers tend to create layouts for three screen resolutions:
- For computers and laptops: the width of layouts – 1 920, 1 440 or 1 360 pixels, usually for sites that take only one of these resolutions.
- For tablets: the width of layouts is 767 pixels.
- For smartphones: the width of layouts is 375 pixels.
The design looks good, the first screen beautifully conveys the necessary information and involves scrolling further. It’s often forgotten that on real devices, the first screen will be smaller in height because of the browser window, the field with the site address and the bookmark bar. The call-to-action button can even go off-screen. All this breaks the design.
It happens and the situation when the specialist doesn’t adapt the design for ultra-wide 3,440 x 1,440 monitors and does not explain to developers how the site should behave when the screen width changes. Solve this issue with these:
- Rubberized layout, where the entire site stretches proportionally across the width of the screen. But it should be borne in mind that the content can get too big and will be visible only a third of what was supposed to fit within one screen.
- Adding margins on the right and left. Keep in mind the fixed elements on the screen and the background videos and images that are cut off at the edges of the screen on standard screens.
Not Working out the Behavior of Dynamic Page Elements and Animations
By dynamic page elements we mean anything that can change its state – view, content – depending on the position of the mouse cursor, the fact of clicking or dragging elements, focus, time, page scrolling, state of any data on the page.
At the design stage of dynamic elements you need to imagine, explain and draw how this element will behave next or how it will react to certain events.
Often we forget to draw and think about hover states when the cursor is pointing at an element, click or drag states, focus states for buttons, links, forms and clickable elements. All of these states help users know that the item can be clicked on, that the object is in focus, or that there are errors in the field.
When working with forms – besides error states and invalid fields – it’s worth remembering about messages about the successful submission of the form. This lets the user know that all is well and that his data has been sent.
Some elements can be dynamic in and of themselves. For example, if the site has a countdown timer, a stopwatch, site loading screens, data loading messages. Not only do you need to draw what these elements look like, but also what happens to them in the process and what happens after the action is complete.
For example, if we talk about the countdown timer, you need to consider the change in numbers and change the width of the entire text due to the different width of individual numbers – if it’s not a monospaced font, where each character always occupies the same width, which allows you to focus only on the number of characters. To do this, make a design of other states or describe to the developers how it should change. And we also prepare layouts or animations of what will be displayed at the end of the term.
Not Being Interested in the Formats and Data Types of Content Dynamically Updated on the Site
If the site contains jobs, news, events, teams, stores, and other data that will be loaded from external systems and actively updated, you should ask the customer in advance:
- How this data is stored.
- What information is or will be available.
- How and by whom the data will be updated.
- What difficulties may arise.
This will allow you to define a complete set of data to work with – or understand the new design and layout constraints.
For example, when designing a company’s HR portal, we can’t blindly design a job search page and each job separately. First, we need to know what information on jobs will be available. So, if there’s no information about the metro in the vacancies, we shouldn’t draw that in the layout either.
We need to find out if fields or entire sections are required. If we’re doing a job design, can a field with a work schedule or a metro station be completely missing? If we’re doing sections with articles, could a section be empty? Could there be no upcoming events? Can the client delete all the news?
With questions like these, the designer identifies an additional set of states that need to be redesigned and passed on to the developers.
