Website Fundamentals and Features


Below is my first piece of work for my Web Design & Development.
Task 1 was a table on types of websites and what features are included

Website typeWhat the website is about/what does it include?Key features which might be in this type of website
InformationIt contains of information about a subject or multiple subjects it will include videos about the subject matter.It will contain multiple way for the website to covey information on the subject matter, through videos, slideshows, infographics, images, text or audio.
EducationInformation about educational subjects like maths and English.
It is for students to learn more when they are outside of school, college, or university.
Infographics, slide shows and videos about different educational subjects
Quizzes for students to test their knowledge before exams.
An educational website often has to be accredited or supported by an awarding body or an educational institution so the education they can be somewhat reliable in the information they provide.
E-CommerceThis type of website is for selling products to consumers. It will include information about the product it is trying to sell. It will also include advertising to encourage you to buy more of their product of an associated product.It will contain images and possibly videos of the product, it will contain text about the product and often a specification table about the product. It will then provide a way to purchase the product.
Providing a serviceA website like this may be a digital toolkit that may replace something that you can do in person.
This type of website could also be used connect people together and send information.
A website like D&D Beyond contains a toolkit to create PDFs of character sheets that you can print out it allows you to pick option and explain how those option affect your creation.
PortfolioThis type of website is a representation of a person, group or companies work that they want to use to show their talent and knowledge.Features of a portfolio include galleries or selections that include samples of the work of the individual or company. This can be photographs, paintings, digital art. It will also contain links to where to purchase the work or product.
EntertainmentAn entertainment website usually will consist of videos, audio, text or images that are designed to entertain people.
The most popular ones will be video sharing platforms.
YouTube is one of the most popular video sharing platforms. It allows people to upload and share videos between each other. It allows you to subscribe to people channels so that you are informed when they upload videos, this allows you to curate what content you want to see. YouTube also features a homepage that runs an algorithm that directed people to videos that they might like allowing them to expand what genre of video they watch.

Task 2 was an explanation on a specific website on what type of website and how it is used, I choose D&D Beyond.

My choice of website is D&D Beyond (dndbeyond.com). It fits into multiple categories of website as it has the features of a tool kit as well as being an information website. It has videos of people playing Dungeons and Dragons (D&D) so new players can get an idea of how it works and how people play. It features a library of sourcebook that you can access to improve your knowledge on D&D It features a character builder that draws on the information on the website and from what homebrew content people create. It contains other features like a shop to purchase digital copies of D&D sourcebooks and digital dice. It features a search bar so that you can find specific content out of a large quantity of information. The website is available in many languages so that people from any ethnicity can play D&D. It features a news section so that you can keep up to date with the latest from Wizards of the Coast (the owners of D&D). It has a lot of links to their presence on other platforms like YouTube and Twitch.

Below is a slideshow of screenshots of the D&D Beyond website. The first screenshot shows the D&D Beyond homepage it features eye catching links to their key features and news about D&D. It also has the search bar at the top so that you can quickly jump to the information you are looking for. The second screenshot shows the page you are taken to when you select create a character and it shows your options for creating a character to assist new players. The third screenshot shows the marketplace where you can purchase digital copies of the sourcebooks and adventure books.

Task 3 was to identify how and why different principles are used in the design of a website, again I choose D&D Beyond as my example.

Page layout is the placement of images and text to format a website.


It is used to give the reader a clear direction of reading and allow the reader to navigate through the website as the creator intended.

Typography is about how text looks and about its readability.


It is used in web design to make sure the text is on a readable background, in a legible font and is all consistent so it has consistent design language.

Colours are used to define object and text.

In web design colours are used to show different links and defining different type of text. A consistent colour palette helps keep a consistent design.

White space is empty space on webpage void of images and text. It does not need to be white but it is more commonly used.

White space defines text and creates natural break points in the reading. It also can help the reader focus on what is necessary on the page

Responsive features is where when the user navigates through the page an effect happens like more text popping in or an image appearing.
It is useful on a website as it allows more time for content to load in and it helps the readers brain process the incoming information and not overload them.

This is when the where icons or links change colour when hovered over to show that the are links.
It helps the user know when a link is present and when they are using a navigational feature.

The last task was to write an explanation of how and why different design principles are used in the design of a website. Again I choose D&D Beyond for my example.

The D&D Beyond website contains all aspects of website design. Its homepage is a clear example of this as it shows is clear design language and page layout from the start with it key feature on a ribbon on the top of the page follow by its key tools and then news from the world of D&D. It also starts its use of consistent colour usage. It shows good typography because it has to translate D&D sourcebooks into an online format which editors have spent hours working of the readers flow through the book. Most of the text consistency has been done for them as it is taken from a published book. The website tries to portray the effect of reading an old book by giving the background a tea-stained look and making the text black to stand out against this background. It also sections that stand off the page with a different background colour as these are examples of scenarios of playing D&D. Its usage of colour continues on the Races page in is uses or red and black. This page has brief descriptions and key feature of each race with name so the sources and the name of the race in bold. It features drop down menus so that you can eliminate sources that you do not have access to or do not want to use It then uses key colours from the source book used so that someone who knows the book can quickly identify that they want that section. Its use of white space is effective to make sure the reader is able to focus on the text and is not overwhelmed. It also has a secondary effect that make the website translate easier into a mobile format. It navigational effects and responsive features are wide ranging across the website. A drop-down menu that appears off the main navigation ribbon to show other tools under a subcategory. Within the sourcebook section you have tables of contents on the left side of the page to allow for easy navigation through the lengthy sourcebooks, the links will change colour when hovered over so you know which you are selecting.


Leave a comment