0% found this document useful (0 votes)
15 views3 pages

Website Design and Navigation Guide

The document outlines the web development process, detailing the website life cycle which includes design, implementation, maintenance, and revision phases. It provides a structured approach to the design phase, emphasizing goal definition, scope setting, audience identification, content organization, and sitemap development. Additionally, it includes practical exercises for students to apply their learning in creating a website, along with important submission guidelines and attendance notes.

Uploaded by

kanjalegrace
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
15 views3 pages

Website Design and Navigation Guide

The document outlines the web development process, detailing the website life cycle which includes design, implementation, maintenance, and revision phases. It provides a structured approach to the design phase, emphasizing goal definition, scope setting, audience identification, content organization, and sitemap development. Additionally, it includes practical exercises for students to apply their learning in creating a website, along with important submission guidelines and attendance notes.

Uploaded by

kanjalegrace
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

Web Development Process

Website Life Cycle


Design: This is the initial planning phase, which includes several sub-steps.
Implementation: This involves creating the actual website.
Maintenance: This is an ongoing process of updating information and ensuring the website
remains current. The website requires continuous monitoring.
Revision: At some point, the website may need to be redesigned and reimplemented, leading
back into the maintenance cycle.

Phase One: Design - Basic Steps


1. Define the Goal:

The website needs a clear purpose.


State the goal explicitly, starting with "The goal of this website is/will be to..."

1. Set the Scope:

Define the boundaries of the project.


Specify what the website will include and, more importantly, what it will not include.
Example: "Students will use this site as a portal for all information and resources for class."

1. Identify the Target Audience:

Determine the primary target audience.


Consider secondary and tertiary audiences.
The target audience influences the content and design of the website.
Example: Primary audience - Students enrolled in CSIS 1664.
A website for a creche will have a different target audience and feel than a website for a
commercial bank.

1. Identify Content Items and Sources:

Brainstorm all possible content items (small pieces of information).


Analyze and filter the brainstorm list, deciding what to include and exclude based on the
scope.
Group the remaining content items into categories.
Determine the source of each content item (existing electronic format, needs to be written,
available on the internet).
Distinguish between text and images/visuals.
For images, consider taking your own pictures to avoid copyright issues.

1. Develop a Sitemap:
Illustrate how the pages will be connected and navigated.

Focus on making information easily accessible.

Structure Types:

1. Create a Sketch/Wireframe:

Create a basic layout visualizing the design of critical pages.


Linear: Pages must be visited in a specific order. Suitable for step-by-step instructions.
Hierarchical: From the homepage, you can go to various pages, but from those pages, you
must return to the homepage to navigate to other sections.
Mixed: Combines hierarchical and linear structures.
Network: Many pages link to other pages in a non-regular way. Common for large sites like
news portals.
Web-like: From the homepage, you can navigate to all other pages, and from those pages,
you can navigate to any other page.
Focus on a common look and feel across pages.
The homepage may differ slightly.

1. Create Critical Pages:

Develop page templates containing elements common to all pages (navigation, logo, footer).
Create a prototype with placeholder content (e.g., lorem ipsum text).
Present the prototype to the client for approval.
Once approved, start actual website creation.

Practical 1 Worksheet

Rename the document: practical1_surname_initials.docx

Questions:

1. Initials, surname, and student number.


2. Website Design:

Topic/Subject of your website.


Purpose/Goal of your website ("The goal or purpose of this website will be to...").
Personal reason for developing the website.
Primary and secondary target audiences.
List of all possible content items (use strike-through font for items to be excluded).
Group content items into six categories/pages (content items must come from the list in 2.5,
page topic cannot be an item from 2.5).
Text Content Sources: What do you already have, what will you have to write, what will you get
from the web?
Image/Visual Resource Sources: What do you already have, what will you have to create, what
will you get from the web?

1. Website Structure:

Which structure will you use (homepage + six pages)?


Why?
Diagram of the sitemap (can be drawn using shapes in MS Word, Google Drawings, or hand-
drawn and photographed).

1. Search Exercise:

Search engine used.


Exact search terms used.
Screen capture of the search engine's result page.
For the first three non-sponsored links: Website Name, URL, Relevance (percentage-wise).
Reflection: What did you learn from the search exercise? What new ideas did you get for your
website?

Submission: Submit the completed Word document on Blackboard.

Important Notes
Attendance is compulsory. Sign the attendance register only after the demonstrator checks
your work.
If you leave before signing, you will receive a zero.
No class on Thursday due to a conference.
Prepare for Monday's class by watching the provided videos for Lecture 1 and Lecture 2 of
Unit 2.

Common questions

Powered by AI

Developing a prototype and obtaining client approval is critical to the success of a website project. A prototype serves as a preliminary model of the website, showcasing its basic design and layout with placeholder content . This stage allows stakeholders to review and approve elements like navigation, page structures, and aesthetics before full-scale development begins . By involving clients early in this process, developers can align the final product more closely with client expectations and requirements, reducing the need for costly revisions later . Gathering client feedback on the prototype also identifies potential usability issues and opportunities for enhancement, ensuring a result that is both functional and satisfactory to users . Thus, prototyping is a pivotal stage in safeguarding the project's alignment with the client's vision and enhancing its final success .

A strategic approach to seamlessly integrating content from various origins involves clear planning, categorization, and alignment with the website's objectives. First, content items must be clearly identified and categorized based on the site's scope, ensuring they fit into the designated structure without overwhelming users . Developers should tailor these items to maintain a consistent voice and style, which requires meticulous editing and formatting . Content from electronic formats, newly written materials, and web-sourced items must dovetail logically into the website's navigation and user journey plans . Using a content management system (CMS) can help standardize these processes by enforcing uniform guidelines and making dynamic updates possible . Finally, detailed testing must ensure integrated content enhances user experience and fulfills the informational and functional goals of the website, making the diverse content origins indistinguishable to the end-user .

The revision phase in the web development process presents several challenges, primarily related to scope management, integration of new features, and user experience consistency. Revisions may require significant changes to design or functionality, which can lead to scope creep if not carefully planned and managed . Keeping user experience consistent during revisions is another challenge, as users may find changes disorienting or disruptive . Effective management involves a clear revision plan that aligns with the overarching project goals, ensuring changes are justified and beneficial . Continual stakeholder communication and user testing can help gather feedback, minimizing negative impacts on user experience and ensuring changes meet both business objectives and user needs . Additionally, revising with a flexible, modular design approach allows for easier integration of changes, maintaining a seamless and scalable web architecture .

Creating a sitemap involves several key considerations to ensure effective website design and functionality. These include defining the website's structure type (e.g., hierarchical, linear) to organize content logically for intuitive navigation . The sitemap must reflect the project scope by including essential content and excluding extraneous items, aiding in maintaining focus on the website's objectives . Moreover, developers should consider user needs and behaviors by including primary navigation paths and potential user journeys throughout the site . Furthermore, documenting text and visual content sources ensures that all required resources are identified for smooth content integration during the development process . A well-crafted sitemap serves as a blueprint, directly influencing website usability and user experience by providing a clear structure that helps users find information easily and enhances the site's overall functionality .

Different target audiences significantly influence both the content and design of a website as each audience group has unique needs, preferences, and expectations. Developers should tailor content to be relevant and accessible to the primary audience, such as students, by using language and resources specific to their needs . Secondary audiences, like parents or educators, might require additional information or different navigation paths, which should be incorporated into the design . The visual design, such as color schemes, fonts, and layout, also needs adaptation to resonate with the audience's demographics and psychographics . Developers must conduct thorough audience analysis during the design phase to understand these diverse needs and preferences, thereby creating a user-centric website that ensures all audience groups find value and ease of use, enhancing the site's overall user experience and engagement .

Continuous maintenance is a pivotal aspect of the website life cycle, ensuring sustained relevance and functionality. It involves regular updates to content to keep information current and useful, which is crucial in maintaining user engagement and search engine optimization . Maintenance also entails monitoring the website's technical performance, such as optimizing loading speeds and fixing broken links or security vulnerabilities, which are vital for a positive user experience and protection against cyber threats . Neglecting maintenance can lead to outdated information, security breaches, and decreased functionality, gradually eroding user trust and damaging the site's reputation . This ongoing process also allows for iterative improvements based on user feedback and changing needs, ensuring the website remains competitive and meets its defined goals over its lifespan .

Developers should create a cohesive look and feel across web pages by using consistent design elements such as color schemes, typography, and layout structures . This uniformity ensures brand identity is maintained and user recognition is reinforced across different sections of the site . To maintain functionality for diverse user paths, developers can implement adaptable page templates that cater to various user needs without sacrificing design consistency . By using responsive design techniques, the website can accommodate a range of devices and user preferences while retaining its aesthetic integrity . Additionally, designing flexible navigation systems that support both exploratory and goal-directed user paths can ensure usability and accessibility while projecting a unified brand image across pages . Thorough user testing helps refine these elements, ensuring that the balance between aesthetics and functionality serves diverse user interactions effectively .

Identifying and categorizing content items during the initial design phase is crucial as it defines the website's scope and informs structure and navigation decisions. By brainstorming and filtering content items, developers ensure all necessary information is covered within defined project boundaries, preventing scope creep . Categorizing content into distinct groups facilitates a logical arrangement of information, aiding in the design of a sitemap and clear page layouts, subsequently making the site more user-friendly and efficient in guiding user interactions . This foundational organization impacts the downstream phases of web development, such as implementation and maintenance, by providing a clear blueprint of required elements and their sources, ensuring coherence and relevance of content throughout the site's lifespan .

Different structural types in web development, such as Linear, Hierarchical, Mixed, Network, and Web-like, influence user navigation significantly. Linear structures require users to follow a specific order, ideal for instructional content but can restrict exploration . Hierarchical structures allow navigation from a homepage to different sections but require returning to the homepage for further navigation, offering clarity but potentially frustrating users who prefer more fluid exploration . Mixed structures provide flexibility by combining linear and hierarchical elements, balancing guided paths with optional navigational freedom . Network structures support extensive interconnectivity useful for complex sites like news portals, but can overwhelm users without clear navigation aids . Web-like structures enable navigation from and to any page, enhancing accessibility but risking user disorientation without consistent layout and design .

The homepage structure significantly influences the website's overall navigation experience by dictating the user's initial interaction with the site and guiding subsequent movements. A hierarchical homepage provides a centralized starting point for users, simplifying navigation by directing them to major content categories from which they must return to the homepage to access other sections; this suits sites with distinct content silos like blogs or e-commerce . In contrast, a web-like homepage offers direct access to multiple pages, facilitating quick exploration but requiring a strong navigational framework to prevent user disorientation . Developers must consider user needs, the nature of the content, and the desired user journey when selecting a homepage structure. A clear layout and well-defined navigation paths enhance usability and encourage user engagement by making information readily accessible in a manner that aligns with the site's purpose and audience expectations .

You might also like