Design - web design tools - web design training

17.1. Web design encompasses many different skills and disciplines in the production and maintenance of websites. The different areas of web design include web graphic design; interface design; authoring, including standardised code and proprietary software; user experience design; and search engine optimization. Often many individuals will work in teams covering different aspects of the design process, although some designers will cover them all. The term web design is normally used to describe the design process relating to the front-end (client side) design of a website including writing mark up. Web design partially overlaps web engineering in the broader scope of web development.

 

 

17.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?

 

17.3. Web design training

There are many approaches to web design training - some paid, some free; some interactive, some not; some based on text, others on video. Which means it can even be an uphill struggle working out where to go and what to learn.

To make things easier for you, we've gathered the best 20 web design training resources on the web. All have a good reputation and feature instruction and advice from web design's leading experts. Most include a range of lessons covering a range of levels, from beginner to advanced.

Google's lessons in "HTML, CSS, and Javascript from the Ground Up" presents the basics of building websites with video tutorials presented by Google's own developers. A perfect place for beginners to start with their web design training.

 

Treehouse is a video-based service, offering web design training in HTML and CSS, web development (including HTML5 and Javascript), and creating iOS apps (using Objective-C and Xcode), all wrapped up in a clear and easy-to-navigate user interface. Treehouse charges a subscription for its services, but the videos are very professionally produced, and you get a wealth of lessons covering almost every aspect of web design and development. Not only does Treehouse provide great content but there's also a game element to the site that tests you on what you've learned and rewards you with achievement badges. So if you need extra motivation to learn, this is a great site to use.

 

Like Treehouse, Lynda.com offers a wide range of video-based tutorials that can teach you how to design websites (as well as covering other design-related subjects) for a monthly fee. Lynda.com has been around since the dawn of the web (it launched in 1995), and also produces books, videos, and documentaries. An authoritative source of web design training videos, you can get a taster by checking out its free tutorials

 

Codecademy describes itself as the 'easiest way to learn how to code' and has established a great reputation for itself within the web design community.

This free web design training resource runs through the path of building websites, games, and apps in an engaging way, easing users in gently with a very basic first lesson.

The site also features a social network aspect, meaning users can interact with and learn alongside friends and colleagues. And, like Treehouse, the team at Codecademy also understand the power of a badge, offering them at various key points in the training.

And finally... Stackoverflow is not in itself a place to learn web design, but it is an invaluable resource for anyone learning any web design language. Put simply, it's a question-and-answer forum where some of the brightest minds in the web design community give up their free time to help those who have got hopelessly stuck.

So if you ever hit a wall and just can't get your head around something you're learning, or have written some code that just doesn't seem to be working, this is a great place to get help and advice from some old hands (and once you get more confident in your own skills, make sure you pay it forward and help out some newbies yourself...).

http://www.creativebloq.com/web-design/training-online-resources-812225

 

For learning: http://www.hongkiat.com/blog/web-design-trend-2013/

 

Answer the questions:

 

1. What video-based service can offer web design training in HTML and CSS, web development (including HTML5 and Javascript), and creating iOS apps (using Objective-C and Xcode)?

2. Which web design training resourse has been present since the beginning of the web?

3. What can help you learn any web design language?

 

http://ocw.nd.edu/computer-applications/applied-multimedia/reading/readings

EXERCISES TO UNIT 17