Exploring the landscape of modern web design

Who are web designers, digital designers or, UI, and UX designers? Are they designing beautiful user interfaces or creating marvelous user experiences?

Maybe they can just draw simple wireframes and predict user flows without fancy mockups?

Do they even need to design awesome motion prototypes in tools like Principle, new cool Invision Studio, or super-cool After Effects after the wireframes are done? Maybe they can just jump into the code editor and start producing those gorgeous screens with HTML, CSS, and a little bit of JS?

I would like to continue writing this in the form of a question-only article, but that wouldn’t be fair — wouldn’t?

To answer some questions above I made a list for myself initially to see what I deal with every day. I expanded it with some other tools I see the community is using and — here’s it is!

NOTE: Here’s the list of topics I follow. Some of the apps and services I mentioned below, I haven’t used. I’ll do my best to separate all thematically.

Tools (every) designer should know

• Framer X — create interactive prototypes in a hardcore way (yes, you should learn some React and JavaScript/TypeScript to use it properly).
• Principle — easy and simple to use interaction prototyping with lack of support for vectors when importing 😞(version 5 also supports Figma imports).
• InVision Studio — a child by Sketch and Principle with blistering feature (and bad performance, lacks some basic stuff, still no built-in project export). It’s version 1.8.0, and with regular updates, we could see it as a serious Sketch rival.
• Adobe XD — tested at the beginning, it sucked, now it should be great, especially after Adobe set it free wandering in the wilderness. Adobe is giving it for free — yes, you read that correctly. I should give it a try.
• Sketch — oh, Sketch, a tool that took a large piece of cake from Adobe, still number one for UI design, IMHO. Its plugin eco-system is a blessing and a curse. At moments it’s performance can suck big time.
• Figma — it’s (sort of) free, it’s in the cloud and it’s platform agnostic. My second choice for UI design. Lacks plugins, though. Exporting to PFD sucks, but who uses PDF anyway…
• Adobe Illustrator — my good ‘ol friend, you wanted to be all, but let’s face it — you’re only the best vector illustration tool ever.
• Adobe Photoshop — a starting point for many of us. These days I use it only for photo editing or minor image corrections and exporting gifs.
• Affinity Photo — a super cool and cheap alternative to Photoshop. No subscriptions, no strange pricing. Works like a charm. Plus, one of the top iPad image editing apps on the AppStore.
• After Effects w/ Lottie and a Bodymovin — yeah, we’re getting there. First, you should learn AE which can be frustrating, and after that just learn how to implement Lottie library and make all animation work flawlessly. Did I mention it’s JavaScript?
• Code Editors (Atom, Sublime Text, VS Code, Brackets, etc.) — something you’ll spend your days in so choose carefully, I switched from Sublime to VS Code, works great. But that code helper 100% CPU was driving me nuts. Somehow it stopped, maybe it’s me excluding files or just an update.
• CodePen — the divine online code editor tool for quick chunks of code or just bragging with some great stuff you figured out working on your real projects.
• XCode — it’s like the worst-case scenario for a (web) designer, everything is similar but somehow different. After working in the browser I had to get used to those damn constraints and dynamic units.
• Android Studio — tried and miserably failed, the old versions are just a huge pile of crap. The new one is a bit better for designers.

Communication, collaboration, and versioning tools

• Slack — a great communication tool with the new logo, get’s expensive after you realize you could really use that chat history. For the fans of mIRC.
• InVision — for presenting your new and bold design to the clients online and getting comments from them to change those colors. Also, the best way to get in touch with Clark Valberg.
• Marvel app — not sure if this goes under collaboration or design tools. It’s an all-in-one platform from wireframing to the hand-off, collaboration, and user testing.
• Spectrum — nice try on community platform with a lot of “Oops, something went wrong. Sorry!”. Bought by GitHub so we’re expecting a lot of good changes regarding performance and stability.
• Trello — a collaboration platform with a lot of boards, cards, integrations, and gettin’ sh*t done features. I would recommend it for lighter project management.
• JIRA — some of the colleagues use it, it’s like Redmine on steroids.
• Asana — work management platform similar to Trello, so just choose one.
• Basecamp — project management tool with great features and lousy banner positioned fixed over navigation.
• Git (GitHub, Bitbucket, GitLab ) — git initand start committing, pushing, and pulling that code. Oh yeah, why the hell we should learn how to rebase? And what about that unlimited free private repos by Github, how cool is that?
• Zeplin — handoff tool trying to connect impossible — designers and developers. Just kidding, it’s a good guide for developers where they can get all kinds of info and styleguides on how to implement design better.
• Abstract — a git versioning for designers. Sounds funny, works actually.
• Trunk — also versioning, recently bought by InVision so we’ll see what the future holds for this tool.

More on the design versioning tools below.

Design Versioning — It’s true, it’s here, let’s talk and learn more about it. 💚

(New) technologies you should know about

• (Responsive) web typography — yeah, I hate math too, but that’s why I always copied in school from the best students. Use these formulas wisely.
• Variable fonts — still didn’t use it, my shame. Probably the future of (web) typography. Just imagine — a single request for all weights!
• CSS grid layout — the best thing that happened to CSS since CSS. Powerful layout system; easy to use and a bit challenging to understand at the beginning.
• CSS modules — Sounds fun, but try to avoid it if you can.
• JSS — don’t go there if the client doesn’t insist. What sick kind of person created this monster? Actually, I don’t care — use it but be warned. There’s a reason why gods created HTML, CSS, and JS separately. Fight with your developers about this! It will make your life a living hell.
• CSS 4 — awesome new selectors (most of them I will never use) and endless possibilities. Yeeeeaaah!
• Sass — yeah, people still use it. We switched from Sass to PostCSS and never looked back.
• Less — similar to the Sass but with different syntax and less cool.
• PostCSS — such a powerful tool! We used it to create our own toolkit Gator UI. Here is our experience after using PostCSS for one year. We forgot that Sass is still around.
• React.js — JS library from Facebook to make our social life hard and our development even harder. It’s subjective, I’m just not a fan of React (or components).
• Vue.js — another JS framework and its community are growing fast. Never used it, but the clients will make sure that this change.
• Angular(JS) — not a fan of Google, but AngularJS was great. Angular 2,3,4,5… is not so great.
• PWA — rising community, reliability, and smooth animations are some of the things that makes progressive web applications hot on the market.
• Gulp — great task runner and tool for automating the build process. Just learned to work something in it and Webpack came.
• Webpack — some sort of assets bundler, we’re using it for SPA and PostCSS. I suck at deeper knowledge about this, as our developers would say, exquisite tool.

New ideas and workflows

• Design systems — something we all would like to work on. But, often it falls out when we write hours in the project estimates. Design systems work both for large and small teams who want to make the project more cohesive, clear for everyone, reusable, and a living organism. I recommend the book by Alla Kholmatova Design Systems. It provides a great resource, tools, and tips on how to do it.
• Designing for Augmented Reality (AR) — it’s been here for a while, Apple is pushing AR on iOS, but I still lack to see a mass use of it, besides games.
• A voice user interface (VUI) — Hey, Siri, Alexa, and Cortana! Why is VUI important? While I’m using VUI I don’t think or look at its design, I just use it. That how important it is. Very. Like a doorknob.
• Sound design — it’s a very important part of our day. Sound notifications, regular calls, Skype calls, messengers interactions, the sound is a crucial part of great user experience in this kind of application. Stay unique is desirable, but be usable is more important.
• Internet of Things (IoT) — it’s still techies wet dream, but more and more regular people are getting into it. Be clear and simple as possible, have in mind some that many people don’t know usual digital behavior patterns, so be very explicit when you design for IoT.
• No UI design — invest a few dollars in yourself and buy The Best Interface is No Interface by Golden Krishna. The book literally drags you in and tells a great story about invisible UI.
• Microinteractions — it’s a way to show people who use your app that you care about them.
• Flat UI is out — long live Material Design 2.0!

Trends

Ok, let’s face it, all of this above can be declared as trends one day in the future, but now we’re talking about short-term trends.

• Typography — Using wide typography like Druk or Ringside Wide and Extra-wide obviously.
• Redesign everything popular (Netflix, Youtube, Spotify, etc.) and share your process and design on Medium and Dribbble. It’s a good practice, some people got great job offers after someone saw their work.
• Cryptocurrency — a digital or virtual currency that uses cryptography for security. I didn’t work on any crypto app or design it. But, mostly it’s dark UI with an isometric illustration.

Must use design resources and self-promotion

• Dribbble — the best design community at the moment. Depends on how you feel about it, Dribbble is helping in unifying the design of the web. People seek inspiration there and all of a sudden everything looks the same.
• Twitter — you can really learn a lot if you follow the right people. It’s not just cats, dogs, and Trump.
• Muzli — great design inspiration resource. I recommend you follow it and feel bad after you see all the super-awesome design people share.
• Prototypr — freaking awesome source for the latest tools, trends, and news in UX, UI, and front-end design.
• Behance — overshadowed lately be Dribbble, Behance was the top network for creative professionals. Adobe bought it a few years ago and redesigned to fit into modern community trends. You can still find beautiful creative work there.
• CodePen — a place you go to admire all the people who implemented that weird Dribbble design explorations and made them real.

Just look at this Still life in pure fu*king CSS!

Just look at it.

• Product Hunt — a platform where I go to download all the utility apps and then talk crap about how my Mac is slow and lags.
• Medium — a platform designed to gain some reach in the community you’re interested in, and sharing your thoughts and materializing them into articles. I have a 5-years-old and a 1-year-old daughter. We often clap to the youngest one when she does something great. At Medium I feel like my daughter waiting for the claps.

Final word

Many stuff in this article is exaggerated on purpose. The point is to (somewhat) humorously present what we as designers deal today with.

I use many products from the companies I mentioned and they improve the quality of my life and work.

Some products I haven’t mentioned above, maybe someone uses Flinto, not Principle, or Photoshop not Sketch. I don’t — we could say that this is a subjective article.

That said — hope you enjoyed it!

Thanks for reading! If you enjoyed this article, I would really appreciate you hitting the 👏 button. Connect with me on Twitter @tomic_mihael with comments or thoughts.