Designer's Corner - Photoshop, 2d and 3d Tutorial

2006-10-16T04:36:00.000-07:00

CSS Tutorial for Beginners

CSS stands for Cascading Style Sheets, and it is essentially the language used for styling the contents of an HTML page. I won’t go into the history, reasoning and technical aspects of why CSS is so important. But, instead I will briefly sum up in a list of three reasons what the real purpose behind designing with CSS styles is.

For simple to complicated websites, the content within the site can be completely separated from the design of the site. This is important for a couple obvious reasons: you can update content without changing the style, and you can change the style (colors, fonts, layouts) without having to make any changes to the content.

You can make one change to a style sheet, and it will simultaneously change every part of your content that takes its orders from that style sheet. Let’s put this into perspective-changing one piece of CSS code, can change the colors, layout, fonts, and more of many, many, many pages all at one time. For a great illustration of this quality taking effect, please visit and read the information on the home page of:

http://www.csszengarden.com

Main Format

Cascading Style Sheets are composed of two main parts: Selector & Declaration.

This is an example of a simple style sheet:

H2 { Font-weight: bold;}

The Selector is “H2”

The Declaration is “Font-weight: bold”

If you attach this style sheet to any HTML document, all of the content held between the

tags will be bold. There are many different types of declarations and selectors, and you will probably not memorize all of them. Having some kind of online resource, or text reference will help you when you’re in the process of creating your site. Also, Dreamweaver will automatically list the selector or declaration items if you type in part of it, Dreamweaver also has some unique visual aids and guides when working with CSS.

Attaching CSS

When you write up all of the style sheets, using the particular selectors (H2, H1, P, etc.) and declarations (font-weight: bold, font-size: 12px, etc) you will then save this document as a CSS file. CSS files contain no head tags, no paragraph tags; basically they are not formatted the way that HTML pages are formatted. Just the styles, that’s it.

You save the file will a .css extension, and then proceed to attach it to the HTML documents you want to be affected by it.

You would attach a style sheet as show in red and within the head portion of the HTML:

The code shown in green is the way in which you would attach a style within the HTML document, and requires no linking whatsoever.

    
      HREF="MainStyle.css" TITLE="Cool">
  
    Headline is blue

While the paragraph is green.

Now, you can probably see why putting a style attribute
(declaration on a selector)within the body of the text
defeats the purpose and greatness of CSS.It only affects
the one piece of text that the style in surrounding.

Selectors

If you are new to CSS, you are probably wondering…What I
can use these style sheets on, so far I’ve only see P and H1…
You can style almost any standard HTML selector, some examples
include:

H1, H2, P, em

In addition to these selectors, you can actually create selectors
yourself, and identify images or content as the selector! The two
examples of this are:

ID Selectors have a unique value over all other selector elements.
An example of what the CSS code would look like using an ID selector:

#Days { font-family: verdana; color: #ffffff }

There are two ways to specify the ID within the HTML code.

You can identify this ID with another element-

Monday, Tuesday, Wednesday

Or as its own DIV, which is also its own unique element-

Monday, Tuesday, Wednesday

Class Selectors similar to ID selectors, but their formatting
is different, and they hold a slightly less importance than ID
selectors when it comes time for the HTML to choose the order
of the styles. An example of what the code would look like:

.days {font-family: verdana; color: #ffffff}

There are also two ways to specify the class within the HTML code.

You can identify the class with another element:

Monday, Tuesday, Wednesday

Or as its own DIV, which is a unique element being styled by
the class selector

Monday, Tuesday, Wednesday

Here are some resources to help you better understand the many different class
selectors and declarations. It is composed of many pages, but it is useful to
get a general idea of some of the possibly attributes and selectors that can
be made using CSS.

http://www.w3schools.com/css/css_reference.asp

I will continue the CSS Tutorial for Beginners in a “Part 2.” Cascading Style
Sheets can be very confusing and overwhelming if you are new to them. When I first attempted to teach myself CSS, I spent hours upon hours, days upon days, tryin to find resources online that provided me with in depth knowledge on the subject.

2006-10-13T01:14:00.000-07:00

WordPress and SEO

There is a big bunch of resources on optimizing your blog for search engines. I have tried to collect the best tips and plugins in this article.

These tips won’t flood your blog with visitors - no SEO tips will. Use these tips to improve your site, and fight for a lot of backlinks and visitors by writing quality content and putting a lot of work into it. It has never been easy to run a website, and it for sure isn’t getting easier.

Permalinks

Use a permalink structure and be sure that the post title is in it. In the WordPress administration go to Options>Permalinks and select a permalink structure, or make your own. I use /%year%/%monthnum%/%postname%/ on this site.

Page titles

The title tag should show the title of the current post or page you are currently visitng. Eg. this page will have the title »WordPress and SEO | The undersigned«. In your themes header.php file you can do this by making sure that the title tag looks like this:

<?php wp_title(‘ ‘); ?><?php if(wp_title(‘ ‘, false)) { ?> | <?php } ?><?php bloginfo(‘name’); ?>

Headers

Search engines weigh headers (h1, h2, h3 …) higher than other content (p, li …), so it is important that you write good titles that also contains keywords that matches the content. The best thing is to only have 1-2 h1 tags on each page, eg. the blog title and newest blog post.

Alt tags

Use alt tags for your images, and be sure that they match what the image shows - this helps google image search and other image search engines.

When visitors is referred to your site from a search engine, they are definitely looking for something specific - often they just roughly check the page they land on and then closes the window if what they are looking for isn’t there. Why not help them by showing them related posts to their search on your blog.

Landing sites 1.1.

Google sitemaps

Google has a feature for webmasters, called Sitemaps. This helps google index your site, and lets you weigh what content on your site, you find most important.

Use the feed feature! Set up your WordPress to ping a list of aggregators automatically in Options>Writing. A great list of ping services can be found here.

Valid markup

Be sure that your your site validates, this might not be the most critical point from a SEO point of view, but it might weigh some.

Avoid this

Google says you should avoid this:

Avoid hidden text or hidden links.
Don’t employ cloaking or sneaky redirects.
Don’t send automated queries to Google.
Don’t load pages with irrelevant words.
Don’t create pages that install viruses, trojans, or other badware.
Don’t create multiple pages, subdomains, or domains with substantially duplicate content.
Avoid “doorway” pages created just for search engines, or other “cookie cutter” approaches such as affiliate programs with little or no original content.
Tricks intended to improve search engine rankings.

Get backlinks

Write to your friends, to other bloggers, and trade links with them. Get a linking-network established, and make sure that some people link back to your site, using your blogs title or primary keywords as anchor-text. Amount of links and especially links from quality sites, helps you being placed better in search engines search results. When writing an article, be sure to link back to your sources (if these are blogs, in most cases, a trackback link to your blog will be shown on their site). Be sure to link to your blog in forum signatures, mail signatures etc. as well.

Update your blog

Be sure to keep your blog updated - no one visits a dead site. Eventually you can let del.icio.us post your daily bookmarked links to your blog - this helps making your site look active.

How to automatically post daily links.

Stick with it

Stick with the same domain name, blog title, permalink structure etc.

Write quality content

Write quality content, it is the most important. Write quality content that people want to read. Stick to a few topics, and write mainly about those. Quality content might bring you to del.icio.us and digg.com as well.

Involve the reader

Encourage your visitors to comment on your posts and join the discussion. Involve the reader by writing to them. »You should«, »We could« and less using »I have«, »I did« etc.

More SEO sources

2006-10-12T04:31:00.000-07:00

Lightbox 2.0 Web Photo Gallery(part2)

Due to popular demand, I have extended the Lightbox Web Photo Gallery tutorial with instructions on adapting it to work with Lightbox 2.0. Since this is a continuation, I highly suggest reading the original tutorial, otherwise you'll probably be a bit lost.

Quick Guide

Start by duplicating the "Simple" preset folder (or the "Lightbox" folder if you created one already) in your Presets > Web Photo Gallery folder. Rename the duplicated folder to "Lightbox 2.0" and create a folder within that called "images". Visit the Lightbox JS v2.0 website and download the necessary files. Drag the supporting Lightbox 2.0 images, stylesheets and javascript files (from your download) into the "images" folder.

Open the Thumbnail.htm file, located in the "Lightbox 2.0" folder, in your favorite HTML or text editor. Set the anchor tag to:

Open the lightbox.js file, now located in the "images" folder. Find line (approximately) 331 where it says

imageArray.push(new Array(imageLink.getAttribute('href'), imageLink.getAttribute('title')));

And add/change that line to:

Then find line (approximately) 343 where it says:

And add/change to:

A little below that, you'll want to find:

while(imageArray[imageNum][0] != imageLink.getAttribute('href')) { imageNum++;}

And change it to:

while(imageArray[imageNum][0] != imageLink.href) { imageNum++;}

Save your edited javascript.js file. Run your new Web Photo Gallery through Photoshop.

2006-10-12T04:26:00.000-07:00

Lightbox Web Photo Gallery(part1)

Adobe Photoshop's Web Photo Gallery is a great and easy to use function, but the quality of your preset options have always seemed lacking. Using the Lightbox JS javascript library and the Web Photo Gallery we can easily create a very slick photo gallery for your website.

Here's an example of a Photoshop Lightbox Web Photo Gallery.^*

Photoshop's Web Photo Gallery automation is located under File > Automate > Web Photo Gallery.... It's been available since version 5.5 (I think). This tutorial doesn't cover the basics of using the Web Photo Gallery, but Adobe offers one in their Resource Center. So, if you've never used it, check that out first.

Since this isn't JUST a Photoshop tutorial I'm expecting a few different levels of readers:

Non-Programmers
For those of you that don't want to do any programming you can download the Lightbox Web Photo Gallery preset and install it into your Photoshop CS2/Presets/Web Photo Gallery folder. There's a text file called "Color Settings.txt" in the "images" folder of the download containing the matching color setting values I used in my example.

Mild-Programmers
Those you of you that can handle some basic HTML and aren't afraid of a little javascript, read on, this tutorial is mostly for you.

L33T Programmers
You can probably just skip to the Lightbox JS Editing instructions and figure things out yourself. I'm just hoping this sparks your creativity and you create some awesome galleries then post them in the comments.

Getting Started

Start by navigating to your "Presets" folder in your Photoshop CS2 install directory.
Windows: Program Files/Adobe/Photoshop CS2/Presets/Web Photo Gallery.
Mac OS: Adobe Photoshop CS2/Presets/Web Photo Gallery.

Find the folder labeled "Simple" and duplicate it. Rename your duplicate folder to "Lightbox" (or whatever you want to call it). Within your new folder create another new folder and call it "images".

Visit the Lightbox JS website or even the newer Lightbox JS v2.0 website and download the necessary Lightbox files to the "images" folder you created earlier. For this example, I will be using the original Lightbox v1.0 files because it's an easier setup and install. Although, I must admit, the 2.0 version is very slick.

*UPDATE*
Due to popular demand, I've added instructions to using the Lightbox 2.0 javascript with Web Photo Gallery in this mini-tutorial.

The Photoshop Web Photo Gallery uses custom tags to generate the content for the pages in the Web Photo Gallery. The tags are defined with surrounding "%" signs, which Adobe calls "tokens". For a list of all available tokens, you can search in your Photoshop Help documents by pressing F1, or you can download the list of available Web Photo Gallery Tokens here. This is a good guide for all of the token functions available.

These next few images will illustrate the options in the Web Photo Gallery and (some of) their corresponding tokens.

General Options

Email address: %EMAIL%
Character set: %CHARSET%
Image width / Image height: %image_width% / %image_height%

Banner Options

Site Name: %BANNER%, %TITLE%
Photographer: %PHOTOGRAPHER%
Contact Info: %CONTACTINFO%
Date: %DATE%
Font: %BANNERFONT%
Font Size: %BANNERFONTSIZE%

Large Image Options

Add Numeric Links: %ANCHOR%, %NUMERICLINKS%
Border Size: %IMAGEBORDER%
Titles: %FILENAME%, %FILEINFO%, %CREDITS%, %CAPTIONTITLE%, %COPYRIGHT%
Font: %CAPTIONFONT%
Font Size: %CAPTIONFONTSIZE%

Thumbnail Options

Size: %THUMBNAIL_WIDTH%, %THUMBNAIL_HEIGHT%
Columns and Rows: %THUMBNAILSROWS%
Border Size: %THUMBBORDER%
Titles: %ALT%,%FILENAME%, %FILEINFO%, %CREDITS%, %CAPTIONTITLE%, %COPYRIGHT%
Font: %CAPTIONFONT%
Font Size: %CAPTIONFONTSIZE%

Custom Color Options

Background: %BGCOLOR%
Text: %TEXT%
Link: %LINK%
Banner: %BANNERCOLOR%
Active Link: %ALINK%
Visited Link: %VLINK%

The Coding

With all of the tokens and their corresponding settings known you can start programming the Web Gallery files. I like to start with my own fresh HTML document. Adobe doesn't pay much attention to web standards.

Then enter the Web Photo Gallery tokens you want use, some custom styles and link any supporting files in the content. I'm using an external stylesheet, but any Photoshop tags you want to use in CSS have to be placed inline, as you can see.

Then enter the body tags and tokens and save the file as IndexPage.htm in the "Lightbox" folder, overwriting the original file.

Locate the file Thumbnail.htm in the "Lightbox" folder and open it in an HTML editor.

The Thumbnail.htm file should have the following code in the anchor tag to work with Lightbox JS:

So that it should look something similar to this:

Next, open the Caption.htm and SubPage.htm files and delete ALL

of their contents. Both files should be blank.

Modifying the Lightbox JS File

The next step is to open up the lightbox.js file that you downloaded to your "images" folder.

Navigate to around lines 37-38 of the file and change the loadingImage and closeButton variables to include images/.

var loadingImage = 'images/loading.gif';
var closeButton = 'images/close.gif';

Navigate to around line number 240 and add the following:

objLink.href = objLink.href.replace("/pages/","/images/");
objLink.href = objLink.href.replace(".html",".jpg");
objLink.href = objLink.href.replace(".htm",".jpg");

Above the line:

imgPreload.src = objLink.href;

It should look similar to this:

Save your updated lightbox.js file.

This code is replacing the links to the .html subpages that Photoshop automatically creates with links to the full-size images. I wish there were a cleaner way to do it, but the Web Photo Gallery has a limited set of functions and options.

Creating the Gallery

Go to File > Automate > Web Gallery and under Styles choose Lightbox.

Choose your settings and options as usual and let Photoshop create your new Lightbox-ready Web Photo Gallery!

2006-10-12T04:19:00.000-07:00

Website Design Mockup Tips

This tutorial will show you a few tips, tricks and techniques you can use when mocking up your next website. When mocking up a website design, there are a few design elements and styles that are really easy to create in code, but may not be as obvious when working in Photoshop.

Borders and Underlines

It's incredibly easy to create dotted (and dashed) underlines and borders with some simple HTML and CSS. Let's start with a dotted underline.

Dotted (and Dashed) Underlines
Create a new document 2-pixel wide by 1-pixel height. Make sure the background is set to Transparent.

Zoom in as close as possible (1600%) by pressing Ctrl + Alt + =. Draw a 1-pixel dot, using whichever method you prefer.

Press Ctrl + A to select all and go to Edit > Define Pattern and give your new pattern a name.

Back to your website mockup, create a new Pattern Fill Layer Layer > New Fill Layer > Pattern... or use the icon at the bottom of the Layers palette F7. Choose your newly created 1-pixel pattern.

Press D to reset your colors and press Ctrl + Backspace to fill your new pattern layer mask with black.

Choose the Line Tool and in the Options Bar select the Fill pixels button.

Set your foreground color to white and draw a line wherever you want a dotted underline to appear.

NOTE: Our favorite web-browser Internet Explorer doesn't do dotted underlines, they do dashed. To do a dashed underline, use the same technique but make a 6-pixel wide document with a 3-pixel wide line.

Dotted Borders
Create a new document 2-pixels by 2-pixels. Zoom in as close as possible and draw two dots on opposing corners.

Select all with Ctrl + A then go to Edit > Define Pattern... naming your pattern something you can remember.

Create a new Pattern Fill Layer and fill the layer mask with black.

Now you can draw your square-selection wherever you would like your border.

Go to Edit > Stroke and set the Width to 1px. Press OK and you now have your dotted border.

Text and Fonts

Accurately simulating font behavior can be a tricky task. Differences are dependant on the user's machine, browser and settings. One of the hardest feats is determining when a browser is going to apply anti-aliasing to a font on a website.

Luckily for you, I went ahead and created a quick page showing some of the more common fonts in various sizes, so you can see at what size they anti-alias.

Font Size Quick Guide.

My suggestion would be to view this page on a few different machines and browsers so you can accurately determine what settings you need in your mockup.

I like the way the 11pt Verdana looks, so that's what I'll use in my mockup. Create a text block by clicking-and-dragging the Text tool T.

Open the Character Palette by going Window > Character. Here's where all of the font settings are. I'll plug-in my settings, making sure that the Anti-aliasing is set to None.

Then I can paste in my text and get a fairly accurate representation of how it will look in living HTML.

Using my handy guide, I'll go ahead and create some header text.

Managing Colors

Fill Layers and Clipping Masks are huge time-savers and some of my favorite features in Photoshop. Let's put these features to use to manage the colors on our mockup.

Start by creating a Solid Color Fill Layer by going Layer > New Fill Layer > Solid Color... or using the button at the bottom of the Layers palette. Choose whatever color you want.

The trick to using Clipping Masks is that the color layer has to be above the layer you want to mask it to in the Layers palette. Like this:

With your color layer selected in the Layers palette press Ctrl + Alt + G or go Layer > Create Clipping Mask. Your color layer will now be shifted to the right with a tiny down arrow.

Now your color layer is only shown where the layer it is clipped to has content. Like so (the dotted lines in the nav):

The best part about this technique is how easily you can change the color of an element, just by double-clicking on your Color Fill layer and changing the color.

Image Masking

Another great thing about Clipping Masks is that you can use them for more than just text layers, you can use them on any layer really.

I'm going to add an image into that dotted square, but at this moment, I'm not exactly sure what image. So, I'll create another Solid Color Fill layer and name it something like "Image Placeholder".

Now I can drag any image onto a layer above my "Image Placeholder" layer and apply a clipping mask. You can even stack the "clipped" layers.

Hopefully these quick and easy techniques will assist you the next time you're mocking up that next $200-million dollar, Google-buyout website. Of course, I'd appreciate any tiny percentage of that buyout if it happens ;)

2006-10-10T03:37:00.000-07:00

Creating a cute puppy

Create a circle using elliptical shape tool.

Double click the layer to open layer style window. Apply settings as shown.

Create a circle using elliptical shape tool. Enable "Intersect shape areas" at the top bar.

Create an ellipse using elliptical shape tool. Press Ctrl+T. Right Click and select Warp. Adjust the nodes to get the shape as shown.

Create a circle using elliptical shape tool. Ctrl+Click to get the selection. Contract the selection by 1pixels. Create a new layer. Apply Black to white gradient. Change layer mode to screen for this layer.

Create a smaller circle. Repeat above steps.

Duplicate all the eye layers. Press Ctrl+T. Right click and select Flip Horizontal and place on the other side.

Create an ellipse for the nose using elliptical shape tool. reapply same technique as used for the eyeballs. Create another ellipse for the mouth using elliptical shape tool. Apply same layer style we used for the main face circle.

Create two smaller circles using elliptical shape tool.

Select and merge both small circle layers. Using eraser tool with a soft brush settings erase the top edge.

Create a rounded rectangle using rounded rectangle shape tool. Enable add to shape area from the top bar. Create four circles using elliptical shape tool to create a bone in his mouth.

Using pen tool create ears and apply same layer style as for the face etc.

Create an elliptical selection using elliptical marquee tool. Press Alt and create two elliptical selections to subtract from the previous selection. Create a new layer and fill it with white color. Reduce the opacity.

Create a rounded rectangle using rounded rectangle shape tool. Using pen tool create a thin neck band.

Create a circle using elliptical shape tool. Enable "subtract from shape area" at the top bar. Create a rectangle using rectangular shape tool.

Duplicate the foot layer a couple of times and place as shown below.

Using pen tool create tail and apply same layer style.

Using line tool add details as shown below.

Select and merge all the layers. Duplicate the layer. Press Ctrl+T. Right Click and select distort. Adjust the nodes to get the shape of perspective shadow. Enable lock transparent pixels from layer palette. Fill it with gray color.

2006-10-09T04:57:00.000-07:00

Few cool mobile wallpapers

2006-10-09T03:24:00.000-07:00

Few important web design resources

Written by Neil Patel

There are thousands of design resources on the web which can lead to an overwhelming experience when looking for inspiration or ideas, so I created a list of resources that I use on a regular basis. Here is a list of 50 design resources that can be helpful to any designer or marketer.

CSS Galleries

Sometimes it can be hard to come up with design inspiration. CSS galleries are a great place to get design inspiration and they can also be leveraged as a great source of traffic. If you can get your design on these galleries it can drive thousands of visitors to your website.

Unmatchedstyle
cssBeauty
cssvault
Stylegala
CSS Drive
css thesis
Styleboost
CSSElite
CSS Import
Web Creme
CSS Mania
DesignShack

Web Standards

Designing with web standards is a great way to keep your code clean and search engine friendly. Why design a site with a 1000 lines of code when it can be done in 100 lines of code.

Developing With Web Standards - This document explains how and why using web standards will let you build websites in a way that saves time and money for the developer and provides a better experience for the visitor. Also discussed are other methods, guidelines and best practices that will help produce high-quality websites that are accessible to as many as possible.
Roadmap to Standards
Web Standards Project - The Web Standards Project is a grassroots coalition fighting for standards which ensure simple, affordable access to web technologies for all.
Web Standards Checklist
Importance of Web Standards

Validators

Now that you know all about web standards, here are some tools that can help check if your site is compliant. These tools will also help you find errors in your code.

HTML & XHTML Validator
CSS Validator

Usability

Usability is probably the most important factor in a website design. Making your website usable can help improve the experience for your visitors as well as help improve your conversion rate.

What is usability
Usability First - An approach to web design which emphasizes usability.
Weblog Usability: The Top Ten Design Mistakes - Blogs are often too internally focused and ignore key usability issues, making it hard for new readers to understand the site and trust the author.
Web Design & Usability Guidelines - An 18 part online book that goes over usability and design guidelines.
Web usability - the basics
The Culture of Usability - How to spend less and get more from your usability-testing program.
90% of All Usability Testing is Useless
Ten deadly sins of web design - A list of ten huge mistakes no web designer or developer should be caught making.
Information architecture resources
Usability Views - Usability with a twist.

Blogs/Resources

Blogs are a great resource for up-to-date information on design and usability. Here is a list of blogs that you may want to subscribe to or read on a regular basis.

Stopdesign
Signal vs. Noise Blog - A design and usability blog by 37signals.
Digital Web Magazine - Digital Web Magazine is an online magazine intended for professional web designers, web developers and information architects. The magazine consists primarily of work contributed by web authors, as well as by others who occasionally delve into the web realm. We put emphasis on and provide recognition for contributed work. The Magazine is recognized by nearly all of the major web design agencies in the industry.
A List Apart - A List Apart explores the design, development, and meaning of web content, with a special focus on web standards and best practices.
456 Berea Street - This is a site by Roger Johansson who writes articles on web standards, accessibility, or usability in one way or another.
mezzoblue - A semi-daily expository and exploratory on all things web, design, and typographic. It is also a personal portfolio site with works in any creative discipline the owner feels fit to publicize.
Adaptive Path
Jesse James Garrett - The blog of the founder of Adaptive Path.
Jeffrey Veen
Your Total Site - YourTotalSite touchs on a wide range of subjects that include usability, accessibility, visual design, online marketing, (X)HTML & CSS, JavaScript, Information Architecture, and more.
IxDG Resource Library - A repository of information about interaction design.
Apples to Oranges - A blog by Ryan Nichols.
Demystifying Usability - A blog by Frank Spillers, a usability consultant.

Color Resources

Color is an important factor in design. Color can separate your site from your competition and it can also convey a specific message to your visitors. If you provide a personalized service you may want to choose colors that are soft and personal or if you want a corporate look and feel you may want to pick hard colors. Here are several resources that I use to help me make color decisions.

Color Schemer - Online color scheme generator.
Color Meaning - An article that explains the symbolism and meaning of different color types.
The Meaning of Color in Web Design - How colors influence audiences when marketing products through the Internet.
Symbolism of Color
Color Matters - Explore how color affects emotions, appetite, vision, sexuality, design, and art.

Typography

There are many different types of fonts and they can greatly affect how readable your site is, so choose wisely.

1001 Free Fonts - A large selection of true type fonts for Windows and Macintosh.
The Anatomy of Web Fonts
Typetester - Typetester is an online application for comparison of the fonts for the screen. Its' primary role is to make web designer's life easier.

Trackback | Read more posts on Design

2006-10-05T00:38:00.001-07:00

General tips for new web designers

Web site designers today have plenty of options in terms of tools and technologies they can use to build their web pages. Many questions come up: should we use Flash, do we need database driven web pages, do we need a shopping cart for our e-commerce web site etc ...

This article takes a step back and deals with some of the fundamental questions/issues in web site design.

1. Do not use framesets in your web sites: They are not required in most cases and framesets will kill you with search engines.

2. Do not use a 'heavy' background in your web pages that distracts the users from what you are trying to present to them and makes the text hard to read. Remember what you are trying to do with your website, and I think for most, it is not trying to impress people with some tacky background tile. Keep it easy to read; there is a reason why solid colored text on a solid colored backgrounds are used often on web pages and in print.

3. Use sharp clear pictures: This is really important, a good looking web page can be made with just one clear sharp image and at the same time, the best looking web page can be made to look bad with just one crappy image.

4. Get sharp clear copy of your logo: If you are a company, you want to look professional so that people have confidence in giving you their money, a crappy looking logo isn’t going to do it.

5. Avoid the IE page transitions: IE (Internet Explorer) can create many special effects, things like page transitions (page wipes, etc. …) are tempting and may be suitable sometimes, but for 99% of web sites they are not.

6. Avoid the flying text: Again, the decision whether or not to do this has much to do with the content of your web pages, but it should be clear that for most websites this would not be a good thing.

7. If you are trying to sell something, having live credit card processing will increase your sales substantially. Sometimes when people want to start selling online they avoid the perceived trouble of hooking up with a credit card processing service because of the programming required. This is a big mistake, studies have clearly shown that web pages that provide credit card processing in their e-commerce enabled web pages (web pages that sell stuff) have much greater conversions.

Above all, make the web site pages no more than 60-70k (I shoot for 50k) if you can, and keep things very simple so your clients have an easy time finding things. You can help this along by strategically making use of the browsers caching capabilities.

In a nutshell: your web-browser will reuse images that it has loaded. So (if for example) if you have an image on your 1st page that you also use on 2 other pages in your website, this image only gets downloaded once by the browser and subsequent times the browser will automatically load a copy of the image it has from its own cache. This can really speed up things from the surfer's point of view and also saves you bandwidth.

2006-10-05T00:38:00.000-07:00

Tips for the new web designer.

This first article is meant to provide some helpful tips for those just learning to build websites. I am not going to go into details explaining specific technology; rather I am going to point out a few things that many people just starting may find useful.

Learn (at least) some basic HTML.

Whenever I suggest this to beginners they always ask why they should learn to code HTML when we have programs like Dreamweaver and FrontPage that do it all for ua? The short answer is that they don’t, at least not all the time. While these programs are very useful (and I highly recommend that all web page designers learn to use one), they do have their limitations where it can be easier to hand code the HTML yourself. If you don’t know HTML, this can be a problem. You don’t have to learn everything there is about HTML, but you should learn the basics and some key tags that are used all the time:

: The link tag is the most important tag there is. HTML is all about linking documents (web pages) together and as such they form the basis of making the web work.

: The table tag is used to create tables. Originally it was invented to present data (like a stock report) in tabular form. Soon after, inventive HTML designers started to use them to format the entire web page by inserting not only text but also images into tables. Today 99% of web pages are formatted using tables.

: Div tags allow you to demark a portion of your page so that you can do things to it. Another way of saying ‘demark a portion’ can be ‘to put into a container’. Once a part of your web page is in this

container, you can do all kinds of stuff like style it, animate it, make it visible or invisible etc … Div’s represent the next generation of formatting HTML pages that is in many ways superior to tables.

Learn one *wysiwyg program like DreamWeaver or GoLive and learn it well.

Each of these programs has its advantages and you may be tempted to jump from one to another because of some neat thing that it does. Often you find when you are using the new program, that you miss features of the old one that you rely on. So you should stick to one and really learn it well. This will go a long way to making you a productive web designer.

Keep your web pages simple.

Once you start to understand how to make web pages, you will be tempted to go all out with animated gifs, rollover affects, and fancy designs. The problem with this is that it can easily lead to confusing pages for the viewer and hard to maintain sites for you. Web sites are always in need of changing and updating. You will be thankful when that inevitable day comes and you have an easy to update modular site to work with instead of an inflexible over-designed mess.

2006-10-05T00:35:00.000-07:00

THE EIGHT STEPS OF WEB DESIGN

One common question I get, is how a website job should be planned and executed – what are the steps? The following is a quick outline of the process that I have been using for years with good success – at least most of the time.

THE 8 STEPS OF WEB DESIGN

The steps:

Figure out what the focus of the website will be.
What specific features do you want in the website.
Create a list of sections for your website and give them a hierarchy of importance.
Write out your content and finalize it.
Find a style / look that meets your website’s and your industry’s requirements.
Build the website.
Evaluate the website and make the required changes / updates.
Go live – register a domain, find a host, upload the website.

1. THE FOCUS OF THE WEBSITE

This is the first thing you want to define clearly before any other step is taken. You need to decide what the main purpose of the website is - what you want to focus on in terms of a subject.

It is important that you define this step as clearly as possible because a website’s focus has a major impact on the whole project; this is the ‘foundation’ of the site.

For example:

A web store.
Information hub for established clients.
Branding website.

2. SPECIFIC WEBSITE FEATURES

This builds off of the first step, where now you look at actual features that you need to implement. For example:

A shopping cart for an online store
A password protected section of the website

Again, the more detail the better.

3. MAP OUT THE MAJOR SECTIONS OF THE WEBSITE

With the first two steps completed, you’re ready to actually start mapping out the major sections of the website; drawing out quick diagrams of the website is a useful way of doing this.

A diagram can easily show the hierarchy of a website and how the various sections are related to each other.

4. WRITE OUT YOUR FINAL CONTENT

This part is usually left to the end … then people wonder why they have to go back and rethink the structure of the site.

All websites are driven by content; it’s the content that makes a site effective and successful. As such, this part of the process is arguably the most important, so you need to pay attention to it.

5. FIND A STYLE / LOOK FOR THE WEBSITE

At this stage of the process, you are ready to start looking at the visual aspect of the site – the design. You have a few options:

Hire a graphic designer / web designer
Come up with your own design – I’m assuming you have some artistic and design experience.
Buy yourself a website template and save time and money.

6. BUILD THE WEBSITE

Yes, I know it seems impossible but you can finally start building the actual site at this point!

With the above questions answered and steps completed, you’ll find the process of building the website (actually writing out the code,) is much easier and you will have reduced the chance of having to go back and redo things.

7. EVALUATE THE WEBSITE, MAKE THE REQUIRED CHANGES / UPDATES

Once you've built the website, you should walk away from it for a day or two. This will allow you to come back and evaluate it with fresh eyes. It might also be a good idea to get someone who has not worked on the site, to take a look as well.

Here are some of the things you should be looking for:

Clean easy to update design/structure.
Good usability in the design - and all that implies.
Fast loading 'light' pages.
Intelligent use of technology - using Flash when it makes sense not because you want a 'cool' intro!
The website’s ability to convey the meaning/message of the website quickly if not instantly.

8. GO LIVE – REGISTER A DOMAIN, FIND A HOST, UPLOAD THE WEBSITE.

If you’ve passed steps 1 to 7, you know you're ready to show the world the website. All that is left to do is go live:

Register a domain
Find a hosting company
Upload the website

NOTE: You could actually register the domain and find a hosting company after you’ve completed the first 4 steps. Sometimes it makes sense to register your domain name before you design the website; this is because you may want to integrate the domain name into the design.

CONCLUSION

If you follow these steps, and not let pressures from your clients (or anything else) sway you, you’ll find yourself working more quickly and under less stress, while delivering a better website for your client – everyone wins.

2006-10-02T04:30:00.000-07:00

Monkey Vampire Tutorial

1.
Get New File with 500x500 diemnsion.
Use Guide Lines(View>New Guide) to get nice
and smart proportion.Then use Tool>Ellipse and draw
a black circle, press Alt+Shift and draw from centre point.
Lets assume this layer as Base.

Go to Layer Properties and Choose Blending Option. Set this layer setting like that.

For Stroke Color, I used #919191

Here you will get like this aftre setting.

2.
Here, we have to make 2 reflected layers for this circle.
Choose 1st New Layer (Clt+Shift+N)
Make selection by clicking Clt+click on Base Layer, in
Layer Properties box.Then, Tool>Elliptical Marquee and
change this to Intersect with Selection, Select half upper part
of Circle, on 1st layer.

Choose Tool> Gradient Tool and draw from up to down

Here is the result

Create 2nd Layer for 2nd reflection.
Clt+click on Base layer and draw with Gradient tool from
bottom to up. Here we finished reflected layers.

3.
Create New Layer again, for two Eyes. Draw two eyes and drop
shadow abit in Blending Option.

4.
Choose New Layer for Mouth.
Tool> Pen and drawing something like that. Foreground
color : #ec0000

Then set the Layer Style as following

Color #afafaf for Outer Grow

You will get something like this

5.
Create New Layer again for Tooth. Draw with Pen tool
and set Bevel and Emboss a bit.

6.
Draw two eyebrows with pen tool on new layers, and
set Bevel and Emboss a bit.

7.
Draw ears on new Layers. Ear Layers must be under the all
layers, except bg layer. Set the layer style as follow.
ၿ

Here is the last cute monkey vampire!

8.
If you wanna animate it, just export this .psd file to Image Ready
Then, Set 1st frame delay time to 1.

Duplicate the first frame and move its eyebrows. Make sure
Eyes Layers must be unckeck in layer Style.

Here we get the final animated Lovely monkey vampire.

2006-09-25T02:59:00.000-07:00

Almost synonymous with Pop Art, Andy Warhol was a painter, photographer, filmmaker, and publisher. In the mid-20th century he produced iconic silkscreen paintings of subjects as mundane as soup cans and as glamorous as Elvis Presley and Marilyn Monroe. These remain hugely popular, and have sparked countless imitations. Creating your own Pop Art-inspired images with Photoshop is easy, and great fun, too.

The silkscreen technique forces paint onto canvas through a high-contrast negative stencil attached to the fabric. The resulting image features strong blacks from the photograph, which can be simulated using Photoshop’s Threshold adjustment. In Warhol’s hands, crude blocks of garish, striking color were added to selected areas, and images were often duplicated with alternative color schemes.

Any portrait can be used for a silkscreen-style image, but those with strong edges work well. Look, too, for an image in which the subject is staring directly at the lens, preferably with a slightly distant expression.

STEP 1
Open your portrait image, hold down the Alt/Opt key, drag the original image layer to the “Create a new layer” icon, call the new layer “Cut Away,” and click OK. Use selection tools such as the Magic Wand and Color Range to roughly select and delete the background pixels from the new layer.

Silkscreen images are very high-contrast, and later steps will remove much fine detail, so you don’t need to be very precise. It can make it easier to work if you add a new, color-filled layer directly below the working layer—making it a garish color can help you see the final result.

STEP 2
To make the high-contrast image, ensure the Cut Away layer is active and select Image > Adjustment > Threshold. Move the slider so that the image contains only enough shadow to show the picture’s essential shapes.

STEP 3
Roughly select each image area that you want to paint with a single color, and use Alt/Opt + Ctrl/Cmd + J to copy the selection into its own layer. Name each new layer, set the blending mode to Multiply, and click OK.

STEP 4
Activate each item’s layer in the Layers palette in turn. For each one, Ctrl/Cmd + click the thumbnail so that only its non-transparent pixels are selected, and choose Edit > Fill. Even if the Fill dialog’s Use drop-down shows Color, select it again. This triggers the Color Picker. Select a strong color and click OK twice.

STEP 5
In the Layer Style dialog box, change the Color Overlay’s blending mode to Color. Pick a strong color and click OK.

STEP 6
Once you have repeated steps 4 and 5 for each colored item, you have a completed silkscreen-style image. Save the file and make copies in which you use permutations of the same colors. Each colored area is in its own layer, so it is easy to select and recolor it with a Hue/Saturation adjustment layer. Finally, combine all the versions in one large image.

Combining multiple versions of the same image lends the final version a distinctive 1960s Pop Art feel.

2006-09-15T04:59:00.000-07:00

Why interaction design?

As products and experiences become more complicated or gain new capabilities, often due to technology, designers face new challenges in helping people (customers, users, audiences, participants) effectively use or experience these solutions. Often, new technologies are created in such a ways as to be more complicated and less clear. Simplifying these offerings, requiring the deletion of capabilities, is not usually effective. Instead, interaction design aims to clarify use and behavior with a minimum of training and optimizing long-term ease of use. This can lead to less frustration, higher productivity, and higher satisfaction for users.

Interaction design improves the usability and experience of the object or system, by first researching and understanding user's goals, expectations, behaviors, and needs and then deliberately designs to meet and exceed these needs and desires for designated user groups.

Relationship with User Interface Design

Interaction Design is often associated with the design of system interfaces in a variety of media (see also: User Interface Design, Interface Design, Experience Design) but concentrates on the aspects of the interface that define and present its behavior over time, with a focus on developing the system to respond to the user's experience and not the other way around. The system interface can be thought of as the artifact (whether visual or other sensory) that represents an offering's designed interactions. Interactive voice response (Telephone User Interface) is an example of interaction design without graphical user interface as a media.

Interactivity, however, is not limited to technological systems. People have been interacting with each other as long as humans have been a species. Therefore, interaction design can be applied to the development of all solutions (or offerings), such as services and events. Those who design these offerings have, typically, performed interaction design inherently without naming it as such.

History

Interaction design was first proposed by Bill Moggridge in the late 1980s. It was called "SoftFace" and later renamed "Interaction Design".

Recently, it was acknowledged that interaction design exists in all media, such as events, live shows, and games.

The rise of Internet has uncovered the social dimension of interaction, where interpersonal and social factors are also included in the design of interactions. A school of thought among interaction designers (sometimes called "Social Interaction Design") is that all interaction design is really about creating social connections between people, regardless of the technology used to create that connection.

General Steps in ID

User studies and research (often including ethnographic techniques)
Creation of Personas/Profiles and Scenarios (use narratives)
Wireframing and Flow Diagrams
Prototyping and User Testing
Implementation
System Testing

A key benefit in IxD is the iteration process where the aim is to build quick prototypes and test them with the users to make sure you are in the right path. The sooner you know you are right the better. Fixing mistakes at a later stage are very costly. The book "Interaction Design: beyond Human-Computer Interaction" is an easy start in this area. For design (or user) research techniques, "Design Research: Methods and Perspectives", edited by Brenda Laurel, is a great resource.

Social Interaction Design

Social interaction design (SxD) is emerging due to many of our computing devices have become networked and have begun to integrate communication capabilities. Phones, digital assistants and the myriad of connected devices from computers to games facilitate talk and social interaction. Social interaction design account for interactions among users as well as between users and their devices. The dynamics of interpersonal communication, speech and writing, the pragmatics of talk and interaction--these now become critical factors in the use of social technologies. And they are factors described less by an approach steeped in the rational choice approach taken by cognitive science than than by sociology, psychology, and anthropology.

Virtual world is an example of system which is heavily rely on social interaction design. Social interaction in the community, gathering and teamwork are also some examples of activities can be designed by social interaction design.

Human-robot interaction design

Human-robot interaction design have a long history of using teleoperation to control. However, teleoperated control of robots have some limitations, including: ^[1]

Number of robots a human is able to control simultaneously is limited;
Human always focus on a single robot at a time.

Some of the human-robot interaction design increase the autonomy of robots, however it may have some problems such as: ^[2]

Loop syndrome;
Over-reliance on automation.

Human-robot interaction design can be quite different from other interaction design on computers, because mobile robots are more independent, looks like real-thing, and interact with real environment.

Social robotics conduct social interaction with human, the interaction design of social robotics are closely related with social interaction design.

From User-centric to practice-oriented design

Product design can be split into two primary axes of interest: functions and users. What does it do, and how is it used? Architects, engineers, mechanical, industrial, and product designers tend to tackle the former. User interface design, user experience design, and interaction designers, along with information architects and usability experts handle the latter. Social interaction designers must still be aware of traditional design concerns, as users must still interact with a technology in order to get through to users at the other end. But the focus shifts to secondary effects of communication technology use.

Technologies can handle both structured and unstructured interactions. Social interaction designers look at how to capture or preserve familiar interaction structures with technologies by embedding sequences and timing, routines and order, roles and positions, and more into their applications. With unstructured interactions, they look for emerging practices among users. IM'ing conventions and online community ethics have emerged because all social interaction requires conventions. These conventions inform users about what's going on, which in turn helps them choose how to proceed; it's this phenomenon that the social interaction designer wants to anticipate while s/he builds out a social networking system.

We go from user-centric to practice-oriented concerns:

User-centric concerns

use value and utility
needs
goals
success and failure

Practice-oriented concerns

sign and symbolic value
self-presentation and performance
social behaviors
etiquette and norms
couples, groups and communities
structured interactions
routines, sequencing, temporal organization

People communicate with one another very differently than they interact with technologies. Meaning does not exist as something fixed and stable, but is achieved through the mutual (and unfolding!) efforts of those who produce it. The content of a communication may use language, which has its rules, but what's exchanged among people in an interaction may have little to do with what's actually said!

It's this "meta" level of communication, the features of face and performance, turn-taking and attention-giving, timing, transactions, exchanges, and all that we do while we're talking, and with our talk, that the social interaction designer must attend to. Talk technologies and talk systems distort interactions and transform social situations by amplifying some attributes of an exchange while bracketing others. For example, web-based applications (social software, blogging, IM and chat, etc) store communication and often provide means to search and browse it. This artificially preserves "conversations," holding out their conclusions and enabling participation any time and from any place.

Consider corporate intranets, groupware, project management and communication tools, which are designed to facilitate and promote employee communication: by coordinating team efforts, embedding collaboration into communication tools, and by capturing knowledge, they too produce a suspended communication "space" that's out of synch with time (tools often being asynchronous). And more and more kinds of interactions are finding their way into mediated formats, from video chats (think porn) to online gaming. We don't yet know what it means to a culture and to a society for members to be able to conduct so much of their activities with others without face-to-face interactions. But we do know that well-designed communication technologies must account for a whole new set of factors.

2006-09-15T04:55:00.000-07:00

Tim Berners-Lee, the inventor of the World Wide Web published a website in August 1991, making him also the first web designer.[1] His first was to use hypertext with an existing email link.

Early on, websites were written in basic HTML, a markup language giving websites basic structure (headings and paragraphs), and the ability to link using hypertext. This was new and different to existing forms of communication - users could easily open other pages using browsers.

As the Web and web design progressed, the markup language used to make it, known as Hypertext Mark-up Language or HTML, became more complex and flexible. Things like tables, which could be used to display tabular information, were soon subverted for use as invisible layout devices. With the advent of Cascading Style Sheets (CSS), table based layout is increasingly regarded as outdated. Database integration technologies such as server-side scripting (see CGI, PHP, ASP.NET, ASP, JSP, and ColdFusion) and design standards like CSS further changed and enhanced the way the Web is made.

The introduction of Macromedia Flash into an already interactivity-ready scene has further changed the face of the Web, giving new power to designers and media creators, and offering new interactivity features to users. Flash is much more restrictive than the open HTML format, though, requiring a proprietary plugin to be seen, and it does not integrate with most web browser UI features like the "Back" button.

Website design

A website is a collection of information about a particular topic or subject. Designing a website is defined as the arrangement and creation of web pages that in turn make up a website. A web page consists of information for which the website is developed. On a different perspective, a webpage can be compared to a page in a book and a website is to a book. So, these are the main aspects involved in web design.

Moving to the each in detail, the web page consists of text and images. It can also be said as that a web page is similar to a file which has all the data. To support the data or information the images are added to the web page. To be more technical the first page of a website is known as Home Page. Each and every page in a website is a HTML file which has its own web address. Web design involves some aspects or points to be remembered which will take the website to the people.

First step is to optimize the site. To brief this, increase the visibility of the site to the browsers. The site should, if possible, be listed within the first page of the search engine’s search results, which will increase the number of visitors to the site. Content should be organized, informative and easy to understand for the people to visit the site again and again.

Last but not least, the website should display clearly and neatly the purpose for which it has been created. For a professional or business website the visitor or a client should not be distracted or disturbed by any aspect in the web design and should be able to navigate easily within the site. For educational websites the appearance and organization must provide a pleasant environment for learning new things.

A relatively new technique called Remote Scripting has allowed more dynamic use of the web without the use of Flash or other specialized plug-ins. Leading the various techniques is Ajax, although other methods are still common, as Ajax is not a fully developed standard.

Issues

As in all professions, there are arguments on different ways of doing things. These are a few of the ongoing ones.

Liquid versus fixed layouts

Programmers were the original web page designers in the early 1990s. Currently most web designers come from a graphic artist background in print, where the artist has absolute control over the size and dimensions of all aspects of the design. On the web however, the Web designer has no control over several factors, including the size of the browser window and the size and characteristics of available fonts.

Many designers compensate for this by wrapping their entire webpage in a fixed width box, essentially limiting it to an exact pixel-perfect value, which is a fixed layout. Some create the illusion of liquidity by building the graphics for their webpage at a size larger than any current standard monitor size. Other designers say that this is bad because it ignores the preferences of the user, who might have their browser sized a specific way that they like best. These people propose a liquid layout, where the size of the Web page adjusts itself based on the size of the browser window.

There is a usability reason (rather than wanting control) for why a designer may choose a more fixed layout. Studies have shown that there is usually an optimal line width in terms of readability. One rule to appear from such studies is that lines should be between 40-60 characters long, or approximately 11 words per line. But users may choose their windows size and font selection to optimize other factors more important to them.

In some cases, it is difficult to create fixed layouts which work well given the amount of content needed, and the fact that one has to try to cater for the needs of all prospective users.

Flash

Adobe Flash (formerly Macromedia Flash) is a proprietary, robust graphics animation/application development program used to create and deliver dynamic content, media (such as sound and video), and interactive applications over the web via the browser. It is not a standard produced by a vendor-neutral standards organization like most of the core protocols and formats on the Internet.

Many graphic artists use Flash because it gives them exact control over every part of the design, and anything can be animated and generally "jazzed up". Some application designers enjoy flash because it lets them create applications that don't have to be refreshed or go to a new web page every time an action occurs. There are many sites which forego HTML entirely for Flash.

Flash detractors claim that Flash websites tend to be poorly designed, and often use confusing and non-standard user-interfaces. Up until recently, search engines have been unable to index Flash objects, which has prevented sites from having their contents easily found. It is possible to specify alternate content to be displayed for browsers that do not support Flash. Using alternate content also helps search engines to understand the page, and can result in much better visibility for the page.

The most recent incarnation of Flash's scripting language (called "actionscript", which is an ECMA language similar to JavaScript) incorporates long-awaited usability features, such as respecting the browser's font size and allowing blind users to use screen readers. Actionscript 2.0 is an Object-Oriented language, allowing the use of CSS, XML, and the design of class-based web applications.

CSS versus tables

Back when Netscape Navigator 4 dominated the browser market, the popular (but now deprecated) solution available for designers to lay out a Web page was by using tables. Often even simple designs for a page would require dozens of tables nested in each other. Many web templates in Dreamweaver and other WYSIWYG editors still use this technique today. Navigator 4 didn't support CSS to a useful degree, so it simply wasn't used.

After the browser wars were over, and Internet Explorer dominated the market, designers started turning towards CSS as an alternate, better means of laying out their pages. CSS proponents say that tables should only be used for tabular data, not for layout. Using CSS instead of tables also returns HTML to a semantic markup, which helps bots and search engines understand what's going on in a web page. Today, all modern Web browsers now support CSS with different degrees of limitations.

However, one of the main points against CSS is that by relying on it exclusively, control is essentially relinquished as each browser has its own quirks which result in a slightly different page display. This is especially a problem as not every browser supports the same subset of CSS rules. For designers who are used to table-based layouts, developing Web sites in CSS often becomes a matter of replicating what can be done with tables, leading some to find CSS design rather cumbersome. For example, it is rather difficult to produce certain design elements, such as vertical positioning, and full-length footers in a design using absolute positions.

These days most modern browsers have solved most of these quirks in CSS rendering and this has made many different CSS layouts possible. However, people continue to use old browsers, and designers need to keep this in mind. Most notable among these old browsers are Internet Explorer 5 and 5.5 which, according to some web designers, are becoming the new Netscape Navigator 4 — a block that holds the internet back from converting to CSS design.

How it Looks vs. How it Works

Since so many web developers have a graphic arts background, they often pay more attention to how a page looks, without considering how visitors are going to find the page. On the other side of the issue, search engine optimization consultants (SEOs) obsess about how well a web site works: how much traffic it generates, and how many sales it makes. As a result, the designers and SEOs often end up in disputes where the designer wants more 'pretty' graphics, and the SEO wants lots of 'ugly' keyword-rich text, bullet lists, and text links. Another problem when using lots of graphics on a page is that download times can be greatly lengthened, often irritating the user.

Accessible Web design

Accessible Web design is the art of creating webpages that are accessible to everyone, using any device. It is especially important so that people with disabilities - whether due to accident, disease or old age - can access the information in Web pages and be able to navigate through the website.

To be accessible web pages and site must conform to certain accessibility principles. These can be grouped into the following main areas:

* use semantic markup that provides a meaningful structure to the document (i.e. Web page)
* use a valid markup language that conforms to a published DTD or Schema
* provide text equivalents for any non-text components (e.g. images, multimedia)
* use hyperlinks that makes sense when read out of context. (e.g. avoid "Click Here.")
* don't use frames
* use CSS rather than HTML Tables for layout
* author the page so that when the source code is read line-by-line by user agents (such as a screen readers) it remains intelligible. (Using tables for design will often result in information that is not.)

Dynamic web design

The traditional method of laying out web pages, HTML is static. There are two ways of delivering content dynamically:

Server-side

A web server, running special software, constructs an HTML page 'on the fly', according to the user's request and possibly other variables, such as time or stock levels.

Suitable scripting languages include:

XSLT can be used translate data in XML format into HTML.

MySQL and PostgreSQL are popular free SQL databases, suitable for use with the above. They can be used to allow users, subject to password access if required, to update content.

Client-side

Client-side scripting works at the user's browser, and therefore should not be used for "mission critical' work, where the user's capabilities are not known – it is more suited to adding decoration and other ephemeral content. It is most often achieved through JavaScript.

Client side DHTML can pose major problems for Web accessibility and search engine optimization. Most software designed for assisting people with disabilities, and most search engine robots do not support client side DHTML.

If a web site's menus are built with JavaScript, it is usually impossible for search engines to find the pages listed in the menus, unless an alternative navigation scheme is provided elsewhere on the page. (NOTE: By using nested lists for navigation menus, and slightly more complex, DOM-based scripts, this problem may be overcome.)

Website Planning

Before creating and uploading a website, it is important to take the time to plan exactly what is needed in the website. Thoroughly considering the audience or target market, as well as defining the purpose and deciding the content will be developed are extremely important.

Purpose

It is essential to define the purpose of the website as one of the first steps in the planning process. A purpose statement should show focus based on what the website will accomplish and what the users will get from it. A clearly defined purpose will help the rest of the planning process as the audience is identified and the content of the site is developed. Setting short and long term goals for the website will help make clear the purpose and plan for the future when expansion, modification, and improvement will take place. Also, goal-setting practices and measurable objectives should be identified to track the progress of the site and determine success.

Audience

Defining the audience is a key step in the website planning process. The audience is the group of people who are expected to visit your website – the market being targeted. These people will be viewing the website for a specific reason and it is important to know exactly what they are looking for when they visit the site. A clearly defined purpose or goal of the site as well as an understanding of what visitors want to do/feel when they come to your site will help to identify the target audience. Upon considering who is most likely to need/use the content, a list of characteristics common to the users such as:

Audience Characteristics
Information Preferences
Computer Specifications
Web Experience

Taking into account the characteristics of the audience will allow an effective website to be created that will deliver the desired content to the target audience.

Content

Content evaluation and organization requires that the purpose of the website be clearly defined. Collecting a list of the necessary content then organizing it according to the audience's needs is a key step in website planning. In the process of gathering the content being offered, any items that do not support the defined purpose or accomplish target audience objectives should be removed. It is a good idea to test the content and purpose on a focus group and compare the offerings to the audience needs. The next step in the process is categorizing the content and organizing it according to user needs. Each category should be named with a concise and descriptive title that will become a link on the website. Planning for the site's content ensures that the wants/needs of the target audience and the purpose of the site will be satisfied.

Storyboarding

Storyboarding is the process of taking into account the purpose, audience and content to design the site structure that is most suitable for the website. In this process the organized and categorized content is used to develop a diagram or map. This creates a visual of how the web pages will be laid out and interconnected which helps decide how the content is portrayed. There are three main ways of diagramming the website organization:

Linear Website Diagrams will allow the users to move in a predetermined sequence;
Hierarchical structures (of Tree Design Website Diagrams) provide more than one path for users to take to their destination;
Branch Design Website Diagrams allow for many interconnections between web pages.

In the process of storyboarding a record is made of the description, purpose and title of each page in the site and they are linked together according to the most effective and logical diagram type. Depending on the number of pages the website will include, methods include using pieces of paper and drawing lines to connect them or alternatively, creating the storyboard using computer software. Storyboarding can be considered like a creating a prototype for the website – a model which allows the website layout to be reviewed, resulting in suggested changes, improvements and/or enhancements. This review process increases the likelihood of success of the website. Some people refer to this as a "tree" because it branches from the main page.

2006-09-15T04:20:00.000-07:00

History

On White 2, 1924, by Kandinsky

Non-objective art is not an invention of the twentieth century. In the Jewish and Islamic religion the depiction of human beings was not allowed. Consequently the Islamic and Jewish cultures developed a high standard of decorative arts. Calligraphy is also a form of non-figurative art. Abstract designs have also existed in western culture in many contexts. However, Abstract art is distinct from pattern-making in design, since it draws on the distinction between decorative art and fine art, in which a painting is an object of thoughtful contemplation in its own right.

Thought-form of the

Even before the widespread use of photography some artists, such as James McNeill Whistler were placing greater emphasis on visual sensation than the depiction of objects. Whistler argued that art should concern itself with the harmonious arrangement of colors, just as music deals with the harmonious arrangement of sounds. Whistler's painting Nocturne in Black and Gold: The Falling Rocket (1874) is often seen as a major move towards abstraction. Later artists such as Wassily Kandinsky argued that modern science dealt with dynamic forces, revealing that matter was ultimately spiritual in character: art should display the spiritual forces behind the visual world. Many of these artists were influenced by esotericist movements such as theosophy, in which abstract "thought forms" were used to illustrate the psychic forces supposedly generated by emotions, music and other events. The work of Wassily Kandinsky and Kasimir Malevich as well as Natalia Goncharova and Mikhail Larionov (see Rayonism), are generally seen as the first fully abstract paintings in 1911[1]. Movements in modern art are to be considered in terms of the concepts which they exemplify, accompanied as they were by manifestos and declarations.

Constructivism (1915) and De Stijl (1917) were parallel movements which took abstraction into the three dimensions of sculpture and architecture. The Constructivists believed that the artist's work was a revolutionary activity, to express the aspirations of the people, using machine production and graphic and photographic means of communication. Some of the American Abstract expressionists are purely abstract and include: Barnett Newman, Mark Rothko, Willem de Kooning, Jackson Pollock, Franz Kline, and Hans Hofmann although they were at times inspired by myth, figuration, architecture, and nature. Op Art (1962) and Minimalism (1965)[citation needed] were two recent idioms. It is, at present possible that an artist's work is seen as an individual entity rather than part of a movement. The late Yves Klein and the late John McLaughlin, and the more current Callum Innes, Sean Scully, and Yuko Shiraishi are but a few of the many abstract painters whose works can be seen today.

Gallery

Bird in space by Constantin Brancusi

Composition with red, yellow blue and black. by Piet Mondrian

Linear construction by Naum Gabo

Composition no. 16 by Jackson Pollock

Designer's Corner - Photoshop, 2d and 3d Tutorial

Headline is blue

WordPress and SEO

Permalinks

Page titles

Headers

Alt tags

Tags

Related posts

Landing sites

Google sitemaps

Valid markup

Avoid this

Get backlinks

Update your blog

Stick with it

Write quality content

Involve the reader

More SEO sources

Lightbox 2.0 Web Photo Gallery(part2)

Lightbox Web Photo Gallery(part1)

Getting Started

General Options

Banner Options

Large Image Options

Thumbnail Options

Custom Color Options

The Coding

Modifying the Lightbox JS File

Creating the Gallery

Website Design Mockup Tips

Borders and Underlines

Text and Fonts

Managing Colors

Image Masking

Few important web design resources

CSS Galleries

Web Standards

Validators

Usability

Blogs/Resources

Color Resources

Typography

General tips for new web designers

Tips for the new web designer.

Learn (at least) some basic HTML.

Learn one *wysiwyg program like DreamWeaver or GoLive and learn it well.

Keep your web pages simple.

THE EIGHT STEPS OF WEB DESIGN

THE 8 STEPS OF WEB DESIGN

1. THE FOCUS OF THE WEBSITE

2. SPECIFIC WEBSITE FEATURES

3. MAP OUT THE MAJOR SECTIONS OF THE WEBSITE

4. WRITE OUT YOUR FINAL CONTENT

5. FIND A STYLE / LOOK FOR THE WEBSITE

6. BUILD THE WEBSITE

7. EVALUATE THE WEBSITE, MAKE THE REQUIRED CHANGES / UPDATES

8. GO LIVE – REGISTER A DOMAIN, FIND A HOST, UPLOAD THE WEBSITE.

Why interaction design?

Relationship with User Interface Design

History

General Steps in ID

Social Interaction Design

Human-robot interaction design

From User-centric to practice-oriented design

Website design

Issues

Liquid versus fixed layouts

Flash

CSS versus tables

How it Looks vs. How it Works

Accessible Web design

Dynamic web design

Server-side

Client-side

Website Planning

Purpose

Audience

Content

Storyboarding