VISC110 - Web Design 1
Prerequisites: VISC 101 and VISC 115.
An introductory level course, which focuses on the tools, strategies, and techniques for web site design, architecture, navigation, language and production. Explores the methods for creating successful web sites from concept to implementation. Examines the process of integrating text,graphics, audio, and video for effective communication of information.
Scraping the Surface
An overview of the Internet
This week, we will explore the current state of the Web and how it plays into our everyday lives. We will discuss what his course will entail and what is expected of the students. We will also discuss various online resources that will be available for learning assistance.
Basic Web Layout Principles
Learning good design that works for the Web
Before designing a layout with branding, textures, images, etc, it will be a good idea to understand the basics of good layout.
Web Typography 101
Correcting Common Beginner Mistakes
Typography is a powerful artistic tool to impact your audience. It can completely change the look and feel of a layout and set a specific mood. In this lesson, we will learn how to avoid some very common beginner mistakes and learn some great tools and techniques to boost our skill level.
Color Theory for the Web
Understanding color & avoiding some common mistakes
In this lesson, we will be learning some of the most valuable and fundamental qualities of color theory. Since we learn our colors at such an early age, it may seem like a very juvenile topic, but really, there are some very sophisticated rules that we can follow to make a beautiful layout or image.
Site Building Blocks
Converting Your Sketch to a Base Layout in Photoshop
It will definitely be helpful for you to have some base knowledge already of Photoshop. However, I will be explaining every technique and hot keys that I use in the tutorial. I will be going at it rather fast-paced, so if you feel the need, it's alright to pause or replay certain sections of the video.
Getting access to FREE resources to help build your site
This week's lesson is all about gathering assets that will help you flesh out your sketch into a well-themed Website. Below are the various categories of assets that you should gather as well as some free sites from which to gather them.
Giving Your Layout Personality
This week's lesson is all about applying the assets you've gathered to your site base in Photoshop.
Codeless PSD to HTML
Learning how to use Photoshop's slice tool to create a tabled HTML site
There are many ways that we can convert a Photoshop layout into a working HTML page - some more code-heavy than others. In this lesson, we will use a somewhat old-school, codeless approach.
Let's Learn How to Code
Introduction to HTML
In this lesson, I use jsbin.com to type out my code. However, I've also listed several other code editors both for Mac and Windows.
Wild Style With CSS
Learning the basics of Cascading Style Sheets
We will be going over some of the basics of CSS and how it can transform a plain HTML document dramatically.
Intro to Dreamweaver
Adobe's Souped-Up Visual Code Editor
In this session, I will explain some of the very basic features and layout of Dreamweaver. Although Dreamweaver has many visual design tools built in, I have found it more useful to think of it as a very fancy code editor.
Dreamweaver Plus Photoshop
Combining the Efforts of Photoshop and Dreamweaver
So far, we have used Photoshop to design a layout as well as some of its basic web design tools to create a start for a coded website. We have also learned about the basics of HTML and CSS. We are now going to combine those skill sets together to finish off our website.