UI Snacks

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.

Bulletproof Front-End Modules

While developing front-end modules, try to play out different scenarios for each and every 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:

  • Interactivity — If you’ve got a design which is missing some parts, do your best to prepare the missing styles. For instance, if your UI designer gave you a static mock up a navigation without the hover and active states, style them anyway. Another thing to keep in mind during development are the links — do they have large enough tap areas for mobile browsing? The size of the link area needs to be bigger for mobile users. Test the tap areas in different scenarios and in different environments. When you notice the UI is broken, fix it.
  • Viewport issues — When developing a module, keep in mind to test and style for various resolutions. A module is almost never the same for smartphone, tablet and desktop resolutions (and everything in between). On a desktop resolution, it might not need a bottom margin, while on a smartphone, it might. Test out as many resolutions as you can. Once the module breaks, fix it.
  • 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 content and try to break it with a large amount of text to see what happens. When it breaks, fix it.

Remember, always try to keep things flexible and make each module bulletproof.

Trends vs. Value

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.

—Kate Rutter

Here are several common trends I see on a daily basis and some of the questions you can ask yourself before making design decisions.

Continue reading