Wednesday, February 29, 2012

Web designing

Web Designing

A website is collection of documents written in the HTML language. When a user looks at a website with a browser (e.g. Netscape), the browser is able to follow the instructions presented to it in HTML to make a website look a certain way.

An Average Website

An Average Website

This is an average website. 
The above HTML code for "the average website" is static. That is, if the user were to reload a static website, they would see the same content every time. Its content was written directly by an author, and when the user goes to the site, that code is downloaded into a browser and interpreted.
Static websites are the cheapest to develop and host, and many smaller companies still use these to get a web presence.
Advantages of static websites
•          Quick to develop
•          Cheap to develop
•          Cheap to host
Disadvantages of static websites
•          Requires web development expertise to update site
•          Site not as useful for the user
•          Content can get stagnant

Dynamic sites on the other hand can be more expensive to develop initially, but the advantages are numerous. At a basic level, a dynamic website can give the website owner the ability to simply update and add new content to the site. For example, news and events could be posted to the site through a simple browser interface. Dynamic features of a site are only limited by imagination. Some examples of dynamic website features could be: content management system, e-commerce system, bulletin / discussion boards, intranet or extranet facilities, ability for clients or users to upload documents, ability for administrators or users to create content or add information to a site (dynamic publishing).

Advantages of dynamic websites
•          Much more functional website
•          Much easier to update
•          New content brings people back to the site and helps in the search engines
•          Can work as a system to allow staff or users to collaborate
Disadvantages of dynamic websites
•          Slower / more expensive to develop
•          Hosting costs a little more
In contrast to a static website, a dynamic website is one whose content is regenerated every time a user visits or reloads the site. When you click open a new browser window to a dynamic page which tells the time at the particular second that it was accessed. If you click on the "Reload" button several times, you should notice that the time will change.
There are a variety of languages available to make a dynamic website but the most popular language is PHP: Hypertext Preprocessor. An advantage of PHP (besides that it is available at no cost AND that it is Free Software so you have the Freedom to run, copy, distribute, study, change and improve it) is that it offers cross-platform compatibility. In other words, it will not matter what platform (Microsoft Windows, Macintosh, or a version of Unix) your users are running, since there is no need for any additional software in order to see PHP's dynamic content. This is because the dynamic content is processed on the server side, and then sent as if it were static.

When you create a static web page, you simply write HTML code. Writing a dynamic page with PHP is similar, except you embed the PHP code inside of the HTML code. For this reason PHP is called an HTML-embedded scripting language.

Static Vs Dynamic websites - what's the difference?
Dynamic (in the website sense of the word) means that the data or content can change 'dynamically'
Dynamic websites are database driven which means the content is stored separate from the layout or template. When the user requests a web page, the layout and content are merged together and displayed, which is not the case with a static website. Your layout/template and your content become one using a static website and are not flexible.
Dynamic content like your text and images are fed from a database or Content Management System (CMS) so when the data is updated, the content on the website is also updated. This method opens up a lot of options for the flexibility and functionality of your website.

Interactive Components - Interactive components allows the client or customer visiting your website to interact with things like discussion forums, polls, comments, user registration processes and newsletter subscriptions. Interactive components also give you the ability to have complex e-commerce based websites such as online storefronts, ticket and accommodation booking systems for hotels, etc. The list can go on and on. These interactive compnonents mentioned here are only a few of the many things you can do with a dynamic website .

Image, banner and text management functionalities –  enables clients to upload images, banners and text to the website without having to wait for their webmaster to update it for them. With Stevenson Illustration websites clients don’t have to purchase any special software or spend weeks or even months learning how to use it, as would be the case with a static website if you, the client, wanted to manage the content yourself. With Stevenson Illustration’s dynamic websites, clients can update their own content virtually from anywhere in the world where they can get online and login with minimal training.

Powerful query functionalities:  Translated, means you can have a powerful ‘search’ tool, for instance, with more options to choose from than the typical ‘one’ item in your search box. For example, if you were a car dealer you could have multiple criteria to choose from to get one result. Year, Make, Model would give you all the results for vehicles that matched those three criteria. With a static website this is near to impossible to create. You can have a ‘search’ but there are normally no multiple options in the search form, only one.

Restrictive role based access: It means you can allow users to have different levels of access to the website and have password protected pages. For instance, say you want your secretary to be the one to keep the website current. You want her to have to ability to upload images, change text, upload new text, etc. She would have a user access level that would allow that. Visitors to your site who wanted to login, however, would only be allowed to participate in a user discussion forum like comment on an article or view webpages designed for registered users only. They would not be allowed to make any changes to the website.  All your visitor comments, etc. can be held for approval from you before they go live on the website. 
Web design is the process of planning and creating a website. Text, images, digital media and interactive elements are used by web designers to produce the page seen on the web browser. Web designers utilize markup language, most notably HTML for structure and CSS for presentation as well as JavaScript to add interactivity to develop pages that can be read by web browsers.
As a whole, the process of web design can include conceptualization, planning, producing, post-production, research, and advertising.

CSS stands for Cascading Style Sheet. It was first developed in 1997, as a way for Web developers to define the look and feel of their Web pages. It was intended to allow developers to separate content from design so that HTML could perform more of the function that it was originally based on - the markup of content, without worry about the design and layout.

Style sheet refers to the document itself. Style sheets have been used for document design for years. They are the technical specifications for a layout, whether print or online. Print designers use style sheets to insure that their designs are printed exactly to specifications. A style sheet for a Web page serves the same purpose, but with the added functionality of also telling the viewing engine (the Web browser) how to render the document being viewed.

Cascade is the special part. A Web style sheet is intended to cascade through a series of style sheets, like a river over a waterfall. The water in the river hits all the rocks in the waterfall, but only the ones at the bottom affect exactly where the water will flow. The same is true of the cascade in Web style sheets.

Every Web page is affected by at least one style sheet, even if the Web designer doesn't apply any styles. This style sheet is the user agent style sheet - the default styles that the Web browser will use to display a page if no other instructions are provided. But if the designer provides other instructions, the browser needs to know which instructions have precedence.

Where is CSS Used?

CSS is used to style Web pages. But there is more to it than that. CSS is used to style XHTML and XML markup. This means that anywhere you have XML markup (including XHTML) you can use CSS to define how it will look.

CSS is also used to define how Web pages should look when viewed in other media than a Web browser. For example, you can create a print style sheet that will define how the Web page should print out and another style sheet to display the Web page on a projector for a slide show.

Why is CSS Important?
CSS is one of the most powerful tools a Web designer can learn because with it you can affect the entire mood and tone of a Web site. Well written style sheets can be updated quickly and allow sites to change what is prioritized or valued without any changes to the underlying XHTML.

But because CSS can cascade, and combine and browsers interpret the directives differently, CSS is more difficult than plain HTML. But once you start using it, you'll see that harnessing the power of CSS will give you more options and allow you to do more and more things with your Web sites.

 Best practices in development of web pages is all about writing code that is valid HTML and CSS which make it easier to correct problems, and edit pages. HTML and CSS are the fundamental technologies for building web pages: (X)HTML for structure, accompanied by CSS for style and layout. By separating the presentation style of documents from the content of documents, CSS simplifies web authoring and site maintenance. For example, having a separate CSS file allows for making aesthetic changes to the entire website rather than just to a single web page. If CSS rules are included within a single HTML page, changes would have to be made to each and every page that used the element in question. The reasoning is that HTML should only be used for raw content and CSS be used to manipulate the content for aesthetic style.


Once you start building Web pages, you will want to learn the languages that build them. HTML is the building block of Web pages. CSS is the language used to make those Web pages pretty. And XML is the markup language for programming the Web. Understanding the basics of HTML and CSS will help you build better Web pages, even if you stick with WYSIWYG editors. And once you're ready, you can expand your knowledge to XML so that you can handle the information that makes all Web pages function.


XML was designed to transport and store data.
HTML was designed to display data.

What is XML?
XML stands for EXtensible Markup Language
XML is a markup language much like HTML
XML was designed to carry data, not to display data
XML tags are not predefined. You must define your own tags
XML is designed to be self-descriptive
XML is a W3C Recommendation

The Difference between XML and HTML
XML is not a replacement for HTML.
XML and HTML were designed with different goals:
XML was designed to transport and store data, with focus on what data is
HTML was designed to display data, with focus on how data looks
HTML is about displaying information, while XML is about carrying information.

XML Does Not DO Anything
Maybe it is a little hard to understand, but XML does not DO anything. XML was created to structure, store, and transport information.

What is JavaScript?

·        JavaScript was designed to add interactivity to HTML pages
·        JavaScript is a scripting language
·        A scripting language is a lightweight programming language
·        JavaScript is usually embedded directly into HTML pages
·        JavaScript is an interpreted language (means that scripts execute without preliminary compilation)
·        Everyone can use JavaScript without purchasing a license

Javascript can enhance user experience by creating transitional effects such as fading and sliding animation.

What Can JavaScript do?
·        JavaScript gives HTML designers a programming tool - HTML authors are normally not programmers, but JavaScript is a scripting language with a very simple syntax! Almost anyone can put small "snippets" of code into their HTML pages
·        JavaScript can react to events - A JavaScript can be set to execute when something happens, like when a page has finished loading or when a user clicks on an HTML element
·        JavaScript can read and write HTML elements - A JavaScript can read and change the content of an HTML element
·        JavaScript can be used to validate data - A JavaScript can be used to validate form data before it is submitted to a server. This saves the server from extra processing
·        JavaScript can be used to detect the visitor's browser - A JavaScript can be used to detect the visitor's browser, and - depending on the browser - load another page specifically designed for that browser
·        JavaScript can be used to create cookies - A JavaScript can be used to store and retrieve information on the visitor's computer

Web Design Principles Checklist

·        Primary audience
·        needs
·        interests
·        technology level of audience
·        computer equipment (special software requirements, available memory, speed/mhz)
Purpose for the site
·        personal
·        profit earning business
·        non-profit organization
·        educational
·        entertainment
Location of the site
·        commercial Internet service provider (ISP)
·        educational institution server
·        organization server
·        personal server
Types of content
·        text
·        graphics
·        video
·        applets
·        sound
·        forms or surveys for users to fill out (some servers do not accomodate forms).
Information provided on the "home" page
·        a "who we are" or "who I am" message
·        a mission or purpose statement
·        contact information *
·        update notice
·        copyright notice
·        disclaimer (for ex: Though we try to keep the information up-to-date, some information may not be the most current.  OR  "This list does not constitute an endorsement of any one or more of the products .")
* If the site is for a business or organization, it is important to include an address, phone number and email contact.
If the site is a personal site, disclosing an address or phone number is not advised because of privacy issues.
Content ( the key to a good site):
·        should match the purpose
·        should be well organized
·        should be spellchecked
·        should observe correct english (or the appropriate language).  Some sites have information in more than one language, depending upon the possible audiences.
·        should be current information
·        should be appropriate for the audience
Level of Web technology to best suit the purpose:
·        Minimal style - mostly text, little or no graphics (quick loading, does not require lots of memory or a high end graphic card)
·        Middle of the road style - some graphics to add an element of design or style, which compliments the information, but does not detract from the main purpose (still easy to load, may be more appealing than minimalism
·        High tech style - Lots of graphics, animation, java applets, "art" text, video clips, etc. (could be suitable for an audience of tekkies with high-end equipment, but could lose the average audience waiting for the images to load or trying to navigate links not clearly identified as such).
Style to best suit the purpose
·        professional
·        scholarly
·        casual
·        child friendly
·        teen oriented
·        artistic
Page design - consistency, clarity, user friendliness:
·        Include a "back to home" link
·        Use a consistent template on each page
·        Create a uniform color scheme (with limited color palate)
·        Be sure there is sufficient contrast between background and text
·        Avoid a too large font that SHOUTS*
·        Avoid a too small font that is hard to read*
·        Place important information near the top
·        Avoid long lists of links if possible.
·        Categorize lists in smaller chunks and provide internal tags
·        Provide a  table of contents (with links to find information in a long list)
·        Organize your material to too much scrolling to find content
* The user can override your fonts by setting her/his browser font size and style.
Standard for screen resolution is 800 (width) by 600 (height). If you design for a higher resolution the user may have to scroll back and forth or up and down to view your full content.

.jpg image format (compressed file format for high quality images - photographs).  While working on photographs, save in .tiff format, or program default, until the final quality and size is achieved, then save in .jpg.  This saves the image quality.
.gif image format (for graphics files, buttons, clip art not photographic quality).  The quality does not degrade when working with .gif files.
animated .gif files (Use sparingly.  Is animation appropriate to the theme or a distraction from your main purpose?
flash animation (Provide a "turn off" option for flash).  Too many "bells and whistles" can be overpowering.  Does the flash compliment the site? Or is it there to say "See what I can do?"
Background and text colors:
·        Patterned backgrounds produce "noise" that interferes with reading the text.
·        Provide sufficient contrast between background and text
·        Limit your font colors - "Hot" colors (like bright pink and orange) are, in general less professional for business sites. (If the business is "hot" graphics, however, that caution would probably not apply.) Primary colors (red, blue, green) might be best suited for sites that appeal to children. Black backgrounds can give a "hard edge" to a site or make it seem "gloomy" or counterculture.
Use of frames (out of favor):
·        Hard to bookmark
·        Hard to navigate
·        Hard to figure out which frame you are in to print content.
·        Search engines can't always index their contents.

What is protected by copyright rules on the WWW
Everything -
The unique underlying design of a Web page and its contents,  including:
·        links
·        original text
·        graphics
·        audio
·        video
·        html and other unique markup language sequences
·        List of Web sites compiled by an individual or organization and all other unique elements that make up the original nature of the material.
When creating a Web page, you CAN:
·        Link to other Web sites. [However, some individuals and organizations have specific requirements when you link to their Web material. Check a site carefully to find such restrictions. It is wise to ask permission. You need to cite source, as you are required to do in a research paper, when quoting or paraphrasing material from other sources. How much you quote is limited.]
·        Use free graphics on your Web page. If the graphics are not advertised as "free" they should not be copied without permission.
When creating a Web page, you may be liable if you:

·        Put the contents of another person's or organizations web site on your Web page
·        Copy and paste information together from various Internet sources to create "your own" document. [You CAN quote or paraphrase limited amounts, if you give credit to the original source and the location of the source. This same principle applies to print sources, of course.]
·        Copy and paste others' lists of resources on your own Web page
·        Copy and paste logos, icons, and other graphics from other web sites to your web page unless it is clearly advertised as "free" and you follow the original source's guidelines for posting material.
·        Some organizations are happy to let you use their logos, with permission - it is free advertising.  But they want to know who is using it.  It is best to notify a source to which you want to link. The source might not approve of all sites who want to use their logo.
Protect your privacy and reputation online:

·        Don't disclose private information about yourself or others.
·        Don't give out home phone numbers or home addresses.
·        What you link to helps define who you are and what your organization represents.
·        Avoid exaggerated claims if promoting a product or organization.
·        Cite sources of information.
·        Observe copyright rules.
·        Use original graphics or free graphics or clipart.


The Principles of Design

There are many basic concepts that underly the field of design. Balance
•          Rhythm
•          Proportion
•          Dominance
•          Unity
Balance is an equilibrium that results from looking at images and judging them against our ideas of physical structure (such as mass, gravity or the sides of a page). It is the arrangement of the objects in a given design as it relates to their visual weight within a composition. Balance usually comes in two forms: symmetrical and asymmetrical.
Symmetrical balance occurs when the weight of a composition is evenly distributed around a central vertical or horizontal axis. Under normal circumstances it assumes identical forms on both sides of the axis. When symmetry occurs with similar, but not identical, forms it is called approximate symmetry. In addition, it is possible to build a composition equally around a central point resulting in radial symmetry1. Symmetrical balance is also known as formal balance.
Asymmetrical balance occurs when the weight of a composition is not evenly distributed around a central axis. It involves the arranging of objects of differing size in a composition such that they balance one another with their respective visual weights. Often there is one dominant form that is offset by many smaller forms. In general, asymmetrical compositions tend to have a greater sense of visual tension. Asymmetrical balance is also known as informal balance.
Rhythm is the repetition or alternation of elements, often with defined intervals between them. Rhythm can create a sense of movement, and can establish pattern and texture. There are many different kinds of rhythm, often defined by the feeling it evokes when looking at it.
•          Regular: A regular rhythm occurs when the intervals between the elements, and often the elements themselves, are similar in size or length.
•          Flowing: A flowing rhythm gives a sense of movement, and is often more organic in nature.
•          Progressive: A progressive rhythm shows a sequence of forms through a progression of steps.
Proportion is the comparison of dimensions or distribution of forms. It is the relationship in scale between one element and another, or between a whole object and one of its parts. Differing proportions within a composition can relate to different kinds of balance or symmetry, and can help establish visual weight and depth. In the below examples, notice how the smaller elements seem to recede into the background while the larger elements come to the front.

Dominance relates to varying degrees of emphasis in design. It determines the visual weight of a composition, establishes space and perspective, and often resolves where the eye goes first when looking at a design. There are three stages of dominance, each relating to the weight of a particular object within a composition.
•          Dominant: The object given the most visual weight, the element of primary emphasis that advances to the foreground in the composition.
•          Sub-dominant: The element of secondary emphasis, the elements in the middle ground of the composition.
•          Subordinate: The object given the least visual weight, the element of tertiary emphasis that recedes to the background of the composition.
In the below example, the trees act as the dominant element, the house and hills as the secondary element, and the mountains as the tertiary element.

The concept of unity describes the relationship between the individual parts and the whole of a composition. It investigates the aspects of a given design that are necessary to tie the composition together, to give it a sense of wholeness, or to break it apart and give it a sense of variety. Unity in design is a concept that stems from some of the Gestalt theories of visual perception and psychology, specifically those dealing with how the human brain organizes visual information into categories, or groups2.
Closure is the idea that the brain tends to fill in missing information when it perceives an object is missing some of its pieces. Objects can be deconstructed into groups of smaller parts, and when some of these parts are missing the brain tends to add information about an object to achieve closure. In the below examples, we compulsively fill in the missing information to create shape.

Continuance is the idea that once you begin looking in one direction, you will continue to do so until something more significant catches your attention. Perspective, or the use of dominant directional lines, tends to successfully direct the viewers eye in a given direction. In addition, the eye direction of any subjects in the design itself can cause a similar effect. In the below example, the eye immediately goes down the direction of the road ending up in the upper right corner of the frame of reference. There is no other dominant object to catch and redirect the attention.

Similarity, Proximity and Alignment
Items of similar size, shape and color tend to be grouped together by the brain, and a semantic relationship between the items is formed. In addition, items in close proximity to or aligned with one another tend to be grouped in a similar way. In the below example, notice how much easier it is to group and define the shape of the objects in the upper left than the lower right.

The concept of proximity says that related items should be grouped together. Likewise, items that are not related should not be close to each other. The process of grouping related information creates visual cues, which accomplishes Jakob's principle of facilitating scanning. An example of proximity is the relationship between subheading for my paragraphs (such as Proximity above), and the Paragraphs below them. Williams also suggests never having the same amount of white space between elements that aren't a part of a list.

The concept of alignment says that everything on a page should be visually connected to something else on the page. Nothing should be placed arbitrarily. When elements are aligned they are connected to each other, even if they are separated on the page. You may have noticed that the alignment of the subheading "Alignment" was centered. As it is said, "Good design is transparent." The lack of alignment between the subhead and the related paragraph made your eye have to travel across the page, and it was probably enough for you to notice.

The concept of repetition says that you repeat design elements throughout the entire piece. The element can be a font style, graphic, line, icons, colors, the list is endless. The web makes this easy to do in several ways. First there are style sheets, which allow you to set elements of a web page to certain fonts, colors, locations on the screen, etc. It is fairly easy, and I recommend you copy my stylesheet, just to see what one looks like. If nothing else, add the style information for "A:Hover", it will makes links change color when the user mouses over them. You can also view the source of this web page to see how I linked up to the stylesheet.

The concept of contrast says that if two items aren't the same, make them very different. Contrast adds visual interest to your page. You can create visual interest by using color (as in the banner portion of this page contrasted with the content space), size and weight (as in the contrast between the headings and the paragraphs in font and weight), or any other property of an element. Again, you can utilize style sheets to make this easier by setting contrasting values for heading font and paragraph font.

No comments:

Post a Comment