Web Designer Toolbox

Our go-to apps and software for building good stuff

It’s easy to find articles aggregating the tools for web design and graphic design software. Like a huge shopping mall, these lists offer a huge variety of apps with appealing descriptions. And just like aisles full of bright, advertising packaging they scatter the attention. What things I actually cannot do with that tool? Do I get to pick one of the alternatives or use each one a little? Why this app made it to one list, but was excluded from the other?

Sometimes we find ourselves wishing for a bit of word of mouth: a friendly description from the professionals who actually use given software in the work routine. And this article is just that — a look around our web design workshop. This list doesn’t contain project management tools or specific, edge case resources to keep the reader from distraction. Below we share our setup and tools of choice (mostly free and with collaboration enabled), that we use through out our team for solving web design challenges on various projects.

Wireframing (charting out the user flow)

Balsamiq

With distinctively sketchy line art icons and comic sans font Balsamiq creates a playful perception. But do not mistake it for an amateur tool: though it was designed with non-technical users in mind, you can create pretty much anything with it. Advanced designers love its interactivity and sharing simplicity.

The creators themselves say that the sketchy, “draft” look is very much intentional — it stimulates brainstorming, focusing on the user experience, not meticulous details.

Design systems and prototyping

Figma

For the past couple of years, this new kid on the block got a skyrocketing success. The UX tools survey shows Figma was voted #1 by web designers around the globe in 6 categories out of 7. What can I say, even the author of these words fell in love with this extremely versatile, intuitive, and still developing platform.

Figma is both a browser-based and desktop app. It allows collaboration on several tiers (viewing, commenting, and editing), has basic drawing and photo editing tools, a comprehensive project structure dashboard on the left, every possible tool for work with UI elements, a huge font library, and presentation workflow which mimics the user interaction with the mockups.

Though Figma still gets the updates from time to time, the platform already has everything for web designer needs from prototyping to final designs, and novelties are introduced in a friendly, non-destructive way. There is also a growing community that offers hundreds of free assets, plugins, and UI components to use.

Adobe XD

“Big brother” of modern design system apps which shares the established reputation of the family of Adobe products: it is wholesome, but meets a new user with a significant learning curve. The benefit is the seamless integration with other products — you can edit a library of photo assets in Lightroom or Photoshop, and they will be instantly updated on XD design.

Adobe XD, unlike many other Creative Cloud apps, is free but has a Premium tier that unlocks more storage, edit history, and links for sharing.

Among the other features common for the design system platforms, Adobe XD can brag about having element states, which allows building interactive mockups, and 3D transforms that show the mockup depth (how many elements are stacked together). Creating with these tools helps to focus on the user experience in the first place.

Graphic design programs

Illustrator

All hail the king of vector! Perfect for logo, icons, patterns, and all things 2D visual, Illustrator is also great with typography, which is extremely important when it comes to the web. It has a vast library of fonts and treats text also as a vector, meaning you can edit the outlines, even warp and distort it.

This is a universal tool for explaining any kind of concept design into the imagery ready for web.

CINEMA 4D

An ultimate — there is no other word — software for creating and animating 3D characters, abstract models, particles, and many more. It is comparatively less known in the modeling community (as opposed to Blender and Maya), but it is focused specifically on digital art, not gamedev or cinema.

Truth be told, it is cumbersome to learn (as any 3D modeling program), but in skilled hands, it bears unique and authentic visuals, like the one below, that liven up the web design.

Code

Among the coding tools we use are Javascript, React, Next.js, TypeScript, MySQL, and more. The choice of programming frameworks and approaches depends heavily on the task, so there is no recommending one over the other. But when it comes to developing and collaborating on the code there is one platform we come back to each time.

GitHub

Being the industry standard of versioning, GitHub keeps adding new ecosystem features for better testing and deployment. Using GitHub repositories for each project makes the maintenance easy, as well as access for the customer team.

CMS and administration

Strapi

An open-source content management system, a good fit for simple landing pages and blogs. Strapi can be integrated with a dozen of frameworks like Gatsby, Vue, and Angular. Its power is flexibility: as a fully customizable CMS, it can be configured however you want. Not only visual style but the content structure, required fields, file requirements — it can all be set through the rather simple dashboard. We set up the full admin account for our customers who go with the CMS, so even if they have to add more content in the future the process flow is painless and the outcome consistent with the overall website.

Strapi doesn’t compete with WordPress, but it is much leaner.

Testing

Browser devtools

Every self-respecting browser today has a dashboard that allows inspecting the elements across the published or locally deployed webpage and its overall performance. We test for Chrome, Safari, and Mozilla in the first place, as they take up the majority of the internet browsing market.

Apart from front end parameters, such as font weight, margins between blocks, and relative positioning, developer tools show all the scripts and third party processes that happen while loading the content.

A skilled programmer can see if there is a gap in the loading flow, or on the contrary, excessive processes are triggered and slow down the whole page.

Chrome PageSpeed Insights

Based on metrics from the open-source Lighthouse (which is now available in the Chrome devtools menu and as a browser extension), PageSpeed Insights is another free tool that audits the website performance.

What makes it different is that it only works with the published pages, but performs a check imitating an external device. In a matter of a few seconds this app shows a short report, highlights opportunities for improvements, provides suggestions on how to adjust the page to get better diagnostics benchmarks and shows the history of audits. Clicking on that blue-gray pill on the right extends the report with a metric explanation.

It is not mandatory to follow the suggested actions for improvement, but let’s say that making your website friendlier to the browser performance metrics gets you points with the search engine. So while this is not strictly a design task, it definitely has impact on the final product.

Did we forget anything?

Now we’ve got to the bottom of the bag.
There are apps for creating mood boards, UI icon kits, Pantone color codes, and a hundred other little helpers that come useful in one project or another. They are not the pillars, though, so we have skipped them in this article — maybe next time ;)

We hope this list of essentials will help you as a starting web designer-slash-developer, or maybe bring a thing to your attention if you are a design veteran.

Originally published at https://dops.digital.