Hostingheaderbarlogoj
Join InMotion Hosting for $3.49/mo & get a year on Tuts+ FREE (worth $180). Start today.
1× speed

Introduction

Lesson Notes

None.

Transcript

Hi guys, welcome to 30 Days to Your First Website Design, a Tuts+ Premium course. My name’s Ian Yates, (that’s me there) I look after Webdesigntuts+ for the guys at Envato and I’ll be presenting this course, taking you through things step by step.

We have a lot to cover, and we’ll be talking about a lot of the basics, but even if you’re not a total novice, there’ll be plenty to take on board which can refresh your memory or smooth out some of the bad habits which inevitably form over the course of time.

We’re going to be working towards a website design, (here it is) but it’s worth nothing that this isn’t a Photoshop > HTML > CSS walk-through – we will cover a lot of that, but more importantly this course aims to get you thinking about the process of designing a website.

We’ll break this up into 5 sections:

Firstly Planning, where we’ll look at your clients and users, that will lead us into Usability. We’ll look at selecting Content and then wrap up with a video about Goals.

Our second section will focus on Design Concepts. Beginning with a few guidelines, Inspiration, Style and Themes, Conceptual sketching, grids and layout, the all important Anatomy of a web page, and lastly Whitespace.

We’ll then move on to the nuts and bolts of web design by looking at Site Elements, including Background Textures, Navigation, Typography, Features Sections, Forms and the Footer.

Section 4 will lead us into Prepping Our Design. It’s a relatively brief section comprised of just three videos. We’ll look at deciding what should be handled with CSS, then we’ll look at Sprite Sheets, and Lastly Organization.

The final section, Section 5, will concentrate on Implementing Your Design. We’re going to choose our applications, look at the Web Standards model. Then we’ll cover our Markup and talk a bit about Semantics. Then we’ll move onto Styling our markup, before looking at browsers, then a couple of videos on javascript behavior. Then we’ll perform some cross-browser testing before finally implementing Google Analytics.

There’s a lot to take in, but we’ll go about things at a relaxed pace, and the final result will make it all worthwhile.

OK, make yourself a coffee (or tea), and let’s get going!

1.Introduction
5 lessons, 25:39

Free Preview
1.1
Introduction
02:44

Free Preview
1.2
What is Web Design?
06:01

1.3
Usability
06:07

1.4
Content
05:20

1.5
Goals
05:27

2.Planning
7 lessons, 45:38

2.1
Three Don'ts of Design Theory
02:48

2.2
Inspiration
05:45

2.3
Style and Theme
06:05

2.4
Conceptual Sketching
11:12

2.5
Designing with Grids
09:01

2.6
The Anatomy of a Webpage
05:44

2.7
Whitespace
05:03

3.Design Concepts
7 lessons, 1:10:58

3.1
Backgrounds and Textures
10:18

3.2
Navigation
08:31

3.3
Web Typography
09:12

3.4
Features Section
16:04

3.5
Contact Form
12:25

3.6
Footer Section
09:05

3.7
Prepping Your Design
05:23

4.Site Elements
5 lessons, 1:04:40

4.1
Sprite Sheets
14:07

4.2
Project Organization
04:47

4.3
Code Editors
14:45

4.4
Web Standards Model
16:25

4.5
Semantics
14:36

5.Prepping Your Design
6 lessons, 1:14:31

5.1
Further into CSS
12:49

5.2
Browsers
16:50

5.3
Behavior: jQuery slideshow
12:43

5.4
Form Validation
13:23

5.5
Cross Browser Testing
11:21

5.6
Google Analytics
07:25

6.Conclusion
1 lesson, 00:48

6.1
Conclusion
00:48


About Ian Yates
My name's Ian and I'm editor of Web Design content at Tuts+. Ask me anything you like about web design… I'll find someone who knows the answer.
+ Expand Bio- Collapse Bio