Fellow Croatian designer Marko Stupić is nearing the end of his amazing Icon-a-day project. He wrote about the experience in his article How to become an awesome designer in 365 days. I found Marko’s journey so inspiring that I’ve started a similar challenge a couple of days ago. I’m calling it UI Snacks and my aim is also to create something every day for 365 days. Each day, I will fire up Sketch app and produce an illustration of some kind. I’m super curious to see how my skills will evolve.
While developing front-end modules, try to play out different scenarios for each module. Try to think two steps ahead and communicate with your team members what might happen when the module comes alive on a website.
Here’s what you might want to keep in mind when developing a module:
- Missing interactivity – If you got a design which is missing some parts, do your best to prepare the missing styles. For instance, if you have a navigation without the hover and active states, style them anyway.
- Viewport issues – When developing a module, keep in mind to test and style for various resolutions. A module is almost never the same for smartphones, tablets and desktop resolutions. On a desktop resolution, it might not need a bottom margin, while on a smartphone, it might.
- Content issues – If you create a module with a small amount of text (imagine a navigation, or a list of some kind, or a title), test it with different text and try to break it with a large amount of text to see what happens. When it breaks, fix it.
- Tap areas – when styling links in a module, do they have large enough tap areas for mobile browsing? The size of the link area needs to be bigger for mobile users.
Remember, always try to keep things flexible and make each module bulletproof.
I’ve written an article on Toptal about Getting Started with Modular Front-End Development. If you haven’t adopted the technique of building websites as modules, I encourage you to read the article. Thinking in modules has been one of the most significant changes in my process during the last several years.
In my experience, web trends can steer both clients and designers in the wrong direction. We all get sidetracked with things that seem or look cool from time to time. But we must always ask ourselves what is under the shiny surface. It’s worthwhile to stop before embracing any web trends and think about whether they provide real value to the users or not.
Ugly but useful trumps pretty but pointless.
Here are several common trends I see on a daily basis and some of the questions you can ask yourself before making design decisions.