Scribd
Upload
7 views

Web Design

The document outlines a design plan for an e-commerce website called 'soko.tz', detailing its information architecture, site map, and wireframe of the homepage. Key features include product categories, a user account section, and a streamlined checkout process, all designed with a modern orange and white color scheme. The design choices emphasize user-centric navigation, visual hierarchy, and accessibility to enhance the overall shopping experience.

Uploaded by

kevostein2k47
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
7 views

Web Design

The document outlines a design plan for an e-commerce website called 'soko.tz', detailing its information architecture, site map, and wireframe of the homepage. Key features include product categories, a user account section, and a streamlined checkout process, all designed with a modern orange and white color scheme. The design choices emphasize user-centric navigation, visual hierarchy, and accessibility to enhance the overall shopping experience.

Uploaded by

kevostein2k47
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 10

INSTITUTE OF ACCOUNTANCY ARUSHA

(IAA):

PROGRAM: BCSe 02
CODE: CYU 07316
COURSE NAME: Web Technologies
LECTURER: Ramadhan (Ms. Sakina)
SEMISTER: ONE
ACADEMIC YEAR: 2024-2025
SUBMISSION DATE: 5/11/2024
NAME: Kelvin Rutatina
REGISTRATION No: BCSe-01-0091-2023
QUESTION:

 Create a design plan for a website of your choice (e.g., a portfolio, e-


commerce site, or blog).
 Include:
o Information architecture
o A site maps
o A wireframe of the homepage
Justify your design choices in a short write-up.

Website of choice: E-commerce website called “soko.tz”:


The website of choice will be an e-commerce website selling various products
in different categories:
• Home appliances
• Electronics
• Motors
The website will have register/login section, cart for purchases, support page
and customer review page.
The overall colour accent will be orange and white.
1. INFORMATION ARCHITECTURE:

The website will have the following design or architecture:

1. Home

- Search bar
- Trending
- Special offers
- Customer testimonials

2. Categories
- Main categories
• Electronics
• Home
• Motors
- Subcategories
• Smartphones
• Laptops
• Cars
• Furniture

3. Details

- Images
- Description
- Specifications
- Pricing
- Customer reviews

4. Cart

- Items
- Price
- Discounts

5. Checkout

- Shipping
- Payment
- Order

6. Account

- Login
- Register
- History
- Settings

7. Support

- Help
- Contacts
- Questions

Main categories:

• Home
• Featured
• Categories
• Product details
• Cart
• Checkout
• Account
• Support

Subcategories:

- Search Bar
- Trending
- Special Offers
- Customer Testimonials
- Product Images
- Description
- Specifications
- Pricing
- Seller Information
- Customer Reviews
- Add to Cart/Buy Now Button
- Summary of selected items
- Price details
- Discount codes and promotions
- Shipping Information
- Payment Methods
- Order Summary
- Place Order Button
- Login/Register
- Order History
- Account Settings
- Help Center
- Contact Form
- Frequently Asked Questions
SITE MAP:
The following is the site map showing navigational flow of the website:
── Website
├── Home
│ ├── Bar
│ ├── Customer
│ ├── offers
│ ├── Search
│ ├── Special
│ ├── testimonials
│ └── Trending
├── Account
│ ├── History
│ ├── Login
│ ├── Register
│ └── Settings
├── Cart
│ ├── Discounts
│ ├── Items
│ └── Price
├── Categories
│ ├── Electronics
│ │ ├── Laptops
│ │ └── Smartphones
│ ├── Home
│ │ └── Furniture
│ └── Motors
│ └── Cars
├── Details
│ ├── Description
│ ├── Images
│ ├── Pricing
│ ├── Reviews
│ └── Specifications
├── Checkout
│ ├── Order
│ ├── Payment
│ └── Shipping
└── Support
├── Contacts
├── Help
└── Frequently asked questions
WIREFRAME:

Header
- Logo on the left
- Search bar in the center
- Navigation bar (Home, Categories, Customer Service) on the right
- Shopping cart icon

Hero Section
- Large banner image with a promotional offer
- Shop Now

Featured Listings Section


- Grid layout showcasing popular listings with thumbnails and short
descriptions

Trending Items Section


- Highlighting items currently trending on the site

Special Offers Section


- Displaying ongoing deals and discounts

Customer Testimonials Section


- Featuring reviews from satisfied customers

Footer
- Contact information
- Social media links
- Newsletter subscription
- Quick links
- Terms of Service
-Privacy Policy
- Support
Visual presentation:

LOGO | SEARCH BAR | CART


TOP NAVIGATION MENU
Home | Categories | Deals | New Arrivals | Contact
HERO BANNER
(Promotional image or featured product)
CATEGORY SECTION
Home | Electronics | Motors
FEATURED PRODUCT
Product 1 | Product 2 | Product 3 | Product 4
DEALS SECTION
Deal 1 | Deal 2 | Deal 3 | Deal 4
FOOTER
About Us | Support | Terms of service | Privacy policy

Design Choices

• Consistency and Branding


- Color Palette: Modern and minimalist with orange accents for CTAs.
- Typography: Clean and professional, using modern sans-serif fonts like
Open Sans.
Justification of Design Choices

1.User-Centric Navigation:
The navigation bar is simple and intuitive, making it easy for visitors to find
essential information quickly.

2.Visual Hierarchy:
The hero section immediately captures attention with a welcoming message and
a call-to-action button, encouraging users to explore projects right away.
Color Palette:
- Primary Color: Orange
- Secondary Color: White to add a clean modern look.

3.Content Organization:
Grouping similar content together (e.g., all Furniture under Home) helps
maintain a clean and organized layout.

4.Consistency and Branding:


Consistent use of fonts, orange colour, and layout throughout the site reinforces
an energetic and enthusiastic aesthetic that provides a cohesive user
experience.

5.Accessibility:
Clear headings, ample white space, and responsive design ensure the site is
accessible and user-friendly across different devices and screen sizes.

6.User-Centric Navigation:
The navigation bar is intuitive, making it easy for users to find what they need
quickly. The primary sections (Home, Categories, Customer Service) are
prominent and easily accessible, ensuring users can navigate the site with ease.

7.Product Highlights:
The homepage sections (Featured Listings, Trending Items, Special Offers) are
strategically designed to showcase a variety of items and promotions. This
approach keeps the content fresh and engaging, catering to different customer
interests.
8.Smooth Shopping Experience:
The cart and checkout processes are streamlined to minimize friction. Providing
features like discount code application and multiple payment methods enhances
convenience and user satisfaction.

HTML Assignment 1 (continuation)


Your job is to create a web site that shows the following elements. Make sure all of your code is
arranged properly and cleanly. Your page must contain the following:
1. Basic Tags: Make sure you have your document set as HTML and have a body of the page
defined.
2. Background: Set a background color or a background image
3. Font = Font in bold, italics and underlined as well as showing different types of fonts and
different font colors and sizes. You can do this as you fill out your page content.
4. Headings: Your page should have at least TWO different headings of different types. The main
heading should be aligned to the center of the page.
5. Images: You need a MINIMUM of 4 images. For the first 3, align one left, one center and one
right. Use the image size tags to resize your images as needed. The fourth image needs to be turned
into a link.
6. Pre-format Text: Use the
tag too set up some text to appear exactly as it does in
your code.
7. Links: Have at least THREE links on your page.
8. Lists: You need ONE of each type of list on your page. Ordered, unordered,
and
definition list.
8. Misc: I want to see at least TWO different horizontal dividing lines. Also
use line breaks when necessary.

You might also like