Web design: tools and resources

When it comes to designing a product, such as a website, we rely on various resources to simplify the process, increase efficiency, ensure accuracy, incorporate current trends, and facilitate implementation. In this blog post, we will explore several valuable tools and resources that can assist you in your design journey. The list will include both paid and free alternatives, providing you with a comprehensive selection of options. By the time you finish reading this article, you will have gained insight into some of the useful tools available to support your design endeavors.

Essential Applications

Let's begin by discussing the essential applications we use for design purposes. One highly recommended option is Figma, which has significantly improved in recent years.

Figma is a free application, eliminating the need for a paid alternative (although some features may be limited for free users, it's not excessively restrictive). Initially inspired by the popular macOS app Sketch, Figma has since developed its own unique identity. In fact, I dare say that Figma has surpassed Sketch in terms of functionality. Its user interface is intuitive, logical, and clean. The application offers a plethora of options, and if you find yourself in need of a specific feature, chances are there's a plugin available for it (and yes, plugins are also free). One notable feature of Figma is its live preview, which allows users to view and collaborate on files in real-time. Additionally, Figma includes an excellent built-in prototype tool, albeit with some limitations. It's worth mentioning that bugs and crashes are exceptionally rare with Figma; it simply works flawlessly.

When it comes to creating wireframes, a different application is required. While I personally appreciate the traditional approach of using paper and pen, it may not be suitable for presenting to clients. Therefore, we have transitioned to using a graphic tablet along with Photoshop, which has its own advantages and disadvantages (which will be described in the following paragraph).

However, if you're looking for an alternative to Photoshop, which is known for its expensive subscription price, there is a highly recommended specialized wireframing application called UXPin. Although the free plan of UXPin has limitations (such as allowing only two prototypes at a given time), it is still a very good option. Another excellent alternative is JustInMind, which is free specifically for wireframes. We have personally tried and tested both options, and they have proven to be reliable and efficient.

In certain situations, image editing becomes necessary, whether it involves vector or raster images. For such tasks, we rely on Adobe Suite, specifically Photoshop and Illustrator. These programs offer strong support, regularly introduce new and impressive features, and generally maintain stability. However, they do have some drawbacks. Firstly, their price can be a significant barrier. Additionally, the abundance of features in these programs can make navigating the user interface cumbersome. Moreover, the large file sizes necessitate a powerful computer, and the interface itself can feel clunky and outdated.

As an alternative to Adobe Illustrator for working with vectors, I wholeheartedly recommend Affinity Illustrator. In fact, let's take it a step further and acknowledge that all Affinity apps are excellent. One of their standout advantages is that they require only a one-time payment. Affinity apps have their own unique path, vision, look, and feel, setting them apart from mere Adobe imitations.

Now, let's explore some free alternatives. You may find it hard to believe, but there is a free, browser-based "Photoshop" available called Photopea. Give it a try; it's completely free and closely resembles the famous Photoshop. One downside is that being browser-based, it can be slower and more challenging to use compared to its desktop application counterpart. When it comes to free alternatives for working with vectors, both Inkscape and Vectr are highly recommended. And I mean, they are really, really good. Since both options are free, you can experiment with them and determine which one suits you better—Inkscape is a desktop app, while Vectr is a browser-based application.

The Resources

Alright, let's now explore the resources you'll need for the design process. Let's start from the beginning: finding inspiration. To stay updated on web design trends worldwide, you can utilize the following websites:

1. https://pageflows.com: This website offers a vast collection of content, mostly in video format. It showcases prototypes and provides insights into the intended use cases for various projects. However, it's worth noting that some of the content requires a paid subscription, and occasionally, you may not want to watch those small video clips.

2. https://pagecollective.com: Although not a massive database of designs, this website is known for hosting high-quality designs. While it may not be frequently updated, the designs it features are bursting with creativity and excellence. Page Collective offers a wide range of design styles to explore.

3. https://www.awwwards.com: Awwwards is an outstanding website that hosts an extensive collection of website designs. It continually adds new materials and conducts design contests where members vote for their favorite designs. The showcased designs are often bold, innovative, and groundbreaking. Personally, this is my favorite website for design inspiration.

4. https://bestwebsite.gallery: I have nothing but praise for this design resource collection. The websites showcased on BestWebsiteGallery are brilliant, and the user experience on the site itself is excellent. You can't go wrong with this platform when seeking inspiration.

5. https://dribbble.com: Of course, we can't forget about Dribbble! This website offers a wide range of categories to explore and browse. Due to its immense popularity, Dribbble provides an abundance of inspiration. However, it's worth mentioning that, from my own experience, some users create video prototypes of awesome ideas that cannot be translated into actual websites since the prototypes were made using video editing applications. So, be mindful of that aspect.

Now that you're inspired, it's time to find the necessary resources. Let me guide you:

1. https://www.freepik.com: This site is absolutely awesome, offering a wide variety of images, both vector and raster. Most of the resources are available for free, so you don't necessarily have to pay for a subscription. However, becoming a paid member grants you access to everything without a daily download limit.

2. https://www.flaticon.com: As a sister site of Freepik, Flaticon is equally amazing. It hosts an extensive collection of icons, and you can easily spend hours searching for the perfect one. Free users should note that only PNG icons are available for download, while SVG icons require a subscription. However, there is an alternative:

3. https://freeicons.io: This platform provides access to a large archive of icons, with approximately 80% of them being free. You have the freedom to choose between PNG and SVG formats.

4. https://tailwindui.com/components: If you use Tailwind in your projects, this website is incredibly useful. It showcases the components that can be utilized in your design. You can also find a Figma plugin with these components for seamless integration.

5. https://codemyui.com: This site will elevate your design to a higher level. While the resources here may not directly go into your design, they will be valuable when coding your website. As a designer, it's crucial to keep these resources in mind and prepare your design to be compatible with the chosen resources. CodemyUI offers text effects, parallax and image effects, animations, micro-interactions, and more.

6. https://unblast.com: Sometimes, you need additional resources, and this site has got you covered. Unblast provides a wide range of resources such as text effects, mockups, icons, patterns, and much more.

Additional Tools & Resources

Depending on your project, you may require additional tools and resources. Let's cover some of those:

1. https://coolors.co: This site is exceptionally good for finding, generating, and tweaking color schemes for your projects. Coolors is free to use, and there are no downsides to it. It offers a great user experience and user interface, making it a reliable choice for color inspiration.

2. https://calculateaspectratio.com: This site is a blessing in disguise, providing a simple yet brilliant tool to calculate aspect ratios for images. When designing, knowing the precise height or width of an image is crucial, and this website helps you calculate the other value accurately.

3. https://www.xconvert.com: Bookmark this site! Whenever you need to convert images or videos, this is the go-to platform. Although the look may appear outdated, the functionality is top-notch. I often use this site to convert MP4 files into animated GIFs or optimize GIFs, and the results are stunning.

4. https://cleanup.pictures: If you don't have access to Photoshop, this neat website allows you to cut out objects from pictures. It works fairly well, but as a free user, there are limitations. For instance, you can't edit large images as Cleanup Pictures resizes them to a smaller format. Check it out and decide if a membership is worth it for your needs.

5. https://yqnn.github.io/svg-path-editor: This cool tool simplifies the editing of SVGs. It's incredibly user-friendly, providing the path code that can be directly coded into your website. It's free and works splendidly.

6. https://fonts.google.com: This one may seem obvious, but it's worth mentioning. When selecting fonts for your site, I highly recommend exploring Google Fonts. Choosing fonts from this collection makes it easier for front-end developers to implement your design.

7. https://www.fontpair.co: On the topic of fonts, this site helps you pair your selected font with other complementary fonts. It's easy to use and provides explanations on why certain fonts work well together and where to use them.

8. https://unsplash.com: This feel-good site is perfect for creating mood boards and selecting stock images for your web design projects. The images available on Unsplash are of high quality and surprisingly free to download.