Anatomy of a website: HMTL

html-layout-wireframe

Watch some beginning videos here: Adobe

  1. What can you do with Dreamweaver
  2. Understand the Anatomy of a Website : Link and Link
  3. Follow the stages of web design
  4. Define a Site
Advertisements

Sept. 5 : Project One: Product Redesign

This slideshow requires JavaScript.

Redesign website. This could be a restaurant you frequent, a personal website for someone you know who has a service to offer (designer, plumber, hairstylist, anything). This will not be a responsive design as I would like you to get comfortable with other skills before we get there… This project is our intro project, our longer webpage will focus on responsive design.

WEEK TWO: Research/Planning + Wireframe Stage

Written Design Brief:

What is your product/Company?

What is the company mission?

Who is the target audience?

Wireframe of 1st and 2nd level pages

Use assets/components : See this project as a way to practice beginning web design in Dreamweaver. I’d like to see basic layouts with image and text, divs, experimenting with CSS. Remember: The more time you spend planning, the more cohesive and functional your website will be.

See these great links for ideas on “What makes good website design?

5 Simplicity in Design Tips

Smashing Magazine – 10 Principles of Effective Web Design

Good Design – Dieter Rams

9 Essential Principles

Today’s class technical demonstrations + discussions:

    1. What is Wireframing? Wireframing + Planning stage
    2. Plan out your website mockup in Photoshop. Set folders for all pages and export all images for web. Remember: The more time you spend planning, the more cohesive and functional your website will be. Areas to think about : (And look at this: Anatomy of a Website) Header, Navigation, Heading 1, Heading 2, Paragraph, Footer and images. What is on your Navigation Bar? (“About”; “Locations”; “Portfolio”; “Contact”, etc.)
    3. Setting up a Photoshop Mockup – using the extract menu from home and here
    4. Launching a starter page in Dreamweaver (I’d recommend working in “Split” view so you can work visually with your imagery, but also start wrapping your head around code – Defining the Site
    5. I’ll demo basic concepts today – but mostly we are in the planning stage
    6. Share feedback from PBSC new site exercise.

 

IN CLASS EXERCISES: 

Setting up HTML

Adding content

 

And look at this: Anatomy of a Website

Also: Look at the DEVELOP menu (View Page Source) 

In your redesign: things to think about: 

Four keys to Designing Connections: 1. Color 2. Logo  3. Type  4. Shape

See this article in Smashing Magazine for 10 Principles of Effective Website Design

Also this one for The Best Designs

Are you thinking in advance as to how to alter your website for IPad or IPhone viewing? Check this handy link for all pixel dimensions of standard screen sizes. 

See this link for Google Web Fonts

 

 

 

Wednesday, Aug. 29: Welcome students!

26-Things-to-Note-Before-You-Develop-a-Website1Welcome, students!

I’m looking forward to a great semester with you. Today we will talk about an overview of the whole semester, the syllabus, online tutorials and resources and have a short introductory research project and discussion.

I’m thrilled to be teaching this course as we work our way through the components, terminology and features of Dreamweaver.  Through hands-on lectures, demonstrations, and projects, the student will learn the essential techniques and functions of Dreamweaver. We will apply the principles of design to create effective, efficient and consistent web designs.

Please click here for our syllabus and always refer to this blog for our assignments, video tutorial requirements and due dates. This is our tentative schedule – but again, absolute deadlines + assignments are always going to be posted here. So check back regularly as I build this site.

Things to go over today:

  1. Syllabus
  2. Schedule (see below)
  3. Introductions + special interests
  4. Homework:
  5. Highly encouraged: Favorite web design book: $11!

Let’s talk about the following questions:

  • Why are you here? What are your goals? What is your background?
  • What makes a great website? What are things that you think are required, optional and not necessary in a website?
  • What is important to you in the Design vs. Function balancing act?
  • What is Responsive Design and is it important to you? Is it the future of web design or just a current trend?
  • What do you think IS in the future of web design?
  • How important is social media in all of this?
  • What happens when we Google “Bad Web Design”? 😉

Intro research project:

Find 5 websites that you love + 5 websites that you don’t like – Why?

Plan out and research local redesign. Do you know anyone? This is a great way to learn as well as go to them with a better idea.

Some intro and theory-based links to check out: 

Stages of Web Design

An excellent, current, publication :

Web Design Book of Trends 2013 – 2014  and 2017 (Do you want to be a part of the trends?)

Homework: Check out these tutorials on Adobe.com (we will be revisiting these periodically – bookmark them now!)