T2L3
Conceptual Design Introduction
Web design often becomes a quite extensive task. Combining text, graphics, and navigation into a web page is a challenge not to be taken lightly. Designer must be aware that pages incorporating these elements must also be quick to load, present useful info, and be easy to use. Navigation schemes must incorporate feelings of where you are, where you are going, and where you can go next.
When you finish this lesson, you should be able to:
Define the Site Architecture Develop a Client Profile Determine Content Priorities Utilize Storyboards and Site Plans Discuss the RAD Process Determine a Development Team Composition
Conceptual Design
Planning Before Designing Navigation Design Considerations Determining Content Priorities Using Storyboards and Site Plans
The dynamic nature of web development projects requires a manager who has the right blend of managerial and technical skills to keep it all under control. The following sequence is followed for media production today: 1.Pre-production 2.Production 3.Publication 4.Post-publication Each of these steps is essential to the success of a media project. In the pre-production or planning phase, brainstorming is followed by the development of a plan of action that carries the production through to fruition. The planning phase is followed by hands-in- the-dirt production work: the task-by-task process of producing the media in question. Publication is the process by which the media is made public, and post-publication is the cleanup, review, and examination of the project to determine its future positioning, or filing it away as a job well done. The following design guidelines will help you understand these concepts.
1 T2L3
Production Management
RAD Methodology Development Techniques Development Team Composition Tips for Web Project Managers
Additional Resources
Storyboards http://www.clat.psu.edu/ist/ist250/design/storybrd.htm
Designing the Structure of Your Web Site http://whs.wsd.wednet.edu/CHP/Planning_your_Web_site.html - 7293
General Design Considerations http://www.clat.psu.edu/ist/ist250/design/design.htm
Webmonkey - Design http://www.hotwired.com/webmonkey/design/?tw=frontdoor
Webreview.com - Web Design http://webreview.com/wr/pub/Web_Design
Poorly-Designed Sites http://www.clat.psu.edu/ist/ist250/design/poorweb.htm
2 T2L3
Planning Before Designing
You should always define the site architecture and its proposed function before even opening your design software. Determine which type of site you are designing. Entertainment or Artistic Sites - Cool content, thought provoking, fun or educational - Encourages exploration Examples of entertainment or artistic Web sites include Superbad http://www.superbad.com/, SoulFlare http://www.soulflare.com/ , and Atlas. http://www.atlas.com/
Informational Sites - Deliver useful information. - Users of these sites want information fast, and in an easy-to-digest format. - Don't distract your users with unnecessary GIFs. It's important to arrange the elements in a logical order by importance, using size, color, and contrast to make it clear what's available. Consistent layout, navigation, and design will help keep readers from getting confused.
Here is a set of Client Profiling Questions derived from http://www.secretsites.com/:
1.) Background and Goals Please provide corporate and industry descriptions, including competitors, along with a brief critique of their sites. Include: a. Contact information b. A description of the group who will be working on the project c. Who are the decision makers? d. Who else would be contracting? e. Who's responsible for what? f. What human resources do you have for various stages of the process? 2.) Understanding the Project a. What is the mission statement or summary of your project? b. What are the basic goals of this project? (e.g., branding/identity reinforcement, improved access to information, direct sales, corporate communication, etc.) c. What outcome will make this project successful? d. How will you measure success? e. What are your schedule requirements? f. What is the budget for this project? Is there an acceptable budget range, depending on the level and comprehensiveness of services provided? Please explain. g. Describe any work that has been done toward designing/redesigning a new web site. h. Will the web site reinforce an existing branding or marketing strategy? How will the web site reinforce an existing branding or marketing strategy?
3 T2L3
i. Discuss any identity/branding assets (logos, other artwork, and fonts) or issues. 3.) Understanding the Audience a. What types of visitors do you want to attract? b. What are your goals for each type of visitor? c. What are the products/services involved? d. What are your goals for these products/services? 4.) Understanding Content a. Where will content come? b. Will it be new, re-purposed, or both? c. How often will you add new content? d. Who will update the content? 5.) Understanding Functionality a. What functional requirements do you believe to be necessary? (e.g., download areas, database-driven web pages, commerce, catalog, applications, etc.) b. Who will update these functionalities? c. Are there extraordinary security issues? d. Are there other technical issues or limitations? e. Have you budgeted for hosting and maintenance of the site? f. If so, what is your budget? g. Who will maintain the site contents? h. How will the site be served/hosted? i. What types of legacy systems/databases are in place? j. What is your long-term plan for the site?
Before finalizing your research it is best to understand who else is out there doing what your client wishes to do. Doing a form of competitive analysis is also a very crucial step in formulating the overall design considerations. Take a tour of the web by attempting to locate, at a minimum three (3), web sites that relate to the project you are about to undertake. Use these categories to help define them.
6.) Determine the following when attempting to find comparative sites: a. Branding in a similar situation to yours (new company, new brand, established brand, etc.). b. Appeal to same target group of customers. c. Whether or not you would build the site if you were in a different industry. d. Colors, look-and-feel, user interface, layout. e. Size of site. f. Size of project. g. Publishing model (frequency, novelty of content, etc.). h. Attracting new people to the site (newsworthiness, giveaways, impact, etc.). i. Your competitors' sites. j. Quality of content. k. Quality of graphics.
4 T2L3
l. Functionality (things sites do for people). m. Community, special features, responsiveness, other categories important to your project. n. Overall favorite sites (for whatever reasons)
Also, see the sample Web Site Development Plan. This document contains nearly all the steps one should go through when developing a web site.
5 T2L3
Navigation Design Considerations
Offer Multiple Navigation Approaches Nobody has figured out the ultimate user interface, so offer multiple approaches to getting at the same data. For example, offer on-screen buttons as well as hypertext links for moving about through the site. Offer a table of contents as well as a "you are here" site map. Write Good Text Links When creating navigation links, be brief and to-the-point. Avoid wordiness. Choose words that convey what the reader can expect on the other end of the hyperlink. The link language should entice the reader to click, and the link itself should deliver on the promise. For example, avoid the phrase "To see a close-up picture of this item, click here." People see "click here" so often they will just ignore it. Instead, write something like "See a close-up picture of this item." Design Navigation Buttons Wisely Complex graphics for navigation - little icons or photographs that link users to particular pages - are often unnecessary. In most cases, this is overkill. The link will be just as prominent, and the page will load faster, without using the image at all. On the web, sometimes less is more. Example: if you want to design a phone book, use an A as a design element to start the alphabetical list, not a smiley face or something meaningless.
6 T2L3
Determining Content Priorities
Use the site's visual design to establish a hierarchy of content. Lots of sites seem cluttered and confusing because the site designer failed to identify what was most important. You (possibly in consultation with your client, whether internal or external) need to figure out what's important: make that big and make what's less important small. Once you determine the priorities, it will be much easier to figure out where the pieces are supposed to go. Example: GameCenter's Front Door http://www.gamecenter.com/ targets specific areas of content. The newest, biggest stories are promoted with images and blurbs at the top of the page. Animated images promote the popular software download area. Depending on your client's needs, one of the following organizational schemes may work: Exact Organizational Schemes This type of organization is straightforward. A table of contents or alphabetical order is used. Chronological order may be appropriate. Ambiguous Organizational Schemes In these sites, information is divided into categories that defy exact definition, and multiple ways of organizing the information may exist. Consider the library. You can arrange books by author, by title, by type, and so on. If you have a site where people might not know exactly what they are looking for, consider using several techniques for finding the needed information. Some of these techniques include topical, task oriented, or audience specific (where you store information on the user and over time build up a user profile.) Another technique to consider is the metaphor. Just as current desktop computers use a filing/folder desktop metaphor as an interface, perhaps there is something about your anticipated audience that lends itself to a metaphor approach. Many sites today use hybrid schemes for navigation. This makes sense, for it allows you to reach potentially unknown users. If this approach is used, be careful to keep your different schemes separated. Mixing them together will only cause confusion.
7 T2L3
Using Storyboards and Site Plans
Storyboards are usually pencil and paper mockups of a site. Storyboards are helpful at understanding the layout of a particular and the site. It’s an essential tool for helping to design consistency across the site. It is far cheaper to experiment with designs on the drawing board and change them at this stage then it is to develop a site without a clear plan. The first way is intelligent, the second courts disaster.
Storyboarding a perspective web site provides an overall rough outline of what the site will look like. You should include in the storyboard:
the overall design concept, the style of the site, the name of each page (file name and header name), which topics go where, the links, a conceptual idea of where your images go, what type, size (on screen and file size) you need for graphics, what the layout will look like, notes to the programmers, and many other things, depending on your unique situation.
Developing a storyboard is easy. First, make thumbnails for each section of the site that you are designing. Each paper page is a rough sketch of what goes on the web page.
At the same time, you can develop a feel for the relationships between pages and thus a feel for the structure of the site. The easiest way to do this is grab an empty whiteboard or chalkboard and start taping your pages on it. Draw the links between the pages.
Then step back and imagine yourself as a user of this site. Does what you did make sense? There’s a lot to consider here! Review the other lessons on this topic at this time if you think you forgot something.
A well-developed storyboard also allows you to show your client what you have in mind before any actual coding begins. If you have a storyboard that both you and your client agree on, fewer "surprises" will occur duringthe development phase. With a well- developed storyboard, you can develop each page in turn without "missing" something, making testing and debugging a site that much easier.
You don't have to be able to draw to produce a storyboard. You need only sketch in the outlines. 'This image goes in the top right hand corner, this heading is level 2 and centered, this paragraph goes here' etc. You can draw all this in simple shapes with a few notes. 'This page is a white background, the navigation links go here and point to' and so on. The usual purpose of the storyboard is to communicate your perspective development
8 T2L3 intentions, not to win an art prize. However, if you are attempting to sell the idea of the web site to a customer, you may want a storyboard that would win a prize!
Ideally, someone should be able to look at your storyboard, no matter how crude, and using the right material, put together the same site you would have done. If you have a large site to develop this can be very useful, allowing you to distribute work to others. From the storyboard they should be able to develop the pages as you want them. When you assemble the project you should have consistently designed pages despite having several different authors.
Here is an example of a storyboard for a simple site. It does not follow all the suggestions listed above, for in this case (one author who was also the subject matter expert), these things were not needed. This illustrates the point that each storyboard will be unique, reflecting the uniqueness of the particular project.
Revise the storyboard and site design as many times as you feel necessary. It's only paper at this point, and changes are cheap.
9 T2L3
RAD Methodology
In many software development circles a technique for rapidly producing software is employed. Rapid Application Development (RAD) methodology is a technique employed during various stages of the media development steps. Significant principles in the RAD process include:
One project manager manages the project throughout its lifetime.
Working closely with focus greatly enhances the refining of the final product.
Effective communication keeps the development process relatively stress free and maintains a positive tone.
Personal conflicts are resolved in a timely manner.
The practice of using “reusable” technologies and existing materials reduces the workload and time to delivery.
Keeping the schedule clear and uncluttered allows for more control over the workflow.
All risks that can impede the process are examined and evaluated on an impact analysis basis.
Using current management and group software helps keep the organization informed.
10 T2L3
Development Techniques
These methods can serve Web developers by providing techniques to increase productivity, optimize time spent on the project, and output a quality site.
SOFTWARE CORRESPONDING WEB DEVELOPMENT DEVELOPMENT TECHNIQUE TECHNIQUE
Feedback and focus groups are Employees of the Web shop can be organized and queried. organized into groups and asked to provide feedback about what their management and organization needs are. Focus groups should also comprise people from outside of the organization. These groups can be reconvened throughout the process to check on the site's efficacy.
Existing technology should be An inventory of all existing content reused wherever sensible and (brochures, photos, and interactive possible. media) will help developers instantly see what they can recycle or update. This step will be especially useful for those managing a site redesign, helping determine which information can be used in the new version.
Scheduling and risk Development and adherence to a management are imperative for schedule is critical to deploy a quick yet efficient application quality Web site in step with the development. evolution of the project and company goals.
The project is managed by a Assigning a single individual to project manager. manage a team for the lifetime of the project ensures that milestone goals are met. For projects spearheaded by a single individual, using management software is routine.
11 T2L3
Development Team Composition
A web development project is centrally managed by a project manager with the following responsibilities:
Supervises the logistical aspects of the project.
Ensure timely completion of all tasks. A Web Project Manager must have a diverse background in order to successfully act as a liaison among all diverse technology and business specialists. Being well versed in these areas will allow them to understand the dynamics of the projects since they must manage issues from marketing to server administration. Having a broad knowledge of all these technologies will be very helpful but it is also hard to find. Many times web project managers come from an area that provides them with depth in a particular specialty. Over time their depth will increase in other areas. A Web Project Manager’s responsibilities include:
Assigns project tasks.
Runs project meetings.
Sets the tone and course of a project.
Capable of envisioning both logistical details and long-term results.
A familiarity of web design technology and development in order to make appropriate decisions regarding a given project.
Delegate responsibilities and trusts team members to get the job done.
At times, responsible for aspects of client relations, legal issues, and fiscal concerns.
Diplomatic and understands corporate and organizational politics. Additional roles include experts from the following areas:
Content developers
Graphic designers
HTML developers -Programmers (client and server side) -Database administrators
12 T2L3
-Systems administrators -Marketing experts
13 T2L3
Tips for Web Project Managers
Web projects run efficiently when managed by experienced leaders. However, you have to learn and start somewhere. These following tips will help you out. But also remember to always seek out other resources to enhance your project leader characteristics and traits.
Be aware of your team members concerns.
Know them and their limitations.
Create respectful relationships.
Schedule milestone goals.
Be aware that natural problems occur ( you are not working in a vacuum).
Maintain good communication between teams.
Maintain a cool head and clear thoughts during crisis.
Motivate through acknowledgment rather than through threats or inducement of fear.
Be honest and upright with your team members.
Recognize team members for their work.
14 T2L3
Conceptual Design Summary
This lesson is designed for you to gather information about conceptual design issues in web site development. When you are finished with the lesson, you should be able to conceptualize the following:
Conceptual Design
Planning Before Designing Navigation Design Considerations Determining Content Priorities Using Storyboards and Site Plans
Production Management
RAD Methodology Development Techniques Development Team Composition Tips for Web Project Managers
A short summary of these topics are listed below. If you do not understand these things, you should review the lesson at least once. If you are still having difficulty, you should consider other sources of information that compliment this lesson, such as textbooks, tutors, and instructors.
The following sequence is followed for media production today: 1.Pre-production 2.Production 3.Publication 4.Post-publication
Planning Before Designing
You should always define the site architecture and its proposed function before even opening your design software. Determine which type of site you are designing. Use a set of Client Profiling Questions to assist your efforts:
Background and Goals Understanding the Audience Understanding Content Understanding Competitive Sites
15 T2L3
Navigation Design Considerations
Offer Multiple Navigation Approaches
Write Good Text Links
Design Navigation Buttons Wisely
Determining Content Priorities
Exact Organizational Schemes
Ambiguous Organizational Schemes
Using Storyboards and Site Plans
Storyboarding a perspective web site provides an overall rough outline of what the site will look like. You should include in the storyboard:
the overall design concept , the style of the site, the name of each page (file name and header name), which topics go where, the links, a conceptual idea of where your images go, what type, size (on screen and file size) you need for graphics, what the layout will look like, notes to the programmers, and many other things, depending on your unique situation.
RAD Methodology
Rapid Application Development (RAD) methodology is a technique employed during various stages of the media development steps. Significant principles in the RAD process include:
One project manager manages the project throughout its lifetime.
16 T2L3
Working closely with focus greatly enhances the refining of the final product.
Effective communication keeps the development process relatively stress free and maintains a positive tone.
Personal conflicts are resolved in a timely manner.
The practice of using “reusable” technologies and existing materials reduces the workload and time to delivery.
Keeping the schedule clear and uncluttered allows for more control over the workflow.
All risks that can impede the process are examined and evaluated on an impact analysis basis.
Using current management and group software helps keep the organization informed.
Development Techniques
Feedback and focus groups are organized and queried.
Existing technology should be reused wherever sensible and possible.
Scheduling and risk management are imperative for quick yet efficient application development.
The project is managed by a project manager.
Development Team Composition
A web development project is centrally managed by a project manager with the following responsibilities:
Supervises the logistical aspects of the project.
Ensure timely completion of all tasks. A Web project manager responsibilities include:
Assigns project tasks.
Runs project meetings.
17 T2L3
Sets the tone and course of a project.
Capable of envisioning both logistical details and long-term results.
A familiarity of web design technology and development in order to make appropriate decisions regarding a given project.
Delegate responsibilities and trusts team members to get the job done.
At times, responsible for aspects of client relations, legal issues, and fiscal concerns.
Diplomatic and understands corporate and organizational politics. Additional roles include experts from the following areas:
Content developers
Graphic designers
HTML developers -Programmers (client and server side) -Database administrators -Systems administrators -Marketing experts
Tips for Web Project Managers
Be aware of your team members concerns.
Know them and their limitations.
Create respectful relationships.
Schedule milestone goals.
Be aware that natural problems occur ( you are not working in a vacuum).
Maintain good communication between teams.
Maintain a cool head and clear thoughts during crisis.
Motivate through acknowledgment rather than through threats or inducement of fear.
18 T2L3
Be honest and upright with your team members.
Recognize team members for their work.
19