Courses‎ > ‎MED 390‎ > ‎

Week 04



Note: While these tutorials will be helpful to everyone, they are primarily meant to fill in for students who do not yet have the text. 

If you do indeed have the text, I recommend beginning to watch the DVD tutorials, concentrating on getting through sections 7, 8,  and 9.

CSS Tutorials

Web Design Examples

Project 1 - Workflow

Here's your first "project" for the semester.

When creating a website, much like building a house, or any other project for that matter, there are many steps to attend to before you actually start to see your work accumulate.  Throughout the course of this first project, you will be introduced to the appropriate workflow and procedure of defining, designing and developing your web project.  

Project Plan

For the first phase of the project, you obviously need to know why you're building the site in the first place.  This is the best time to gather specifics. Think of it like the Who, What, Where, When, Why time in the project.  You should have all those things ready, plus some research into what your client likes / dislikes about other sites that are already out on the interwebs.  This part of the project should include data collection, gathering design inspiration, and making notes / sketches.  Typically, most of your work is done in this phase of development, but we don't have a lot of time luxury this semester, so you'll have to move quickly.  

Web Design

For this step, you will start with the sketches from the planning phase and begin developing the project into a multimedia experience.  You should assess what was common in the inspiration sites found, and what functionality will be necessary.  It's much easier to build around needed items than to build them into a design that didn't plan for them.  You will also be expected to wire-frame your project.  Wireframing will allow you to quickly prototype how you will use the available screen real estate.  After wire-framing, comes the mock up phase, which again doesn't require coding or anything of the sort, you just begin adding text / images / graphics to your wire-frame design to get a better visual of how the site will look / feel.


In this stage of the project, you will take your designs and begin translating them into proper markup.  This will be a difficult task to collaborate on unless you utilize something like Dropbox to really share your work in real time.  Use whatever HTML Editor you prefer and really make sure that your site looks good on all the more capable browsers out there.