This website uses cookies to ensure you get the best experience. More info

14 Bookmark-Worthy Web Design Resources for Rookies

Web Design Resources

Web designers know better than most how valuable a good online resource can be.

Those with the skills to design and create a website are in high demand these days, and with good reason. As more and more of the world’s information, interaction and industry move to web and mobile platforms, web designers are the help everybody needs.

But who helps the helpers?

Fear not! There are incredible web design resources out there to further your knowledge, provide support and fan the creative fire of web designers of all levels. Read on for 14 of the best and brightest web design resources for rookies, as recommended by the experts themselves.

14 Go-to web design resources for beginners

1. Smashing Magazine

“The gold standard for online web design resources,” says James Walters, director of development at pixelFLYTE.

Smashing Magazine focuses mainly on tutorials on everything from creating responsive typography with Sass maps to an introduction to the coding side of color in an easy-to-navigate layout. Articles are clearly categorized into subjects like coding, mobile and UX design, making it easy to find resources based on your niche.

2. CreativeBloq

Another first-rate blog for aspiring designers, CreativeBloq features a variety of expert tips, how to’s and career advice articles. Chances are if there’s a question you have about the industry, you’ll find it covered here somewhere.

“The content is top-notch and there are about 20 fresh articles every day,” says Sam Anthony, cofounder of TheSiteEdge. “They rock when it comes to great list posts showcasing awesome design work.”

3. Marvel

Marvel is the best web and mobile prototyping tool in the market right now,” says UI/UX Designer Lazar Stojkovic. Certain levels of Marvel access are available at a price, but it does offer a free tier for new designers trying to keep their costs down.

Whether you’re in need of a prototyping tool or just a little inspiration, Stojkovic says the creators of Marvel update their product and galleries frequently. “It's just getting better all the time!”

4. The Next Web

This powerful news website focuses on the latest advances and trends in web design. In a fast-paced field like web design, The Next Web is Walter’s pick for keeping a pulse on industry happenings.

Scanning all of the latest headlines in one place will make it easier for you to get a handle on the ever-evolving industry you’re entering. Impress your designer friends by always knowing about the latest and greatest trends and technologies.

5. Viewport Resizer

“We use this site constantly, multiple times, every day,” says Holly Ferro of 5 Nerds Software.

The Viewport Resizer is a free tool that emulates different browser sizes for the most popular mobile devices. Ferro says it’s the top tool for making sure your responsive design looks great on any device.

6. The Webby Awards

Something like The Oscars for web design, The Webby Awards have been honoring excellence on the Internet for going on 20 years. Awards are given in five major media types: Websites, Advertising & Media, Online Film & Video, Mobile Sites & Apps and Social.

Dubbed “The Internet’s highest honor” by The New York Times, Walters recommends this site as a great source of inspiration. There’s no better way to start your career off on the right foot than by submerging yourself in the best web design the field has to offer.

7. The Toolbox

The Toolbox is “a collection of the best time-saving apps, tools and widgets from around the web.” This site accepts user-submitted apps and tools and organizes them all in one place to give designers like you quick and easy access to them.

Web designers are faced with countless small, tedious calculations just to perform their everyday duties, according to Nate Shivar, president at Shivar Web Consulting. That’s why he recommends bookmarking this site to spare you some time and frustration when you’re in the midst of a project.

8. Dribbble

Shivar calls this one a “cutting edge show-and-tell resource” for designers. Dribbble is the ultimate social platform for designers, providing a place to promote, discover and explore others’ creations.

You’re mom, spouse or best friend may not always understand what you do for a living. Joining this community will allow you to share what you’re working on with others who share your passion.

9. Peek

Do you ever wonder what a normal, everyday user thinks about your design? Look no further than Peek, suggests Stojkovic. This is a user testing tool that connects your website with a random user and records the ensuing interaction for five minutes.

This tool gives you a fast, un-biased opinion of your website or app so you can improve the overall user experience. And best of all, it’s free for up to three uses a month!

10. SixRevisions

Six Revisions stands out for its strong focus on informative content instead of flash. From sections on JavaScript and WordPress to design inspiration and tutorials, there’s a large breadth of knowledge and insight for designers of all levels.

Anthony appreciates the longer-than-average length of content on this site, as well as their commitment to host many different contributors, which keeps the perspective fresh.

11. The Web Developer's SEO Cheat Sheet

The experts at Moz created The Web Developer’s SEO Cheat Sheet to serve as a handy reference to help web designers follow the best practices in search engine optimization. With tens of thousands of downloads since its debut, this is a must-have resource for any web design professional.

“This checklist helps me build SEO-friendly sites from the ground up,” Shivar says. The cheat sheets are downloadable at no charge and the content is concise and reputable.

12. Freepik

Freepik is the leading search engine for free vector designs. Ferro recommends using this resource whenever you’re in search of the perfect background or icon to put the final touches on a design.

The platform offers high-quality images for use in personal or commercial. Google, Adobe and Smashing Magazine are just a few of the companies that use Freepik.

13. Color Thief

This resource does precisely what is sounds like it does. Color Thief was created by Lokesh Dhakar to allow designers to create a color palette from any existing image.

Simply upload your image of choice and you’ll be presented with a collection of colors that compliment it perfectly. Ferro considers this a great time-saving resource to help you ensure your design has that extra coordination and polish that clients expect.

14. Rainy Mood

As a hopeful web designer, it’s safe to say there will be a lot of screen time in your future. Staring at your computer for hours can get old fast. Sometimes music breaks your concentration, but silence can be equally distracting.

That’s where Rainy Mood comes into play. There’s nothing more calming than the soothing sounds of raindrops falling. Ferro encourages designers to give it a try, saying it helps her stay creative and focused when working on a tedious project. As the site says: “Rain makes everything better.”

Design your career

Take it from these seasoned professionals, these web design resources are worth hanging on to. Now that you have some handy tools up your sleeve, it’s time to establish a routine that works for you.

Everyone has their own unique method, but getting some ideas from experts in the field can help you get started. Check out our article: The Ultimate Guide to a Frustration-Free Web Design Process.


Brianna Flavin

Brianna is a content writer for Collegis Education who writes student focused articles on behalf of Rasmussen College. She earned her MFA in poetry and teaches as an adjunct English instructor. She loves to write, teach and talk about the power of effective communication.

female writer

Related Content

This piece of ad content was created by Rasmussen College to support its educational programs. Rasmussen College may not prepare students for all positions featured within this content. Please visit for a list of programs offered. External links provided on are for reference only. Rasmussen College does not guarantee, approve, control, or specifically endorse the information or products available on websites linked to, and is not endorsed by website owners, authors and/or organizations referenced. Rasmussen College is a regionally accredited private college.

logo-accreditation-acen logo-accreditation-ccne chart-credential-laddering-healthcare-management 0 Credits 90 Credits 180 Credits 48 Credits Start Here HIGH SCHOOL GRADS Start Here TRANSFER STUDENTS Start Here SECOND DEGREE PURSUERS End Here ASSOCIATE’S DEGREE Start Here MASTER’S DEGREE PURSUERS End Here BACHELOR’S DEGREE End Here MASTER’S DEGREE chart-credential-laddering-rsb 0 Credits Start Here HIGH SCHOOL GRADS Start Here TRANSFER STUDENTS 90 Credits Start Here SECOND DEGREE PURSUERS End Here ASSOCIATE'S DEGREE 180 Credits End Here BACHELOR'S DEGREE chart-credential-laddering-rsd 0 Credits Start Here HIGH SCHOOL GRADS Start Here TRANSFER STUDENTS 91 Credits Start Here SECOND DEGREE PURSUERS End Here ASSOCIATE'S DEGREE 181 Credits End Here BACHELOR'S DEGREE chart-credential-laddering-rsjs 0 Credits Start Here HIGH SCHOOL GRADS Start Here TRANSFER STUDENTS 91 Credits Start Here SECOND DEGREE PURSUERS End Here ASSOCIATE'S DEGREE 180 Credits End Here BACHELOR'S DEGREE chart-credential-laddering-rsn 0 Credits Start Here HIGH SCHOOL GRADS Start Here TRANSFER STUDENTS 91 Credits Start Here SECOND DEGREE PURSUERS End Here ASSOCIATE'S DEGREE 181 Credits End Here BACHELOR'S DEGREE icon-colored-outline-bank icon-colored-outline-certificate icon-colored-outline-circle-dollar-sign icon-colored-outline-folder-search icon-colored-outline-hand-heart icon-colored-outline-head-blocks icon-colored-outline-head-cog icon-colored-outline-head-heart icon-colored-outline-health-plus-leaves icon-colored-outline-hospital icon-colored-outline-light-bulb-analytics icon-colored-outline-magnifying-glass icon-colored-outline-monitor-healthcare icon-colored-outline-monitor-paper-search icon-colored-outline-nurse-rays icon-colored-outline-padlock-shield icon-colored-advance icon-colored-arrows-cross-curve icon-colored-build icon-colored-bulb-analytics icon-colored-certificate icon-colored-continual-developement icon-colored-folder-mortarboard icon-colored-globe-pen icon-colored-growth icon-colored-hand-bubble icon-colored-head-blocks icon-colored-head-cog icon-colored-laptop-cbe-skyscraper icon-colored-laptop-webpage icon-colored-location-pin icon-colored-monitor-paper-scan icon-colored-national icon-colored-person-whiteboard icon-colored-police-light icon-colored-prep icon-colored-presenter icon-colored-regional icon-colored-save-time icon-colored-skyscraper icon-colored-state icon-colored-student-centered icon-colored-support icon-colored-world-experience icon-camera icon-filter icon-info-circle icon-mail-forward icon-play-solid icon-quote-mark-left icon-quote-mark-right icon-share-square-o icon-spinner icon-tag ras-logo-flame ras-logo-horizontal ras-logo-stacked icon-bank icon-general-chart icon-general-connect icon-general-degree icon-general-discuss icon-general-email icon-general-find icon-general-hat icon-general-heart icon-general-laptop-building icon-general-laptop icon-general-leader icon-general-map icon-general-money icon-general-paperwork icon-general-people icon-general-phone icon-general-speak-out icon-head-heart icon-mglass icon-scales icon-simple-chat icon-simple-desktop icon-simple-find icon-simple-hamburger icon-simple-phone icon-testimonial-quotes icon-social-facebook-square-colored icon-social-facebook-square icon-social-facebook icon-social-google-plus-square icon-social-google-plus icon-social-instagram icon-social-linkedin-square-colored icon-social-linkedin-square icon-social-linkedin icon-social-pinterest-p icon-social-twitter-square icon-social-twitter icon-social-youtube-play-colored icon-social-youtube-play icon-util-checkbox-white icon-util-checkbox icon-util-checked-white icon-util-checked icon-util-chevron-down icon-util-chevron-left icon-util-chevron-right icon-util-chevron-up icon-util-language-switch icon-util-loading icon-util-open-window-button icon-util-open-window-link icon-util-pdf-button icon-util-pdf-link icon-util-refresh icon-util-x