Home | Site Map | Links | Brain Self-Control | Contact
This work is licensed under a Creative Commons License.
Web Site Design Pages
Site Design
Getting Started
Firefox Tutorial Start the process by mastering the use of a browser.
Six Essential Firefox Extensions for Web Designers Needed tools for Web development.
File Management If you do not master file management, then you will have a very difficult time.
Web Site Development
Good Examples of Web Sites See some of the best before you get started.
Web Design: Rules to Code By A great reference guide with follow-up links to the material.
Web Development Process Overview PDF
Web Site Development Process An overview of the site development process.
Digital Design For a greater understanding of color, fonts, images, and type then this is a must read.
Web Styles Guide an excellent resource--external link. Use for book report.
Graphic Goals: What are the goals of your site?
About Goals The best way to design web sites is to bear in mind the goals of the site and its users.
Your Goals You are on this web site because you have a goal. You may be in the process of designing or updating a web site. You may be developing your professional skills.
Your Site's Goals If you already have a web site, or you have a site project in mind, what needs does it fulfil? How many different needs are there? How strong are they?
User Goals Once you've got a statement of purpose you're halfway to being ready to design. The next step is to understand who'll be looking at the page, and why.
Win Win Solutions Of course, the ideal solution is a win-win, where you achieve your goal at the same time as enabling your visitors to reach theirs. This section of the site introduces some tools to help find win-win situations.
About Personas & Scenarios Personas are an extremely powerful design tool, which help you to visualise an end-product that you can be confident will suit your users' needs by helping them achieve their goals, and help you test your success.
Site Personas and the Dialogue Process Site Personas are analogous to User Personas. Whereas User Personas represent typical inpiduals in your target user base, together with goals and motivations, the Site Persona represents the site, embodying its brand and its goals.Know and Target Your Viewers
How People Use Web Pages The best thing you could do is gain an understanding of how your audience will view/read/scan your site.
Content The purpose of design is to facilitate communication. Choosing what to communicate is the first step.
Don't Decorate...Communicate There's nothing our brains like so much as order and meaning. It's what they search for from the moment they encounter anything new - and that includes your web page.
Branding If done well, your brand image can inform your consumers' thinking about your market position, value, quality, price, service level, heritage, size, and anything else that matters.
The Golden Rule For the Web designer, there is only one rule that he/she needs to be concerned with.
Conventions Design conventions are informal rules that have been adopted over time, and have become embedded in visual culture.
Factors That Influence the Browsing Experience Factors that affect the online environment, and what we can do to mitigate their impact.
Design Engineering A few helpful hints.Understanding Design
Scanning Why web users scan and what designers can do to help
Content Design is all about content. Content is the designer's problem.
How People Use Web Pages How people really use web pages is different from the way designers think they do
People Are Impatient Why we are impatient when using the web, and what designers can do to improve things
Factors That Influence the Browsing Experience Other factors affecting the web browsing experience
The Brain's Strengths Understanding what the human brain has evolved to do helps designers create better web pagesThe Design/Plan Stage
Planning Your Web Site This is the what is required of all IBMYP students.
Principles of Copyright Before you build anything...know the laws!
Planning Your Website You want to build a Web site, but may not have the tools to get going. Here you will learn how to put some of your ideas down, and how to construct storyboards. This is one page that you may want to revisit. REQUIRED: IBMPYP
Ten Steps To A More User Friendly Website consider these a few of the simple goals that you want to keep in mind when building your site.
Web Design: Rules to Code By This is a Web resource that provides a lot of invaluable information...especially on spybots, webots, etc.
The Golden Rule of Website Building A few simple words/concepts to help you get going...consider this your 'outline,' and you will fill in the blanks latter.
The Principles of Beautiful Web Design NEW
10 Tips on designing a fast loading web site Start off by doing things the right way and you will not lose browsers due to slow load times.
Web Site Specification PDF
Web Design and Development Process PDF
Site Structure PDFGraphic Design Basics
Graphic Design Basics Index a set of tutorials covering the basics of Graphic Design
Clarity in web page design Making a clear web page depends on making the most important elements appear important, less important stuff less important, related stuff look related, and different stuff look different.
Colour General guidelines on how to use colour in web pages.
Contrast The importance of contrast in graphic design for the web
Readabilty Making pages easy to read by design
Effective text The strengths of using HTML text rather than words as graphics in web design
Imagery How to use imagery to best effect
Attention Map A low-tech tool for planning page layout, helping you plan what your page should do before you get your hands dirtyPage layout
Layout for web page design Overview of the major graphic design devices
Containment Containment is a layout tool that says visually "This thing is part of that"
Alignment Using alignment in visual design for the web to associate related elements
Grouping Associating elements through relative positioning in space
Rhythm and repetition A further technique for associating elements is through repeating common styling
Logical order Importance of logical order of visual components in web page designVisual techniques
- 3D Effects in graphic design for the web Guidelines on how to use 3D effects effectively in graphic design for the web
- Logo design The four attributes of an effective logo: shape, presence, weight, and contrast
Key Characteristics of an Effective Logo- Text-based logos Why text-based logotypes are very effective
- Favourite logos A collection of my favourite logos from around the web, with analysis of why I think they work.
Case studies
- Artorg: Worked example Tweaking the layout to ehance the user experience of a nice community site for graphic artists
- Case study: Business Improvement Network Applies a totally new look and feel to the web site of a business networking organisation
- Case study: Foruse
Web Accessability
The Internet is our society's life blood, and we have an obligation as Web programmers to insure that everyone has equal access to information. Some may question how 'low speed' can be considered an accessability issue...simple, not everyone makes the necessary money to afford high-speed Internet.
Usability for the Blind and Low Vision
Color Vision Confusion
The Elderly
Developing For Low Education/Motivation
Children On the Internet
Universal Usability Guidelines for Users with Slow Connections
Customer Service for Web Developers
The Tools: Photoshop CS3, Fireworks, and Dreamweaver
The Photoshop Pages This index will introduce you to Photoshop, and then provide you with numerous tutorials on how to create various objects for the Web, games, and other multmedia platforms. Objects such as: web buttons, menu bars, backgrounds, tabs, banners, etc. This is the companion to The Fireworks Pages
The Fireworks Pages This index will provide you with an introduction to Firworks, and then provide you with numerous tutorials on how to create various objects for the Web, games, and other multmedia platforms. Objects such as: web buttons, menu bars, backgrounds, tabs, banners, etc. This is the companion to The Photoshop Pages
Making a Web Photo Gallery
Logo Design Tips
How to Design and Create an Effective Logo
Create for Web
Design a Website In Photoshop
Turning A Sliced Image Into An HTML Webpage
Consistent Web Design with Dreamweaver Templates Learn why templates are so important, and begin creating them.
Template Parameters
How to create a non-moving wallpaper for your webpages Once you have your page laid out you may want to add a custom look.
Tableless Layouts with Dreamweaver Using tables for layouts can get a bit sloppy. It is to your advantage to know different metods of laying out your pages in Dreamweaver.
What is Expanded Tables mode?
Alternate Text
Close Window Javascript How to close a window via DW.Extra Tools
Download YouTube Videos
Embedding Audio and Video into Dreamweaver Pages
Using Flash and Video in a Website
Videography and Cinematography BasicsWeb 2.o
Web 2.o Software: Best Of
Web 2.o Definition
Web 2.o HackerNews Definition
What Is Web 2.o? Design Patterns and Business Models
The State of Web 2.o
MMORPGs and the Virtual Sweatshops of the Digital Empire
Content Migration between 3D Online Learning Environments
When Worlds Collide - Exploring the relationship between the actual, the dramatic and the virtual
Bumping Into Ourselves: Individual and Virtual Worlds
The Network Really Is the Computer
Google Aims to Break Open the Closed World of Social Networking
OtherWeb Design Tutorial Links outside links to Web sites that concentrate on design tutorial.
Web Design Links and Tools HTML Tutorial and more external links that cover more areas of Web development.
Web Styles Guide an excellent resource.
Note: All revenues generated by ads are used to support and maintain this site.
Home | Site Map | Contact Us