Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
Web Design Fundamentals is a survey of Web design and development techniques and technologies, fundamental concepts, terms, and best practices involved in professional web design. Instructor James Williamson examines popular web development tools, server-side software solutions, content management solutions, and cloud-based software, providing a high-level overview of the world of Web publishing.
In addition to needing a powerful HTML editor, Web designers need a good graphics program to create web graphics and I would also recommend a few tools to make testing and managing your sites a bit easier. To create web graphics, you'll probably use one or a mixture of five popular tools, Photoshop, Illustrator, Fireworks, CorelDraw, or GIMP. Adobe's Illustrator, Photoshop and Fireworks all offer powerful tools for the creation of web graphics. As part of the integrated Creative Suite they offer a complete workflow solution.
Illustrator and Photoshop will likely be familiar to most graphic designers and are the industry standard for creating vector and raster graphics. Both feature powerful web graphic exporting capabilities. Fireworks is a bit of a different animal, with a more focused approach to creating web graphics. Fireworks was created by Macromedia to compliment Dreamweaver and create web graphics and content. Since then Adobe has refocused the application as a web prototyping tool and it features powerful prototyping capabilities in addition to its graphic creation tools.
If you want to show a client not only how your site will look, but also simulate its functionality as well, Fireworks is a tool that you should take a closer look at. All three of Adobe's tools also allow you to create a larger page mockup and then slice the page into individual graphics, even allowing for multiple file types to be exported from a single page. This can speed up the design process considerably. CorelDraw, the graphic suite from Corel software, features both vector and raster editing tools that allow you to create quality web graphics.
Unlike the Adobe Suite however, CorelDraw is not web focused, lacking a program with Firework's capabilities or Illustrator and Photoshop's integration with a web design tool like Dreamweaver and Expression. GIMP is an open source raster editing tool that is gaining in popularity. GIMP is free and features capabilities that rival Photoshop in editing graphics. However, being an open source tool support can be a little shaky and there aren't as many tutorials or books to help you learn how to use the program. The good news is that it is a free tool so downloading it and checking it out won't cost you a dime.
Now, in addition to a good graphics editor, there are a few tools that most professional web designers should have. Testing your sites and finding out how they perform is an essential part of web design. As such, I'll recommend the following tools. Firebug is a plugin for Mozilla Firefox. It allows you inspect your page directly in the browser. You can debug your page, explore the CSS in detail, and find out which elements on your page are slowing load times. Firebug is invaluable. I also recommend WebKit's Web Inspector. Similar to Firebug, WebKit allows you to view the page source, examine the document object model hierarchy, debug scripts and examine page load times.
It also works with several browsers and is free. Now while not specifically an application, I also recommend using Google Analytics to monitor your sites. Google Analytics allow you to see how people are using your site and if used properly, can refine your design process for greater overall usability and user experience.
There are currently no FAQs about Web Design Fundamentals (2010).
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.