Web Design Report: University Web Design Course - Final Assignment

This report provides an in-depth analysis of a web design project, focusing on the implementation of a travel guide website. It details the application of usability principles, such as learnability and efficiency, and accessibility considerations, including large text and responsive design. The report extensively covers the use of HTML5 semantic elements, including header, main, article, footer, nav, aside, img, and table, to structure and define the website's content. Furthermore, it examines the layout techniques employed, specifically CSS float properties and flexbox, and their roles in creating a responsive and user-friendly design. The student emphasizes a 'mobile-first' approach, demonstrating an understanding of modern web development practices. This report is a comprehensive overview of the technical and design considerations in building a functional and accessible website.

Name of University
Web Design
Student Name
Course Name
Submission Date

Introduction
The purpose of this report is to explain how usability, accessibility, HTML semantic elements
and layout techniques have been used in the implementation of this website.
Usability and accessibility
Usability entails designing a website or a system that is effective, efficient, and satisfying.
Usability encourages a user centred design that creates a positive user experience. The following
aspects of usability have been implemented in the design of the website.
i. Learnability: Basic navigations are clearly labelled. Menu names are also labelled in
simple language making it needless for all users to understand at the first glance.
ii. Efficiency: The website was developed using a “mobile first” approach whereby I
defined what I want on mobile and then scale up from there to desktop versions.
iii. Errors: Errors are mainly caused by user inputs. This website does not require any user
input thus eliminating errors.
Accessibility is all about making sure there is an equivalent user experience for people with
disabilities. In this web design, accessibility has been implemented by implementing large
readable text, making the website mobile devices friendly by making sure that the website is
responsive to different devices, and finally implementing less images with fluid design to cater
for people with low bandwidth connections or using older technologies.
HTML semantic elements
Semantics define the function and category of a web text. These semantic tags make the website
appear a lot more refined, complete and professional. The following HTML5 semantics are used
in this website development;
i. Header: Describes a header of the website. Users can always see the header at the top
of a web page.
ii. Main: This indicates space that has been set for the most important content of a
webpage
iii. Article: This is used to outline the article content on the website which is mainly
large parts of text.

iv. Footer: Describes the footnote for the website.
v. Nav: Indicates the space for navigation links on the website.
vi. Aside: Outlines the information which is to be put to the side of a webpage. This is
also used for creating sidebars and also for presenting content with minimal important
on a webpage.
vii. Img: Describes an area for an image
viii. Table: This element shows a table with rows and columns on a web page. It is a very
useful for grouping large amounts of data.
Layout techniques
This website has utilized two layout techniques –float properties and flexbox. CSS float
property is easy to learn but they are tied to the webpage flow which limits flexibility of the
webpages. For example the menu bar is floated to the right. Flexbox or CSS Flexible Box Layout
Module guarantees that elements work predictably when the webpage layout must accommodate
different screen sizes and different display devices. Even though flexbox layout does not work
in IE10 and earlier, it is very good when design a website with "mobile first" approach.