Home Web Trends Mobile Sites AMPs PWAs React Web VR Copilot Resources

Resources and Tools

Introduction

Throughout twelve weeks, we were tasked with researching several resources and tools that would ultimately be of use to someone in the web design/development field. As a web designer and developer, one needs to keep on their toes at all times. As such, researching the latest developments and products helps us to stay current and produce more unique, fascinating websites.

A look at the Resources and Tools project.

Here are twenty-five resources and tools that I recommend. While all are great to keep in mind, I've implemented a ranking scale for each resource and tool, as described below:

  • A: Top tier resource or tool, a fantastic starting point or something every developer or team of developers should utilize or look into more.
  • B: A solid resource or tool that is still very much worth utilizing, but will likely take a backseat to those ranked over them.
  • C: A resource or tool to keep in the back of your head as a backup. Can help extend learning and aid in your development cycle, but will not be a primary focus.

Asset Databases

Resources

  • Unsplash - This is a fantastic resource if you need some stock imagery for graphic design work. Most images on the site are free to download, but some will require access to a paid subscription in order to utilize.

    • Ranking Scale: A


  • Iconmonstr - A site that offers a bunch of icon imagery for use within website design. These can include icons for functions such as liking, refreshing, editing, highlighting, etc. All icons are available for free use so long as you abide by their licensing agreement (which, to summarize, is to not sell the icons, use them in a logo, or utilize them for nefarious purposes).

    • Ranking Scale: B


  • Open Peeps - A site full of free-to-use (both commercially and not) hand drawn illustrations of people for use in design work. Offers plenty of pre-made graphics alongside a mix and match tool to combine elements from others together.

    • Ranking Scale: C


  • HTML5Up - A site that offers a selection of free-to-download HTML and CSS templates that designers can use for their projects, whether as a basis or completely intact. Each template has a live demo available so users know what they're getting into before diving into each template.

    • Ranking Scale: A


  • FontSquirrel - A site that offers a bunch of unique fonts, all free to use for commercial purposes. The site categorizes each font into a tag, making it all the more accessible to developers to find the perfect font for their project.

    • Ranking Scale: B


  • Google Fonts - A service which offers an abundance of fonts available for download and use within web development. It offers various filters to help you find just the right font for your site, including serif, sans-serif, calligraphy, etc.

    • Ranking Scale: A

General Research

Resources

  • W3 Schools - I'm sure a lot of you know of this one, but I'm including it here because I find it to be one of the most valuable resources available to us. It's honestly helped me with the vast majority of the classes I've taken throughout this program. They offer a wide variety of modules on everything from basic HTML & CSS to even programming languages like JavaScript. Tutorials are available to help guide you through each lesson as well.

    • Ranking Scale: A


  • Smashing Magazine - A site that offers articles on a wide variety of web design related subjects, from accessibility to even JavaScript. Some are more all encompassing guides (such as one on CSS generators), while some are more tailored to specific situations.

    • Ranking Scale: B


  • WebFX - This site is mainly meant for businesses looking to get started on building a website. They do, however, offer some good articles in their "Learn" category, including basics of web design, why responsive design is important, etc.

    • Ranking Scale: C


  • Web Design 101: Everything You Need to Know - A nice expansive article detailing several key components every web designer should know. It goes through navigation, SEO, importance of speed, design principles, etc.

    • Ranking Scale: B


  • 10 New Web Design Trends That Emerged in 2024 - A video that goes in-depth into some interesting trends that have popped up in the web design sphere this year. It includes discussion on interactivity, hand-made graphics, energy-efficient designs, and more.

    • Ranking Scale: A

Tutorials

Resources

  • Web Design 101 - This video playlist offers an abundance of content helping individuals get started in creating websites. There is an all-encompassing three-hour video available as well as ones on more specific topics, such as wireframes, hero banners, types of software, hierarchy, etc.

    • Ranking Scale: A


  • Learn Web Design (for Beginners!) - A playlist of eight videos that goes into several aspects of web design (including HTML and CSS) as well as several tools that assist with web design, such as Figma, Adobe XD, Sketch, etc. Each course is a bit daunting in their length, but each video offers chapter marks to help break them up a bit.

    • Ranking Scale: B

Design / Development Work

Resources

  • Design Seeds - A resource for those wanting something a bit different for their color palette. Each palette offered comes from various pre-selected images, so developers can simply choose one to their liking and keep designing their sites around it. A nice place to go when one might be struggling with choosing a palette for their sites.

    • Ranking Scale: C


  • Design System Checklist - A site that offers a handy checklist of various elements one should keep in mind when designing the user interfaces of their website. It sorts them into four main groups (Design language, foundation, Core components, and maintenance). Perhaps neatest of all, it allows you to check off which elements you've added to your site, helping you keep track of what you've done and what still needs implementation.

    • Ranking Scale: A


Tools

  • Figma - This is a tool intended for collaborative design work all within the confines of your web browser. Design files are accessible to all peers working on a project, similar to Google's slate of office-like programs like Docs and Spreadsheets. Groups are allowed to make suggestions on design work as well, such as through a comment system in their Dev Mode feature, or through utilizing a collaborative whiteboard. There is a regular free option, but it is restricted to three collaborative design files. However, its professional plan is available for free for students and teachers, which allows for access to Dev Mode and unlimited design files.

    • Ranking Scale: A


  • Adobe Color Wheel - A fantastic tool to utilize when crafting a cohesive design palette for your website. It allows you to pick your own theme from its wheel, utilize different color harmonic options, and either import them for use in other Adobe products or implement them manually in your own design work. The tool is completely free to use, making it a no brainer for web designers to keep in mind.

    • Ranking Scale: A


  • Krita - a tool intended to be used to create artwork. While not specifically intended for web designers, it may help aid with design work. It has an interface very similar to Photoshop, offering many of the same tools as it as well (such as layers, color adjustment, text, etc.). The program is completely free to use and is open source, so users can tinker around with the code behind the program if they wish.

    • Ranking Scale: B


  • Vectr - A tool that offers multiple AI-based tools for converting and/or altering images. Its main purpose is converting "raster" (i.e. GIF, PNG, JPEG) images into vector-based ones. This allows images to be shown on a web page at any size with no hit to their quality. The tool also offers background removal and image generation tools. The basic converting feature is available for free. Otherwise, a Basic plan is offered for $3.99/month and a Premium plan for $7.99/month (needed to access additional features).

    • Ranking Scale: B


  • Adobe Express Remove Background Tool - A web tool that removes the background from images. Very simple to use (just upload the image and the tool does the rest) and has very accurate results from what I've tested thus far. Can be a great asset when adding images to design work. It is completely free to use as long as you have an Adobe account (just need to sign up for a free one, don't need a subscription).

    • Ranking Scale: A


  • Wireframe.cc - Wireframe is a tool that allows developers to easily build wireframes for their potential project sites. Users just have to drag their cursor and draw out where they want each element to go, and then choose from the list provided. Elements include text, boxes, images, lists, lines, etc. The free version offers all the tools necessary to begin creating wireframes. However, if one needs additional features such as interactive prototyping, export to PDF or PNG, and interconnected multi-page wireframes, one will need a premium plan starting at $9/month billed annually.

    • Ranking Scale: B


  • GitHub Codespaces - A code editor that allows for code creation and editing right inside of your browser. The editor works similarly to Visual Studio Code, offering a space to code HTML, JavaScript, etc. and a terminal to install JavaScript libraries and other functions. Thanks to its browser-based capabilities, it allows developers to create on whatever device they want, wherever they may be. The service is free to use up to 60 hours of use per month, after which you'll need to opt into their "pay as you go" plan for additional hours. However, it appears the service is free for student use and can be accessed through LinkedIn Learning as well.

    • Ranking Scale: A

Collaborative Efforts

Tools

  • Marvel - A tool that allows for the creation of wireframes and interface designs. In addition to designing them on their web-based app, it offers the ability to make fully-functioning prototypes utilizing your designs and have them be tested, all without needing to code them first. It allows you to design one project for free. After that, plans begin at $12/month (charged yearly), which allows for unlimited design projects and access to all features, including prototypes, user testing, and collaboration abilities with fellow teammates. Students and teachers are eligible for a 70% discount on yearly plans, however.

    • Ranking Scale: B


  • GoProof - A collaborative software that offers teams of developers the tools necessary to review their website's design. These include comments, feedback annotation, version comparisons, proofing uploads, etc. The software is integrated with Adobe Creative Cloud, making it useful to those utilizing Photoshop, Dreamweaver, etc. The software comes with a 14-day free trial. After that, one will need to subscribe, with the lowest costing plan being $129/month billed annually.

    • Ranking Scale: A


  • Zeplin - Another collaborative tool for teams to create design work together. Allows communication with team members through assigning jobs, submitting design work for review, cataloging design work from ready to build to still in progress, and more. Additionally, the program helps connect design work to its codebase, saving time in the development process. A free trial consisting of 1 project and unlimited users is available to try out the service. After that, the service offers two plans: pay per project, or pay per seat/user.

    • Ranking Scale: B