1.2. Web design tools

Every web designer requires the right tools to do their job. To create well crafted original designs you certainly need to be inspired to do so. Web designers use a variety of different tools depending on what part of the production process they are involved in. These tools are updated over time by newer standards and software but the principles behind them remain the same. Web graphic designers use vector and raster graphics packages for creating web formatted imagery or design prototypes. Technologies used for creating websites include standardised mark-up, which could be hand-coded or generated by WYSIWYG editing software. There is also proprietary software based on plug-ins that bypasses the client’s browsers versions. These are often WYSIWYG but with the option of using the software’s scripting language. Search engine optimisation tools may be used to check search engine ranking and suggest improvements.

Other tools web designers might use include mark up validators and other testing tools for usability and accessibility to ensure their web sites meet web accessibility guidelines

Getting to that point is sometimes the hardest challenge in the field of web design. Luckily enough for us and our fellow design community there are tools available to assist in completing the job quicker and more efficiently.

Below, I have outlined a list of tools I recommend for any web designer. Be sure to bookmark these pages so you can utilize them to your advantage like I have!

 

Color

Adobe Kuler (free)

A great tool offered by Adobe which allows members to upload, create, and edit color schemes of their choice.

Pictaculous (free)

From the creators of Mailchimp comes a color palette generator different to any other. Simply upload an image and colors within the image are sampled to create a custom color scheme.

Typography

Google Webfonts (free)

Google has numerous web fonts for any web designer to make great use of. They are free and incredibly easy to implement into your projects.

Moqups (free)

moqups is a HTML5 app used to create wireframes, mockups or UI concepts. The style and features available are very similar to balsamiq. It all boils down to which tool you are more comfortable using.

Google Drawing (free)

A valuable tool that a lot of web designers pass up is Google Drawing. While it doesn’t feature any presets like those on balsalmiq or moqups, it is an entirely free service which you can store on your online google drive. You simply need a gmail address to get started.

Layout and Boilerplates

960 Grid (free)

The 960 grid is the benchmark of the web. Every good web designer should already understand the importance using a foundational grid for their layout as it keeps web design much more usable for the end user. The accompanying photoshop actions in the download have saved me numerous hours of getting alignment issues in check

LessFramework 4 (free)

Less is a framework dedicated to making websites truly adaptive. It’s made to fit nearly any device on the market. It contains 4 layouts and 3 sets of typography presets, all based on a single grid.

Foundation by Zurb (free)

Foundation just released Foundation 4 which according to them is the most advanced responsive front-end framework in the world.

Reset CSS (free)

Without a doubt this globally recognized browser CSS reset is an absolute must for any web designer to offer their designs across any platform or browser.

Content Management

WordPress (free)

WordPress takes the cake when it comes to Content Management Systems. Originally the most popular blog posting platform has turned into that and more in the CMS world.

Drupal (free)

Drupal is an open source content management platform for powering millions of websites and applications. It’s built, used, and supported by an active and diverse community of people around the world. Drupal can be used for everything from blogs to extensive web applications.

By People (free)

By People is a great and simple website feature packed with resources which are all free and easy to use.

Temboo (from free)

Temboo lets developers focus on what makes their software unique. Temboo normalizes access to APIs, databases, and more to save you time and give you the creative space you need.

Code Editors

Coda 2 (from $99)

Ever since coda was introduced to me I have been a fan. I typically compare other code editors to coda and for me Coda always wins the fight. This may be different for you but I suggest giving coda a try if you haven’t yet. Coda2 is packed with features and easy to use UI which makes coding for the web a breeze.

FileZilla (free)

FileZilla is a free FTP solution. It’s also open source software

http://www.webdesignerdepot.com/2013/04/essential-tools-for-every-web-designer/

Answer the questions:

1. What does web design include?

2. What may be used to check search engine ranking and suggest improvements?

3. What can generate standardised mark-up?

4. Which web design tool is not free?