Web Design An Introduction
to designing, creating and
publishing webpages


introduction

This page is a collection of resources and files for you to use and learn with.


Web Browsers

To begin you need a text editor and a web browser. You already have some kind of web browser to be reading this. But if you are interested in the main cross platform browsers here are the big 2. The reason I recommend them is they have the most active developer resource groups and they are always pushing their own developer tools.

Atom Editor

We are going to use the Atom editor, because its cross platform. By that I mean all platforms Linux, Macintosh and Windows. It is a good balance between user friendly and powerful. Download the app and look at the Atom Flight Manual. If you are interested in other choices Google Text Editors.

HTML Template

Everything starts with an html file, I have a very basic template for you to use. If you find you need some raw content to work with I have a couple text files and a website that gives you a page of lorem ipsum.

  1. ozymandias.txt
  2. jabberwocky.txt

html reference

These are dictionary style lists of all the html tags and a description. If the explanation doesn't help you use the tag, Google the tag name and look for better explanations.

design ideas

These are further examples and design concepts for you to work with.

My hypertext example is here.

A brief explanation of writing for context with hypertext

Hypertext article on Wikipedia. This is a gateway to so much information about the thinkers and concepts that led to where we are now that I don't expect you to digest everything.

home work

This is the foundation workshop, so everything we do builds on what we have covered. So make sure you are comfortable with setting up web projects, creating, naming, and organizing files. Work on fleshing out your web poetry so you have material to work with. Spend some time with the Atom Editor until you are comfortable with it. Read the manual on customizing it and add some modules if you want.

If you are still bored or looking to avoid work, then find 3 websites you think are well designed and a reason why.

Bring your pencils to the next workshop!


Workshop2 Design as a process

Design Process

People tend to confuse art and design, even artists and designers. Art is personal, the agenda is your own. Design is solving a problem usually someone elses.


The steps to designing a website are listed below. We will be stepping through each level in class.

The Statement
The design statement is a declaration of the thing you are making, the problem you are solving, and why. This will be your guide through the process.
The Map
You can call it diagramming or site mapping, or mind mapping or tree diagramming. No one really should care too deeply. The point is you need to get your head around all the moving parts of your site otherwise it will run away from you.
The Frame
The term most used for this step is wireframing. If mapping captures the big picture, framing captures the view of each page. The wireframe is the representation that will be used to create a final design.

Pencil & Paper

Here are links to the drawing materials we used in class as well as the actual websites where the materials where developed. When doing things by hand on paper I always like to remember the quote by cartoonist
Wally Wood.

"Never draw anything you can copy, never copy anything you can trace, never trace anything you can cut out and paste up."

looking to upgrade your writing/drawing tools Jetpens is a great place to start.

New Template

Here is a new template to download it adds stylesheets, grids and images to the mix.

Style sheets

CSS stands for cascading style sheet. This is really how we get websites to look good. There is a lot to absorb so just take it in in pieces.

A brief segway into measurements:

  • pixels px - the universal digital unit.
  • percent % - the fluid measurement
  • em - type based measurement 16px

The Box Model

The box model using dev tools is the best way to see it. Here are the different browsers developer tools pages so you can learn from their tutorials. Pick the browser you prefer, there is no need to learn all of these.

Web Colors

Here are resources for picking web based colors.

CSS reference

Just like the HTML reference links above, there is a huge number of resources on the web. Look up what is possible and if you don't understand the explanation, Google it and find a tutorial that works for you.

The Grid

We are using the Skeleton css framework because its simple ti use. You may want to look into the 2 most popular systems currently being developed, Foundation, and Bootstrap Bootstrap

Want to learn more about the swiss grid you can start here. Also look for published book at your library.

Web Type

home work

All the tools to make a site are here. Think about a small project, a resume, a recipe a short story. Explain something, or document something. Then go through the steps of the design process! Come into the next workshop with something for us to publish!


Workshop3 Publish or Perish

How the Web works

First there was the Internet, and it was good but it needed something to pull the pieces together. Then the World Wide Web was born


The four things you need to publish a website.

  • A SERVER: a place to host your content
  • AN IP ADDRESS: to recieve requests
  • A DOMAIN NAME: to make it human readable

Here is my version of how the web works in .pdf format.

Publishing

Whats a server? It can refer to the program dedicated to serving out information/content or if the hardware its running on is dedicated to the task of just server software we call it a 'server' as well.

There are lots of webservers out there but here are the main ones

  • Apache the original and most used currently.
  • IIS Internet Information Server is Microsofts web publishing platform.

FTP Clients

File transfer protocol is the main system for moving your files up to publish on a webserver. Here are a couple of good free clients. There are a lit of choices for each platform.

  • Filezilla is a free FTP client available on all 3 platforms.
  • Cyberduck is an excellent free Windows and Macintosh FTP client.

Just a word of caution. Free software is great, but with anything you download and install, be careful and be wary of any dialogs where you are offered choices that are not part of the program you wanted. Filezilla 'offers' to switch you to Yahoo etc.

DIY Web Servers

Running your own development server

I've provided links below to the easiest choices and the current favorite for web developers. Also be aware that if you are running a Linux machine then you can use the same software that is used out on the internet. Macintosh users have access to similar software and since at its core macOS is a Unix-like system. You can install the brew package system and have almost the same software as a Linux system. Windows users can go with easy plug in software below or install IIS.

  • Xampp named after the LAMP stack, but offering a version for Windows, Macintosh and Linux. This is the easiest download and run solution. This will let you run a 'real' webserver locally.
  • Windows/Microsoft IIS for Windows 8 or 10.
  • Vagrant is a whole new way of running a server on your workstation. Not for the novice, but a great solution to use as you learn more skills as a web developer.