What matrices are, and how to use them in CSS 2D transformations.

In the April of this year, I finally decided to commit to an official Computer Science degree, after looking around I set my heart on BSc from University of London as they had a UX specialism, and that meant I could stick with my hybrid skillset, while deepening an understanding of technologies behind every platform I might ever have the joy to design for.

Long story short, as much as I love learning new things, certain mathematical concepts proved quite difficult to sink in, as you quite rarely get to practice them as a designer or a front-end dev. One of those, for me, were matrices and the transformations they create. To my pleasant surprise, however, while working with CSS transformations, among the usual scale and skew, I noticed matrix and matrix3d. …

Personal Thoughts

Just to be clear this isn’t yet another article about whether designers should code or not, this is for designers who already code and do full-fledged front-end development. If you have ever tried looking around for inspiration, motivation and role models, you may have tried googling “unicorn”, “designer-developer hybrid”, “devigner” or whatever the most current label is.

Unfortunately, by doing so you will likely find many articles by angry designers and developers alike saying that you just can’t do both, or that you’re doomed to be bad at either if you ever attempt it, which is somewhat strange because I rarely see anyone say that about other hybrid professions: full-stack developers, IT projects managers, support engineers and many more. It is understandable that some want to be narrow-specialists and not generalists, and I do not think there’s anything wrong with that at all either! …

In later years we have seen the rise in popularity of multiple out-of-box UI solutions: first libraries (see Bootstrap, Foundation etc), and later more complex but all-purpose flexible guidelines like Google’s Material Design. Many companies also choose to use custom design systems and libraries to streamline their product development process. However, enforcing custom documentation is one of the common struggles, especially with larger teams.

Here we’ll have a look at how to automatically enforce your custom UI-specific rules on top of Material UI with a customizable linter Goodcheck, you can use the same principles to enforce your custom design guidelines on top of other UI libraries, or to define rules for your custom one-off design system automatically. …

It’s an exciting time to be alive as a designer, every year a number of tools come out that make our work easier and more exciting by removing repetitive boring tasks from our lives. With the rise of AI and ML that we can see especially sharply in 2019, as well as good ol’ contributions by fellow designers and developers, the year has already brought in some exciting tools and even if you can’t include them into your workflow, they’re still a joy to use for fun.

Remove.bg

This tool is №1 on my list since I have been using it ever since I found out it existed and I never want to go back to photoshop ever. This is what it sounds like, upload any picture and remove.bg will remove the background within seconds. The tool was initially released in 2018 but has only recently added support for objects’ photos, whereas it only supported pictures of humans before. …

If you’re in charge of designing applications or websites, you will be at least somewhat familiar with IA (information architecture). As it goes, IA is the structural design, or simply put — bones of your application, if the bones are weak, everything else will eventually start falling apart.

The field itself is nowhere new and has been around since the 70s, not only preceding mobile UX, but web as a whole by decades. IA takes its roots in many fields that are now used in User Experience design, including library science, architecture and cognitive psychology.

“I mean architect as used in the words architect of foreign policy. I mean architect as in the creating of systemic, structural, and orderly principles to make something work — the thoughtful making of either artifact, or idea, or policy that informs because it is clear.” …

UX design is indeed a complicated multi-step process. There are no fit-all guidelines and practices, and what you do will vary from project to project. One thing seems to stay constant, however, whether you’re bettering or designing a new feature, part of a flow, or an entire app from scratch — and that is a paper-pencil sketching step. …

With the possibilities of modern CSS and multiple material design libraries, it is understandable why shadows are used in so many modern interfaces. They let you create multi-dimensional designs that are realistic looking, easy to develop and have that modern look and feel.

In spite of being used so widely, some interfaces look just so much better than the others. I wanted to write why this happens and what the general rules of thumb are when working with shadows in user interfaces.

1. Make shadows subtle

Getting started with any new language, framework or just about anything can be challenging, that’s why there’s such a plethora of courses and tutorials out on the web dedicated to getting you on track of using whatever it is you’re interested in.

Sure, some people can simply read the docs, look at examples and get to work, but for a lot of us spoiled by the age of media with easily available interactive content, going through a wall of text inevitably gets boring and information extra difficult to absorb. …