1) Web design: some basics
2) Tools you can use
3) What’s critical
5) Homework and work time
2. Web Design: Basics
There are some specific points we need to make as
we start. We will be DESIGNING for the web, but
what we’re going to do isn’t, specifically speaking, the
“job” of a web designer. You might not be required to
work as intimately with code as a
professional web designer.
3. Web Design: Basics
For our purposes, you need to determine what you want
your web presence– the site you are going to make– to
look like. That requires the standard wire framing and
some mock-up work. But at that point,
your tasks change. Instead of needing to
code from scratch, you need to
determine the best possible
way to accomplish your
site design goals.
4. Your goal: hit your skills + learn
This doesn’t mean that you should find something you can
plug-and-chug into and stop; that’s not learning design.
That’s using a template. BUT templates and content-
management can be really useful for creating sites.
You need to balance your needs with your
level of skill. You should still be
learning, but you don’t want
to make the curve
5. For some of you…
That might mean working with Dreamweaver. We’ll be
working in DW later today so you can see some specifics.
Dreamweaver is good for people who either know code,
want to learn code and are not afraid to stare it
down, want to “borrow” easily from the web,
or think they might want to look
into a web job, as it is
Will want to use some sort of Content Management
System (or CMS). I will suggest several here, but you are
welcome to look at and into others.
8. Pro tip: You can do MUCH more
if you own your own webspace
and upload an install of
WordPress than you can with
the WordPress app itself.
10. Weebly and Wix
11. Google Sites
12. The key for you…
…is to figure out what you want the site to look like when
you’re done. That’s why the wire-frame and mock-up
matter so much. You can then determine if one or the
other of those tools will work for you.
13. Pro tip: one of the keys you
need to think about with your
site is FUNCTIONALITY. The
reason something like
WordPress is often superior to
tool like Google Sites (or even
to hand coding) is that you can
automate how content is added
14. Let me show you…
…some Dreamweaver. Please pull up the PSD file from the
course website, posted with today’s PowerPoint.
I’m going to show you some basics as well as how you
would start to move pieces over from
Photoshop into DW.
15. Your homework
For next class, I want you to have a sophisticated mock-up
of your web presence/site. This should include a wire-
frame and mock-up as well as a list of what features the
site needs to be able to accommodate.
We will talk about how to
realize these designs.