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.
As we begin to explore some other areas of web design that you might specialize in, I want to start with site design. Site design is what most people think of when they think of web design, since it deals with the actual look of the website. If you're migrating from graphic design, this is the most logical place for you to start, since visual design skills are a must for this discipline. It is important to note, however, that the web is its own unique visual medium, and learning how to design correctly for the web is just as important as learning how to design effectively for print.
When creating websites, it's important to strike a balance between the Visual Design and things like site load time, usability and consistent user experience. Now speaking of Visual Design, color, typography and layout all require a slightly different approach for online design. For example, on the web, viewers can choose to resize the text in your layout, or even replace the font entirely, if they prefer something else. This lack of control over the designed environment takes a while for most graphic designers to get used to.
Instead of trying to make web design more like Print Design, I recommend learning all you can about your new environment, and designing specifically for the medium. This means learning all you can about how presentation is controlled on the web, how to maximize readability for your content and how standards and design patterns have evolved for certain types of websites. The web is constantly changing and web standards continue to evolve, so it's best to look at this as a constant point of focus during your career. It's also important to remember that for the web, you're not just creating visuals.
You're building a user interface that should satisfy the needs of both the client and the user. With that in mind, let's take a moment to examine a typical workflow common to many web designers. First, you should explore the goals and the audience of your site. I cannot overstate the importance of this step. Many times I've sat down with the client and although they know they want a website, they haven't really sat down and prioritized the site's goals. Before the first thumbnail sketch, you should make a list of all the things that the client wants to accomplish with the site, and then compare it with the needs of the target audience.
Prioritize the functionality of the site and make sure that it's going to respond well to both the client's goals and the user's expectations. Completing this step will give you a solid design direction, and give you an idea of the functionality needed to meet those goals. Next, make sure that you focus on the content of the site, and making that content central to the site's design. Moreso than in Print Design, on the web, content is king. All the animation, video and cool graphics in the world won't prevent a site from failing, if the content isn't clear and accessible.
In fact, I've often seen the design elements of the site restrict access to the content and make it harder for users to find what they're looking for. Remember, good design is often clear, concise and uncluttered. Now, that's not to say that you shouldn't focus on the visuals of the site, just that in regards to the web, those things should enhance and draw attention to the content, not distract from it. Take Flash for example. I love Flash. I built this presentation in Flash. However, if you can't justify using it in a way that creates more compelling and direct content, don't use it.
Because it's cool is not a justification. Now, typically, once I have a clear direction for the site, I'll start organizing content and then wireframing it, so that I know the structure of the site and how the navigation should work. While this is actually more information architecture than design, it's a very important step. I'll discuss information architecture in more detail shortly. For now, it's important to understand that understanding how the site will be organized will dramatically affect the overall design. Proper navigation, content organization, and the amount of pages necessary to clearly convey the site's focus is directly related to properly organizing content before moving forward with the design process.
Next, I'll generate some thumbnails, or site mockups, for the client to review. Now this usually involves homepage design, secondary content areas, and graphic and color treatments. Depending upon the clients, this could be anything from a sketch on a Post-it note to a finished mockup in Photoshop, Illustrator or Fireworks. Now if the site has advanced functionality, I may go so far as to create clickable prototypes, so the client can accurately visualize how the site will operate. Now once the client review is complete, I'll begin creating the site through HTML and CSS, images, any additional required technology or content, such as Flash.
Although everyone is different, I usually create my sites directly from my prototypes, exporting out the graphics and using it as a reference for my HTML and CSS. At this point, the design is finished and I'm just assembling it using the appropriate technology. Also, one more thing. To make sure that you're maximizing your site's effectiveness, you need to test it. You should study web usability continuously. Now web usability is the study of how people use the web and their personal preferences involving navigating and interacting with your sites.
Knowing how your target audience prefers to use the web, and the barriers that you might unwittingly put up through your design is essential to creating effective sites. Now I know this sounds like a lot, and like most disciplines, it is. However, I hope I've emphasized the point that it takes more than just good design sensibilities to create well-designed sites. It could be hard for most designers to accept, but you have to be comfortable with the idea that you don't have total control over how visitors view your site. Your sites are likely to be consumed by multiple browsers, user agents and devices, all of which will to display your pages with slight and sometimes not so slight differences.
Understanding how these browsers and devices work will enable you to create designs that give a consistent user experience across multiple devices, and ensure the long-term success of your site.
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.