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.

View Lesson…

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.

View Lesson…

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.

View Lesson…

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.

View Lesson…

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.

View Lesson…

Gathering Assets

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.

View Lesson…

Branding

Giving Your Layout Personality

This week's lesson is all about applying the assets you've gathered to your site base in Photoshop.

View Lesson…

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.

View Lesson…

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.

View Lesson…

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.

View Lesson…

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.

View Lesson…

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.

View Lesson…