The Ultimate, Mega, Essential Website Design Guide – 115 Tools and Resources

web_design

Whether you’re building your first website or re-designing an existing one for your organization, this all-in-one guide will get you started with tools and resources for creating today’s modern websites.

    Website Tools – Content Management Systems

    There are many tools available to today’s website designers ranging from simple html to robust content management systems. These CMS systems all have the ability to create, store, and display large quantities of information as well as syndicate content throughout the your website and beyond.

    Articles & Resources

  1. Top 12 Free Content Management Systems
  2. Top 10 Most Usable Content Management Systems
  3. Examples of Libraries Using Content Management Systems
  4.  

    Tools

  5. Drupal – This popular application is an open source content management platform powering millions of websites and applications. It’s built, used, and supported by an active and diverse community of people around the world.
  6. WordPress – This free open-source content management system and blogging platform has become one of the most used software products for designing websites with over 60 million installations.  Both the iLibrarian blog and my professional website are powered by WordPress.
  7. Joomla – This is also a free and very popular open source content management system with over 35 million dowloads to date.
  8. Expression Engine – This Content Delivery Platform,has been around for over a decade and this popular content management system powers sites such as Disney, Apple, and Adobe.  It’s built on an open source PHP framework.
  9.  

    Information Design & Navigation

    Web users spend an average of 8–10 seconds and three clicks on your Web site looking for what they need before they get frustrated and click away. Whether you are developing a new Web site or redesigning an existing one, it is imperative to determine an intuitive and usable navigational structure and taxonomy for your user community.  These articles and tools will help you do just that.

    Articles & Resources

  10. Guide to Website Navigation Design Patterns
  11. Do You Make These 7 Website Navigation Design Mistakes
  12. 50+ Gorgeous Navigation Menus
  13. 21 Examples of Excellent Navigation Menus in Web Design
  14.  

    Tools – Boilerplates

  15. HTML5 Boilerplate – A boilerplate template for HTML5 apps or sites.  Comes with optimized Google Analytics snippet; placeholder touch-device icons; and docs covering dozens of extra tips and tricks as well as jQuery and Modernizr libraries.
  16. 960 Grid – The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem.
  17. Bootstrap – A sleek, intuitive, and powerful front-end framework for faster and easier web development. Includes responsive CSS as well.
  18. Less Framework 4 – A CSS grid system for designing adaptive web­sites. It contains 4 layouts and 3 sets of typography presets, all based on a single grid.
  19. Foundation – The most advanced responsive front-end framework in the world – and it’s free!
  20.  

    Graphic Design

    Graphic designers need to think about things like color theory and usage, optimal image placement, layout design and much more.  These articles and tools on graphic design theory will help you get a handle on how you can best design an aesthetically pleasing website.

    Articles & Resources

  21. 50 Totally Free Lessons in Graphic Design Theory
  22. Graphic Design Theory: 50 Resources and Articles
  23. 20 Vital Techniques & Best Practices For Effective Web Design
  24.  

    Tools

  25. Adobe Photoshop – One of the most popular graphics editing software programs on the market, Adobe Photoshop enables you to do just about anything with images and has a vast array of tools for creating graphics.
  26. Gimp – (GNU Image Manipulation Program) – This is a free open source alternative to Adobe Photoshop.  Similar to Photoshop, it has tools for image editing and creating original graphics.
  27. Pixel Dropr – create sets of icons, illustrations, photos, buttons etc. that you can drag and drop into any photoshop image.
  28. PLTTS – easily create and find color palettes based on hex #’s
  29. Pictaculous – Upload an image and it will produce a color palette instantly.
  30. Dribble – Get graphic design inspiration and search by color.
  31.  

    CSS

    CSS or Cascading Style Sheets is a language that’s used to describe the presentation of a Web page.  It includes elements such as fonts, layout, and colors and allows designers to specify very granular rules about formatting and presentation for each.  Here are some resources to get you started creating your own CSS style sheets.

    Articles & Resources

  32. 30 CSS Best Practices for Beginners – Net Tuts
  33. CSS Tutorial – W3Schools.com
  34. A List Apart – Articles specifically on CSS.
  35. CSS-Tricks – Forums, articles, videos, and tutorials on CSS
  36.  

    Tools

  37. CSS Beautifier – Type or paste in unformatted CSS and have it beautified automatically so that it’s consistent and easy to read.
  38. Reset CSS
  39. CSS3 Click Chart – This is a fantastic reference tool for CSS3 attributes with code examples, descriptions, links, tutorials, polyfills, tools, and browser support info for all new CSS3 features.
  40. Patternizer – An easy to use online tool which enables you to generate CSS3 stripes in an online interface, allowing you to customize the space in between each stripe and then provides the code.
  41. Sprite Box – A WYSIWYG tool to help Web designers quickly and easily create CSS classes and ID’s from a single sprite image.
  42. Primer – Paste in your HTML and Primer will pull out all of your classes and id’s and placing them into a starter stylesheet
  43. Mincss – Clears the junk out of your CSS by comparing each and every selector in the CSS to find out which ones aren’t being used.
  44. CSSCSS – CSSCSS will parse any CSS files you give it and let you know which rulesets have duplicated declarations.
  45.  

    Social Media Integration

    Social media websites such as Facebook and Twitter are used by millions of people worldwide which is why it’s essential to strive to incorporate those sites’ functionality into your own.  Here are some articles and tools to help you best leverage the power of social media sites within your own website.

    Articles & Resources

  46. 3 Ways to Integrate Social Media into Your Website – Web Ascender
  47. How to easily integrate Social Media into your website – 1st Web Designer
  48. 9 Tips for Integrating Social Media on Your Website -  Social Media Examiner
  49.  

    Tools

  50. Add This – Easily create “Share This” and “Follow” buttons for over 300+ social media services (Facebook, Twitter and more)
  51. ShareThis -  Quickly create “Share” buttons for your website with this easy-to-use tool.
  52. Facebook Comments Box – The Comments box is a social plugin that enables people to comment on your site. Features include moderation tools and distribution.
  53. Facebook Like Button – The Like button is a simple plugin that lets people quickly share content on Facebook.
  54. Gigya Activity Feed – The Activity Feed plugin allows users to see the latest actions on a site, according to who performed the actions.
  55.  

    Coding Tools

    There are a lot of excellent tools and resources available to assist website designers in creating and editing their sites as well as adding new functionality.  Here are a few to get you going:

    Articles & Resources

  56. Best Free HTML Editors    Gizmo’s Freeware
  57. HTML TOOLBOX: 30+ HTML Tools and Tutorials – Mashable
  58. SuperheroJs – A collection of the best articles, videos and presentations on the topic of creating, testing and maintaining a large JavaScript code base.
  59.  

    Tools – jQuery & JavaScript

  60. JQuery Mention Input – This plugin will give your website the ability to mention out to friends by tagging them with @.
  61. Chardin.js – Add overlay instructions to your apps with this jQuery plugin.
  62. JSFiddle – This web-based editor allows you to create JavaScript, HTML, and CSS and see the results in real-time.
  63. FitText.js – A jQuery plugin for inflating web type and also making font-sizes flexible and responsive.
  64. JSLint – Created by Douglas Crockford, JSLint checks JavaScript code against best coding conventions for quality assurance.
  65.  

    Tools -HTML Editors

  66. Adobe Dreamweaver – This is my preferred HTML editor.  It has a streamlined user interface, connected tools, and new visual CSS editing tools that let you code efficiently and intuitively.
  67. Adobe Brackets – Brackets is an open-source editor for web design and development built on top of web technologies such as HTML, CSS and JavaScript.
  68. CodePen – An HTML, CSS, and JavaScript code editor right in your browser with instant previews of the code you see and write.
  69.  

    Tools -Misc

  70. Site Validator – This service lets you validate HTML5 and CSS3 on your whole site with a single click.
  71.  

    Responsive Website Design

    Responsive Web Design (RWD) is, in a nutshell, all about designing your website so that it can be optimally viewed on a wide range of devices such as tablets, smartphones, laptops, etc. The idea is to design and maintain one website that can be viewed on all.  Here are tools and resources to help you do just that:

    Articles & Resources

  72. 85 Top Responsive Web Design Tools
  73. 16 Top Tools for Responsive Web Design
  74. 50 Useful Responsive Web Design Tools For Designers
  75.  

    Tools

  76. Responsive Nav – A tiny JavaScript plugin which helps you to create a toggled navigation for small screens.
  77. Gridset – Enables Web designers to design and build responsive grid-based layouts and offers a selection of presets.
  78. Respond.js – A javascript snippet of code which allows media queries to be compatible with older versions of browsers that lack support for them.
  79. Responsive Tables – A simple JS/CSS combo that will let your tables adapt to small device screens “without everything going to hell”.
  80. Adaptive Images – Detect your visitor’s screen size then automatically creates, caches and delivers device-appropriate re-scaled versions of your HTML images.
  81.  

    UX/Usability

    Usability tests, card sorts, focus groups, and more are all used by website designers in an effort to create user-driven designs and deliver an engaging user experience to their visitors. Learn how to use these inexpensive techniques to understand how your users think about your Web site and its content.

    Articles & Resources

  82. Best books on usability and web interface design
  83. UX Magazine
  84. Usability 101: Introduction to Usability -Jakob Nielsen
  85. Smashing Magazine – UX Category
  86. Card Sorting from A–Z – iLibrarian Series
  87. 18 Usability Resources for Librarians – iLibrarian
  88.  

    Tools- Wireframing & Mockups

  89. Microsoft Visio Professional – This is my favorite wire-framing tool, Visio is a powerful diagramming platform with a rich set of built-in stencils that lets you create wireframes, maps, and many other types of charts and diagrams.
  90. Mockingbird – an online tool that makes it easy for you to create, link together, preview, and share mockups of your website or application.
  91. Mockup Builder – A prototyping application that helps you design software or websites by making it easy to create mockups of the finished project.
  92. Balsamiq Mockups – Online wireframing tool with 75 built-in user interface components and 187 icons.
  93. Moqups – a nifty HTML5 App used to create wireframes, mockups or UI concepts, and prototypes.
  94. Mockflow is a super-easy wireframing tool that enables you to design and collaborate on user interface concepts for your software and websites.
  95.  

    Tools – Usability Testing

  96. Websort – Card sorting application
  97. OptimalSort – Card sorting application
  98. Feedback Army – Set up usability tests in as little as 2 minutes for $20.
  99. UserTesting.com – Set up a usability test and submit it for review from a user base of over 1 million participants.
  100. Silverback 2.0 – Guerrilla usability testing software for designers and developers.
  101.  

    SEO

    SEO or search engine optimization is all about improving or “optimizing” your ranking in search engine results in an effort to increase traffic to your website.  Techniques for accomplishing this vary according to individual search engine.  Here are some helpful resources to improve your website’s rank.

    Articles & Resources

  102. What Is SEO / Search Engine Optimization? – SearchEngineLand
  103. Search Engine Optimization Guide – Google
  104. The Beginner’s Guide to SEO – Moz
  105. Advanced Guide to SEO – QuickSprout/ Neil Patel
  106. SEO Book’s Search Engine Optimization Tools Directory
  107.  

    Tools

  108. Google Rich Snippets – Customize and preview the way your website will display in Google search results.  Rich snippets offer  markup help to enhance your search results listings.
  109. GetListed – Claim your local U.S. business listings on Google+ Local, Bing Local, Yelp, and other prominent local search engines.
  110. Google Website Optimizer – Website testing and optimization tool that allows you to increase the value of your existing websites and traffic without spending a cent -  now a part of Google Analytics.
  111. Meta Tag Generator – Instantly create meta tags that can be pasted into your site by entering the page title and description with this quick tool.
  112. Spider Test Tool – This is a search engine indexing simulator tool that shows the source code of a page, all outbound links on the page, and common words and phrases found in the page copy.
  113. Google AdWords Keyword Tool – This is a great way to get keyword ideas and find the best text for your audience. Identify what words or phrases will drive the most traffic to your site.
  114.  

    Accessibility

    Designing an accessible website includes accomodating visually impaired visitors, visitors that utilize voice reading devices, and visitors that turn off images.  Here are some excellent resources to help you design an accessible website.

    Articles & Resources

  115. Web Content Accessibility Guidelines (WCAG) 2.0
  116. Web Content Accessibility Guidelines (WCAG) Overview – Web Accessibility Initiative
  117. Section 508 Standards
  118. State Accessibility Laws, Policies, Standards and Other Resources (U.S.)
  119. Improve Your Website’s Accessibility With the W3C’s ‘Guide to Using ARIA’ – Webmonkey
  120.  

    Tools

  121. Browser Emulator – See what your site looks like on many ancient browsers.
  122. 38 Mobile Browser Emulators
  123. IE Tester – Browser Compatibility Check for Internet Explorer Versions from 5.5 to 10
  124. Colorblind Web Page Filter -  See what your website looks like for the colorblind.
  125. Wave Accessibility Evaluation Tool
  126. HiSoftware CynthiaSays™ Portal – A joint education and outreach project of HiSoftware, ICDRI, and the Internet Society Disability and Special Needs Chapter. Cynthia Says educates users in the concepts behind website accessibility.
  127. Accessibility Evaluation Toolbar 1.5.7.1 for Firefox- Supports web developers in testing web resources for accessibility features.
  128. Fangs Screen Reader Emulator 1.0.8 for Firefox – Fangs renders a text version of a web page similar to how a screen reader would read it. The ambition is to help developers understand how an assistive device would present a website and thereby increase chances of finding accessibility issues early.
  129.  

    Analytics

    Analytics tools are an invaluable way to show the ROI of marketing campaigns, popularity and usability of website content, value of blog posts, social media influence, and much more.

    Articles & Resources

  130. Web analytics -  Wikipedia
  131. Web Analytics Tools – SEOBook
  132. Web Analytics Category – Mashable
  133. 4 Analytics Tools Librarians Should Know About -  iLibrarian
  134. Google Analytics for Libraries by Joe Morgan – 50 page book on using GAnalytics in Libraries.
  135.  

    Tools

  136. Google Analytics – Free tool that lets you access robust reports indicating the total number of visitors to your website, their demographic, browser, and engagement information.
  137. SiteMeter – Similar to Google Analytics, this free tool provides a quick snapshot of traffic to your website.
  138. Open Web Analytics – An open source web analytics software that you can use to track and analyze how people use your websites and applications.