Talk:Web design/Web design (rewrite)

Note: This reflects my progress in rewriting the article on Web design, which I am working on in parallel with similar work on the Web development article.

* Using the proposed outline for Web development as the model for this page, I have created an initial high-level taxonomy for Web design, which is almost certainly incomplete.

* I believe I have now allocated all the existing content to this new article. Please let me know if you notice anything missing, or think that something is in the wrong place.

* Next what we have here must be edited for continuity and internal consistency.

* We also need to create stubs for the empty sections.

For more details of how to participate in this discussion, see the Talk:Web design page. But please go ahead and make minor edits here, if you see something that needs fixing. Chris Loosley 19:51, 29 December 2006 (UTC)

Introduction

I think this existing material can be reworked a bit to produce a good introduction. It needs to better reflect the diverse products of Web design -- pages, sites, blogs, consumer and business applications, Web services, and ... (what have I forgotten?). Chris Loosley 22:45, 28 December 2006 (UTC)

Web design is the design of web pages, websites and web applications using HTML, CSS, images, and other media.

This will need to be modified to reflect the rewritten descriptions of the Web development process. Chris Loosley 22:45, 28 December 2006 (UTC)

Web design is in contrast with web development, which includes web server configuration, writing web applications and server security.

Web design process

It would be nice if we could present Web design as a particular instance of software design, but unfortunately the software design article also needs to be rewritten. See discussion on its Talk page. I am not volunteering to do that. So I think this section will largely have to stand alone. Chris Loosley 22:45, 28 December 2006 (UTC)

This section will also be tied to the rewritten Web development activities, since design activities are closely related to several of them Chris Loosley 22:45, 28 December 2006 (UTC)

Multidisciplinary requirements

This section is currently unchanged from the present article, but will be edited because the present definition given for back end is incorrect. Web development does involve functional design and programming (or software engineering), but they are not the back end. The point about individual vs. team also needs to be merged with other more general comments about scale. Chris Loosley 10:31, 2 January 2007 (UTC)

I did some more editing and migrated this to the main article. Chris Loosley 01:25, 11 January 2007 (UTC)

This is fine, but I think functional design should be mentioned somewhere in the article if not the "see also" section. -- comment by Oicumayberight, 11 January 2007 (UTC)

Website design crosses multiple disciplines of information systems, information technology and communication design. The website is an information system whose components are sometimes classified as front-end and back-end. The observable content (e.g page layout, user interface, graphics, text, audio) is known as the front-end. The back-end comprises the organization and efficiency of the source code, invisible scripted functions, and the server-side components that process the output from the front-end. Depending on the size of a Web development project, it may be carried out by a multi-skilled individual (sometimes called a web master), or a project manager may oversee collaborative design between group members with specialized skills.

Small-scale and large-scale Web development

These ideas (copied from the Web development rewrite) will be revised to say something similar about Design. Chris Loosley 07:14, 29 December 2006 (UTC)

In practice, informal approaches to Web development, especially those employed by a single Web developer or a small development team, may not treat each development category listed above as a distinct activity or phase. Nonetheless, the more formal descriptions of software development processes do serve to identify a collection of tasks that are essential to the production of effective software. So while people may adopt many different methodologies (or approaches) for addressing the work, those essential tasks must still be performed -- somehow, by someone -- during any development process. This article focuses primarily on the tasks of Web development, rather than on the processes or methodologies that can be adopted to perform those tasks.

Web design activities

This section is a place-holder for new introductory material. Chris Loosley 07:14, 29 December 2006 (UTC)

The principal Web design activities are:

1. list item
2. list item
3. list item
4. list item
5. list item
6. list item

The following sections summarize the Web design tasks and deliverables, and show how they relate to the phases of Web development.

Design and the requirements phase

Refer to the importance of design decisions, because interactions with a Web site or Web application are an aspect of customer experience. Chris Loosley 20:16, 29 December 2006 (UTC)

Apart from dropping its original title (Website planning), this section is currently unchanged from the present article. Chris Loosley 07:14, 29 December 2006 (UTC)

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

This section is currently unchanged from the present article. Chris Loosley 06:01, 29 December 2006 (UTC)

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

This section is currently unchanged from the present article. Chris Loosley 06:01, 29 December 2006 (UTC)

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.

Conceptual design phase

Content

This section is currently unchanged from the present article. Chris Loosley 06:01, 29 December 2006 (UTC)

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 fulfilled.

Information Architecture

Information Architecture will be addressed in this section, maybe with a reference to Interaction design. Chris Loosley 19:39, 29 December 2006 (UTC)

Mockups and Prototyping phase

Storyboarding

This section is unchanged from the present article. Chris Loosley 06:01, 29 December 2006 (UTC)

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.

Design and the production phase

CSS versus tables

I moved this material to the Web development rewrite. Chris Loosley 04:05, 2 January 2007 (UTC)

The choice between using Cascading Style Sheets (CSS) or HTML tables to implement a Web page layout is discussed under Web development and tableless web design. Chris Loosley 06:35, 2 January 2007 (UTC)

Flash

I moved this material to the Web development rewrite. Chris Loosley 04:11, 2 January 2007 (UTC)

Whether to use Adobe Flash technology to create a site or application is discussed under Web development. Chris Loosley 06:35, 2 January 2007 (UTC)

Static and dynamic page generation

I have moved this section of the present article to the Web development rewrite. Chris Loosley 06:34, 1 January 2007 (UTC)

Whether to employ static web pages or dynamic web pages when creating a site or application is discussed under Web development. Chris Loosley 06:35, 2 January 2007 (UTC)

Design and the launch phase

This section should discuss evaluating design decisions through pre- and post-launch testing. It may refer to software testing, quality assurance, usability testing. Chris Loosley 20:08, 29 December 2006 (UTC)

Concerns that span development phases

This article should contain short sections on each of these topics, but in most (maybe all?) cases those sections would link to a separate article. This is the list from Web development; I expect the design list will also contain some of these, plus new topics. Chris Loosley 06:01, 29 December 2006 (UTC)

This introductory sentence is currently unchanged from the present article. It will probably be replaced by something more general. Chris Loosley 07:14, 29 December 2006 (UTC)

As in most collaborative designs, there are conflicts between differing goals and methods of web site designs. These are a few of the ongoing ones.

Project Management

Lack of collaboration in design

This section is currently unchanged from the present article. It should be generalized to include iterative processes and agile development methods. Chris Loosley 07:14, 29 December 2006 (UTC)

In the early stages of the web, there wasn't as much collaboration between web designs and larger advertising campaigns, customer transactions, social networking, intranets and extranets as there is now. Web pages were mainly static online brochures disconnected from the larger projects.

Many web pages are still disconnected from larger projects. Special design considerations are necessary for use within these larger projects. These design considerations are often overlooked, especially in cases where there is a lack of leadership, understanding or concern for the larger project to facilitate collaboration. This often results in unhealthy competition or compromise between departments, and less than optimal use of web pages.

Usability

Eventually there will be more subheadings under Usability, since it is a major design concern. Chris Loosley 07:14, 29 December 2006 (UTC)

Liquid versus fixed layouts

This section is currently unchanged from the present article. I am going to leave it here, but edit it to refer to the discussions of CSS vs. tables and Flash, which -- because they concern implementation technologies -- I am moving to the Web development article. Chris Loosley 02:50, 2 January 2007 (UTC)

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.

Similar to liquid layout is the optional fit to window feature with Adobe Flash content. This is a fixed layout that optimally scales the contents of the page without changing the arrangement or text wrapping when the browser is resized.

Compatibility and restrictions

This section is unchanged from the present article. Chris Loosley 06:01, 29 December 2006 (UTC)

Because of the market share of modern browers (depending on your target market), the compatability of your website with the viewers is restricted. For instance, a website that is designed for the majority of websurfers will be limited to the use of valid XHTML 1.0 Strict or older, Cascading Style Sheets Level 1, and 1024x768 display resolution. This is because Internet Explorer is not fully W3C standards compliant with the modularity of XHTML 1.1 and the majority of CSS beyond 1. A target market of more alternative browser (e.g. Firefox and Opera) users allow for more W3C compliancy and thus a greater range of options for a web designer.

Another restriction on webpage design is the use of different Image file formats. The majority of users can support GIF, JPEG, and PNG (with restrictions). Again Internet Explorer is the major restriction here, not fully supporting PNG's advanced transparency features, resulting in the GIF format still being the most widely used graphic file format for transparent images.

Many website incompatibilities go unnoticed by the designer and unreported by the users. The only way to be certain a website will work on a particular platform is to test it on that platform.

Findability

How it Looks vs. How it Works

This is the first paragraph of a section in the present article. Chris Loosley 06:01, 29 December 2006 (UTC)

Since so many web developers have a graphic arts background, some may pay more attention to how a page looks, without considering how visitors are going to find the page via a search engine. Some may rely more on advertising than search engines to attract visitors to the site. On the other side of the issue, search engine optimization consultants (SEOs) obsess about how well a web site works technically and textually: how much traffic it generates via search engines, and how many sales it makes, assuming looks don't contribute to the sales. 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. One could argue that this is a false dichotomy due to the possibility that a web design may integrate the two disciplines for a collaborative synergetic solution. Because some graphics serve communication purposes in addition to aesthetics, how well a site works may depend on the graphic designer's visual communication ideas as well as the SEO considerations.

Performance

The following paragraph is currently unchanged from the present article. It is the second paragraph of 'How it Looks vs. How it Works' Chris Loosley 06:01, 29 December 2006 (UTC)

Another problem when using lots of graphics on a page is that download times can be greatly lengthened, often irritating the user. This has become less of a problem as the internet has evolved with high-speed internet and the use of vector graphics. This is an engineering challenge to increase bandwidth in addition to an artistic challenge to minimize graphics and graphic file sizes. This is an on-going challenge as increased bandwidth invites increased amounts of content.

Accessibility

I moved this material to the Web development rewrite, and replaced it with an introductory sentence. Chris Loosley 03:35, 2 January 2007 (UTC)

Main article: Web accessibility

People with disabilities (audio, visual, motor, or cognitive) may find it difficult to use a Web site or application that is not explicitly designed and developed to be accessible. Implementation choices that can reduce or help accessibility are discussed under Web development.

History of Web Design

I favor moving this section towards the end of the article -- comments? Chris Loosley 22:45, 28 December 2006 (UTC)

If we have a history section here, it should focus on the history of the practice and/or profession of Web design, not on the history of the underlying Web platforms and technologies. But I recognize that evolving technology has driven changes in the designers' focus, so maybe this paragraph just needs to be a bit more aauthoritative in that regard. Does anyone have a good reference to major evolutionary phases and dates? Chris Loosley 07:39, 29 December 2006 (UTC)

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. Features 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 (now Adobe 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, often at the expense of partial search engine visibility and browser functions available to HTML.

See also

This section is currently unchanged from the present article. Chris Loosley 06:01, 29 December 2006 (UTC)

Color tool Content management Faceted navigation Information architecture

Interaction design Knowledge visualization Server-side scripting Streaming Media

Style sheet (web development) User interface design Web colors Web indexing

Web integration Web usage mining Website architecture Website builder

External links

This section is unchanged from the present article. Chris Loosley 06:01, 29 December 2006 (UTC)

• W3C - World Wide Web Consortium
• UK Web Design Association
• Devlounge + Articles & Interviews for Designers
• Jakob Nielsen on Usability and Web Design
• Accessibility 101

Note: I have deliberately not copied across the links to categories or non-english wikis, because this page is not yet part of the article namespace. Those links will be retained in the present article when we merge back the final rewitten content. Chris Loosley 06:01, 29 December 2006 (UTC)

Website design

These four introductory paragraphs are currently unchanged from the present article. I think most of it is more detailed than we need in an introduction, and will probably be merged into the body of the article, moved to the Web Development rewrite, moved to another page, or deleted altogether as we rewrite. Chris Loosley 07:14, 29 December 2006 (UTC)

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. For example, a website might be compared to a book, where each page of the book is a web page.

A website typically consists of text and images. The first page of a website is known as the Home page or Index. Some websites use what is commonly called an Enter Page. Enter pages might include a welcome message, language/region selection, or disclaimer. Each web page within a website is an HTML file which has its own URL. After each web page is created, they are typically linked together using a navigation menu composed of hyperlinks.

Once a website is completed, it must be published or uploaded in order to be viewable to the public over the internet. This is done using an FTP client. Once published, the webmaster may use a variety of techniques to increase the traffic, or hits, that the website receives. This may include submitting the website to a search engine such as Google or Yahoo, exchanging links with other websites, creating affiliations with similar websites, etc.

A relatively new technique for creating websites 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.