It’s impossible to separate technology from web design. Technology is what allows you to create your designs – and what allows them to be seen.
Technology helps with every step of the design process, from initial inspiration to final publication. But with literally hundreds of tech tools out there, it can be hard to find the ones you need.
We’ve narrowed it down to a few of the best ones:
Adobe Kuler: Adobe’s products have proven essential to the web design world, and Adobe Kuler is no exception. This free tool helps you create vibrant palettes of up to 5 hues using an interactive color wheel. The coolest part? You can use Adobe Kuler’s mobile app to extract palettes from real-world inspiration.
ColourLovers: ColourLovers is a huge database of colors, palettes, patterns, shapes, trends and more, making it a great first stop for design inspiration. They even have a helpful blog that covers everything from basic design tips to advanced tools – and a design forum for asking questions and getting advice.
Fontstruct: This free online tool allows you to build fonts using geometric “bricks” on a grid. Fontstruct also allows designers to upload their work, and check out and download others’ creations. You can go basic or creative – one popular font is designed to look like robots.
iFontMaker: Like Fontstruct, this iPad app allows you to create your own fonts. But with iFontMaker, you can create a font based on your own handwriting – in just 5 minutes. Just write characters as you normally would, then email your font or convert it into TTF. Try it for clients or for your own personal designs – you can use the fonts in Adobe and Microsoft Office and on the web.
Coda: Coda is a must-have tool for web development. It’s a one-stop shop for everything coding-related – HTML, CSS, web coding, editing, files and more. There’s also the recently-launched Coda 2, an update that boasts better UI and more advanced features.
Mobify: These days, you can’t get by without mobile sites. Mobify makes it easy to tailor your existing websites for mobile platforms. Rework and restyle your existing designs to make them work on a wider variety of devices, including tablets and smartphones.
SnipSave: SnipSave is a simple way to keep track of pieces of code for later reference and use. You can snip sections of code, save them to the site, and access them anywhere – on any device. A recent update allows you to save private snippets and easily export snippets to your hard drive.
PageSpeed Insights: If you use advanced technology, like retina display devices and fiber-optic Internet, your designs will look great – to you. But they’ll look different to someone with an old computer or slow Internet. Test and optimize your website for all speeds and devices with Google’s PageSpeed Insights.
Browser Shots: Designs look different on different devices. And they also look and load differently in different browsers. Make sure your site looks great in any browser with Browser Shots. The tool is compatible with past and present versions of all major browsers.
Cross Browser: Use Browser Shots to see how your site looks and loads. Then, use Cross Browse Testing to check the functionality of UI components like jQuery effects, buttons and navigation.
Behance: Tech tools can help you design – but they can also further your design career. Use Behance to create an online portfolio of your work. Showcase your own work, and get inspiration from others.
design:related: Like Behance, design:related allows you to upload your work into a portfolio. But you can also use the site to check out others’ work, find job postings, read design news and network with design professionals.
Forrst: Forrst is yet another site where you can upload and display your work. The only difference? Forrst is designed to be a place where designers and developers can upload their work and get feedback from their peers. There are sections for visual design, interaction design, coding and more.