Table Of Contents
Over the past few months, I have been collecting resources I use or want to use in the future. I’ve categorized each of these resources into groups and thought other web designers and developers can benefit from my collection so I decided to share them. Some of these resources I use daily or weekly and some of them I discovered and haven’t found a use for yet but still seemed impressive. For each resource, I’ve included my honest opinion and there are no affiliate links in this post. Let’s get started.
AppsAs any web designer or developer would agree, when creating anything for the web you need some decent apps to make your life and process easier. These are some of the apps I’ve discovered and swear by.
Balsamiq MockupsFor me, the best feature of Balsamiq Mockups is its simplicity. When creating a website or application it is very tempting to start creating an array of colorful designs and adding all sorts of amazing effects and impressive animations. But this can result in big problems because we didn’t think everything through, we’re just concerned about making it the best-looking thing around. With Balsamiq, you are limited in a design sense if you compare it to Sketch or Illustrator but I believe this is the best feature of the app. Because your design options are limited, you can focus on the essential layout of your website or app without being distracted by changing the colour of a button a hundred times. It is easy to use and the pricing is competitive, plus they offer a trial which you can use and see if the app will benefit you. Website: https://balsamiq.com/products/
SketchBy now everyone knows about or has heard about Sketch. It exploded onto the scene and quickly became a favorite among designers. It came with a lot of features we were all hoping would be added to other popular design programs such as Illustrator and Photoshop. I have to say, the Sketch community grew big quickly and to be honest it was such a surprise. Having used Sketch here and there, it is an amazing app with a supportive community and features being added regularly. I have been a fan of Photoshop and Illustrator for a long time, but I have to admit Sketch definitely gives them a go for their money. I still use Photoshop and Illustrator in certain situations but I don’t mind swapping to Sketch if it makes sense. Before I use Sketch or Illustrator, I still prefer getting started with Balsamiq. But once I am happy with what I’ve done in Balsamiq, the next app I use will either be Sketch or Illustrator. If you haven’t used Illustrator or Photoshop before, I recommend learning Sketch and then moving onto the other programs as Sketch as become a requirement for certain jobs. Website: https://www.sketchapp.com/
CoffeeCup Grid BuilderCSS grid has changed the way design for the web, it is such a powerful CSS feature but it can be quite daunting to learn. There are a number of tutorials, courses, and resources available but sometimes you don’t have the time and want to start playing around. There are a number of CSS grid utilities around but I am a fan of CoffeeCup and their software and I think this app but be very helpful for anyone looking to starting designing using CSS grid without knowing the in’s and out’s. I’m not saying don’t learn CSS grid and only rely on this app, the app is useful to get started. Website: https://css-grid.coffeecup.com/ Zoommy This is an app I came across but haven’t used as of yet but it appealed to me. Finding stock images can be a pain in the butt, especially if you need to search more than one website. Zoommy enables you to search for stock images from over 50 sources, some of these include:
- Public Domain Archive
TaskadeThis is one of my favorite apps that I’ve been using recently. In essence, it is an app as well a service. I used to use Grammarly to save notes and things (I know there is something called Evernote) but it didn’t exactly do everything I wanted. On the other hand, I liked it because it the user interface was clean and easy to use. When I discovered Taskade it felt like I had finally found the app I was searching for. If you’re like me and suddenly think about something and want to remember it while your traveling or doing something else, Taskade is for you. One of the best features for me is that you can:
- Install Taskade as a plugin for your browser (all major browsers)
- Install it on your phone (both Android and iOS)
- Install it as a desktop app (Windows and Mac)
ServicesThere are so many awesome services available and most of them are free, but these are ones that I use quite regularly and make my life as a front-end developer much easier.
HotjarThere is a number of analytics services available, one of these being Google Analytics. If you’re an analytical person the user interface might be easy for you to understand, but if you’re like me they can also be confusing. Everyone that owns a website, wants to know how many people are visiting their website but sometimes these numbers are not enough. What are your visitors actually doing on your website? Where are they clicking? If you know what you’re doing, you can add settings and configure Google Analytics to give you this data. But it seems like so much effort for something that is just as critical as how many people visited your website and how long they were there. Hotjar offers a quick solution for things like this. You can create heat maps, create video recordings of visitors using your website and more. I’m saying replace Google Analytics or something similar with Hotjar, you can use both of them. In my opinion, Hotjar makes it easier to make sense of the numbers and graphs in your analytical data. Website: https://www.hotjar.com/
Inline CSS ConverterIf you’ve created email templates, you will know the pain of ensuring they display the same across different email applications. In order for an email to display properly, all styles need to inline and doing this yourself can be frustrating not to mention time-consuming. Luckily with Inline CSS Converter, this is done for you. All you need to is copy and paste your template and click Make It Inline. So if you will be creating email templates anytime soon be sure to try out this service. Website: https://inliner.cm/
PlaceholderWhen you are creating a design, you’re might not always sure what images will be used or perhaps you’re waiting for images. Instead of creating placeholder images, you can use Placeholder. Placeholder is a service where you can define the size, colour, and text of images you want to use as placeholders. It is really easy to use and it is free. Website: https://placeholder.com/
TinyPNGOptimizing assets for website or application is very important. The better optimized, the faster it will load. A few programs come with built-in optimization for JPG’s or PNG’s but there is another way. TinyPNG is a free online service that will optimize your images for you and the best part it seems to do it better than Photoshop sometimes. All you need to is upload, wait a few seconds and download your optimized assets. There is a premium option that allows you to upload more than 10 images at a time and there is an API that you can utilize if you want to. But wait, there’s more… TingPNG also has a plugin for Photoshop and as I said earlier they seem to optimize better. Website: https://tinypng.com/
WakaTimeDo you know how much time you spend creating a website or application? If you’re a freelancer this is essential when sending a quote or an invoice. WakaTime is a service that integrates with a lot of editors, which means you don’t need to worry about starting and stopping a timer (Who has time for that?) Some of the supported editors are:
- Android Studio
- Sublime Text
- VS Code
WebsitesI don’t think there are a lot of things that change as quickly as the web. There is always something new to learn or an update on something you use every day. It is difficult to stay up-to-date with everything but there are a few websites you can subscribe to, to make sure you what is going on or what will be the next big thing. Below are a few of websites, I’ve subscribed to.
SmashingMagazineThey have been around for a while, and if you haven’t heard of them you’re missing out. The content on the blog varies from design to development. Plus the content is authored by a number of experts in the various fields so you know you’re reading quality content. But besides the content, Smashing Magazine also offers: