Web_Dev_Grad

Before diving into coding, it's best to have a solid plan in place to keep your website's purpose clear, ensure a well-thought-out layout, and helps you stay organized. This will help avoid confusion later. In this section, I'll walk you through the 5 stages of UX/UI design to streamline your website development journey and make the process a breeze, giving examples of how I used each section to create the very website you are currently on.

These stages aren't set in stone. While they're designed to guide your ideas from concept to reality, there's often some backtracking involved as new features or improvements emerge. When designing your website, don't worry if you only have a few ideas early on. Just work through the stages, and you'll likely come across fresh perspectives or better ways to bring your ideas to life along the way.

This is where we tackle the big questions: "What value does my website provide?" and "Who is it for?" It's all about brainstorming, identifying key requirements, and assessing the feasibility of your ideas. Think of it as laying the foundation for everything to come.

Think of this as the blueprint for your website, laying a solid foundation that will influence every decision that follows. By clearly defining the website's purpose and target audience early on, you ensure that the final product aligns with your objectives and meets the needs of your users.

Key Questions

In order to produce a worthwhile and functional website, we must first ask ourselves (and answer) the following questions.

1. What value does the project provide?
   Consider the core purpose of your website. Does it address a gap in the market, offer a unique solution, or provide a more user-friendly version of an existing site? Think about what sets it apart and how it benefits users.
2. What are the business needs?
   Is this website for a business or organization? If so, what value will it bring to the business? This could range from enhancing the company's online presence to driving key business functions. For example, a hotel website can simplify the booking process, automatically update room availability, and collect valuable booking data, helping the hotel adapt to demand and address factors that influence its popularity. Consider how the website's features align with and support the business's core objectives.
3. Who is the target audience?
   Think about the specific audience you want to serve. This could be a particular demographic, such as hobbyists for a niche, hobby-centric site, or a broader audience that spans multiple demographics. Consider who will find the most value in your website's content, features, and functionality, and keep their needs and interests in mind when designing your site.
4. What are the user requirements and expectations?
   When users access your site, they expect smooth and intuitive interactions. Consider whether features like an authentication system with user accounts, login/logout functionality, and secure password handling are necessary for your site's purpose. Security is also key. Ensure data protection and safe handling of personal information. Additionally, think about smaller interactive elements that improve usability, such as clickable links that change the mouse cursor on hover, or animated links that adjust in boldness or colour to indicate they are interactive. These features enhance the user experience, making navigation intuitive and engaging. Security and usability should go hand in hand, providing both ease of use and protection for your visitors.

An example of this might look like:

What values does the project provide?	The website provides a valuable resource for the developer to layout their knowledge in a structured way and proving their knowledge through the creation of the website itself. As a secondary function, it provides information about website development concepts through clear, structured content for others who are learning the subject.
What are the business needs?	Not applicable, this is a website for primarily personal use.
Who is the target audience?	The primary target audience is the developer themselves to document their knowledge, test their skills, and create a personal knowledge base. Additionally, it will be used in their portfolio to highlight their website development skills.
What are the user requirements and expectations?	Users would expect to find structured and easily navigable content, including well-organized and clear explanations and examples to help convey key concepts. Any external links should open in a separate browser tab, providing good user experience by keeping the website open. Any videos or music should not automatically play, as that provides an annoyance to users who may have other music/videos playing in the background or who do not wish to watch or listen to the content. Clickable links should display a clear change when hovered to highlight their interactivity and the mouse cursor should change where appropriate.

Viability and Feasibility

When deciding what to include in your website, it's essential to weigh the importance of each feature against how feasible it is to implement. A great way to do this is by creating a table where you rank each feature on a scale of 1 to 5 for importance and feasibility (1 being low, 5 being high).

Here's how you can prioritise features based on their rankings:

• High Importance & High Feasibility (5/5): These should be your top priority, as they are crucial and achievable.
• High Importance & Medium Feasibility (4/3): These are still important, so aim to implement them, but be mindful of any challenges in execution.
• Low Importance & High Feasibility (1/5): These can be added if they improve the user experience, but they're not a must-have.
• High Importance & Low Feasibility (5/1): These are essential, but might be difficult to implement. They should be attempted if they are critical to your site's purpose, though be prepared for challenges or the need for external help.
• Low Importance & Low Feasibility (1/1): Save these for later, if time and resources allow, once more critical features are in place.

This approach ensures you focus on the most impactful features first while managing your resources effectively.

An example of this might look like:

Task/Feature	Importance	Viability/Feasibility
A home screen displaying a clear purpose	5	5
Intuitive web design allowing users to easily use your website	5	5
A responsive website that displays well on various size screens and devices	5	5
An accessible website that is usable for users with a range of concerns	5	5
Clear error pages that help direct the user back to the website	5	5
Safe and secure external links	5	5
Links that have animations or hover effects to highlight their functionality	5	5
Loading icons when large pages load	3	3
Available PDFs highlighting key information per section	2	4

Here, we refine the ideas from the Strategy stage and determine the specifics needed to achieve our goals, both on the front end and back end. This involves breaking the website into sections and organising requirements across web pages and databases.

Front-end

Here, you can outline the features needed for each page of the website to meet the requirements identified during the strategy stage, as well as any additional features you think of along the way. If new ideas come to mind, don't hesitate to revisit your viability and feasibility matrix to incorporate them.

For clarity, organise these features as a list for each proposed template or page. For example, on the homepage of this website, I planned to include a section introducing users to the site, along with a brief description of what they can expect from the site. This ensures that every page has a clear purpose and supports the overall goals of the project.

Here is an example of a couple of templates that I proposed in the Scope section of a hotel management website:

• base.html: This will be the base template that the others call from to ensure a cohesive structure across the website. It will have:
  • All the header meta information
  • Links to styling and JavaScript scripts
  • The header with the site logo, a booking form, and account navigation links
  • The footer with the hotel social media links, hotel contact information, the site logo, and developer contact information
• index.html: This will act as the website homepage. It will have:
  • Navigation links for the different sections on the page
  • A large hero image and text welcoming the user to the website
  • A booking form
  • Resort information and images
  • Service information and images
  • Location information with a google maps widget
  • Hotel FAQs
  • A carousel of reviews if available

Back-end

For static websites or those built primarily with JavaScript frameworks that don't rely on server-side processing, a back end may not be necessary. Static websites are ideal for simple use cases, such as portfolios, informational pages, or marketing sites, where all the content is preloaded and frequent updates or dynamic interactions are not required. In these scenarios, everything users see and interact with is rendered directly in their browser without the need for server-side processing or databases.

However, a back end becomes necessary when a website requires more advanced functionality. Here are some common situations where a back end is needed:

• Data Storage and Management:
  • If your website needs to store user data, such as account details, preferences, or submitted forms, a database is required. The back end serves as the interface between the website and the database, ensuring data is securely stored, retrieved, and updated.
• Dynamic Content:
  • For sites that display personalized or frequently changing content—like user dashboards, news feeds, or product catalogues, a back end processes requests and retrieves the necessary data from a database to serve to users dynamically.
• Authentication and Authorization:
  • Websites with login systems, such as social networks, e-commerce platforms, or membership sites, require a back end to handle user authentication (verifying identities) and authorisation (managing permissions).
• Processing and Logic:
  • If your website includes complex operations, such as generating reports, running algorithms, or processing payments, the back end executes this logic securely and efficiently, ensuring the front end remains lightweight.
• Integration with APIs and Services:
  • When a site needs to interact with third-party services, such as payment gateways (e.g., Stripe), social media platforms, or analytics tools, the back end acts as a bridge between the front end and these external APIs.

If a back-end is required for your website, it's crucial to define the structure of your databases and the relationships between their various components. This ensures that data is organised efficiently and interactions between different parts of the system are clearly understood. A step towards that starts in your scope. Here list what models (tables) you will need in your database, what purpose they serve, and what fields (column titles) they will need. For example User and Profile models may look like:

• User: A Django model that will be updated using Django AllAuth and consisting of a number of fields that will not be queried or used in the project. The fields of note will be: ID, email, password, is_superuser (for admin privileges on the site).
• Profile: This will handle the user profile data. The fields will be: ID, User (foreign key; one to one), newsletter (True if signed up to a newsletter), and the information fields required for stripe such as first and last names, address information and contact details etc.

In this stage, we take the ideas from the Scope and break down the requirements for each page into individual features that fulfil the page's purpose. If databases are needed, we create blueprints to structure how the data will be stored and accessed. We also map out the overall site structure, designing a site map that outlines how users will navigate between pages. Additionally, we consider how users will interact with the website to ensure a seamless and intuitive experience.

Templates

For the front end pages you can list your individual pages or templates and add a bullet point list to each describing features that are needed and what each feature will consist of. Look back on your Scope and Strategy, highlighting which features in your viability and feasibility table are being included and how requirements from your Scope are being met. As mentioned before, this is a fluid process so if you think of extra features that will need to be included, be sure to go back and add them into your Strategy and Scope sections. For example the structure of a base.html template may look like:

• As this is the base template, it will need to include the site-wide navigation bar and footer
• The navigation bar will meet the requirement for intuitive and responsive navigation, consisting of a site logo and account links. When logged out the links will be to Sign Up / Login. When logged in the links will be to Account Settings / Logout. When logged in as a Super User the links will be to Website Administration / Account Settings / Logout
• The footer will meet the requirement for the website and developer contact information and will consist of social media links, contact information for the website and developer, and site logo

Information Architecture

In the Structure section you should also include some information architecture. This is aimed at describing the layout of the back-end of your webapp. Create an ERD that consists of interconnected Models (for a relational database) highlighting what fields are required including their name, if they are a primary or foreign key, and their field type. From here you can link together primary and foreign keys (for a relational database) for a good visual representation of your database. The individual tables will generally take the form of:

Table/Model Name
Primary Key	primary_key_name	Integer
Foreign Key	foreign_key_name	OneToOneField
None	example_email_field	EmailField

You can create ERDs using LucidChart where you can create a new diagram from a template using the Database ER Diagram (Crow's Foot) template for a quick start. Here is an example of a finished ERD for my hotel management web app.

With the ERD complete, make sure you take some time to write out the explanation of and reasoning behind it. Make it clear and to the point highlighting key points in each of the models. For example my reasoning behind the above ERD looks like:

• The relational database will consist of 6 relationally linked tables
• The User model will use the Django user model and AllAuth to store authentication data including the email address and password
• The UserProfile model will have a foreign key to the User model set up in a way as to delete the Profile when the User is deleted. It also has a boolean field for the user to sign up to a newsletter and will have all the contact information required by stripe to complete the booking reservation form
• The Trip model will house the information for each trip. It will be linked with the UserProfile model and Room model via foreign keys in many to one relationships. It will have the data for the start date, end date, number of each guest type, cost, and a Boolean field to notify whether the user will cancel the trip. This will be set to False by default
• The Room model will have all the information for the Rooms, this includes the room name, a sanitised room name for display on the website, a description of the room, a list of amenities as a list of integers referring to the ids in the Amenities model, an image of the room, the nightly price, a list of dates in which the room is unavailable
• The Amenities model will hold information of the amenities. It is referenced from the Room model but set up in a simple easy to understand way rather than a many to many relationship. Each amenity has an ID, name, sanitised name, and an icon which will consist of the HTML for the Font Awesome icon. These amenities can be accessed by looping through the is numbers in the Room model amenities field
• The Order model will hold the information for the orders. It has a foreign key relationship to the UserProfile model in a one to many relationship, allowing multiple orders by the same user. It houses all the information required by stripe to process the order including address information and a stripe payment ID

Interactive Experience

Another key part of the Structure section is to define how your website will react to interaction by the user. This usually takes the form of some bullet points detailing interaction key points so that they are kept in mind when building the website. The main ones will be:

• Clickable links will have animated effects on hover or click, providing clear feedback to the user that they are hovered over a link and that their click has been acknowledged
• All external links will open in a new tab. This is standard practice for a good experience
• Content hinting will be used where possible to influence the user to scroll down and uncover new content on the pages

With all proposed features in mind, we create wireframes (Visual blueprints of a website's layout, showing structure and key features) for key pages and functionalities. Wireframes help visualize the website's layout, identify any missing elements, and ensure a design that is both visually appealing and user-friendly. I use Balsamiq but any way you want to make them is valid including using Microsoft paint or even just with pen and paper. The key takeaway here is that you try to include all of the feasible functionalities and content that you have proposed in the earlier stages.

You will want to make separate wireframes for your desktop site and mobile site, highlighting the responsiveness of your webapp.

Below are some example wireframes for a children's toy based social media site for a page displaying all the toys in the database.

The surface stage is where we can let our creativity take the spotlight. We craft the website's visual identity, starting with a carefully selected colour scheme that reflects the brand and enhances user experience. The right typefaces are chosen to ensure readability and align with the site's tone, while common elements like buttons, links, and icons are designed to be both functional and aesthetically pleasing. This stage brings the wireframes to life, adding personality and ensuring the site's look and feel are consistent across all pages.

As stated above, we can start with the colour scheme. It's probably best to start with 2 or 3 colours that people can associate with your brand and then add some extras for highlights or focussing sections on your website. Some extra information of colour theory can be see here on the colour theory page. With your chosen colours, you can create a palette on Coolers to end up with something like:

It's also best to include here a list of each colour chosen and what you have used them for in your site for a quick reference guide. This comes in handy if you were to change some of colours during development allowing you to be sure that you have updated everything to the new colour.

Next up is typography and fonts. Typography pertains to how your text looks, such as Times New Roman or Arial, whereas font refers to the combination of typography, size of the text, letter spacing and any decoration such as bold or underlined, all combined together. You can find free typefaces to use on the Google Fonts website. In this section I tend to include a link to my chosen typeface, an image of what it looks like, and a description of the typeface along with how it will be utilised across my website and also the backup fonts you will use. This might look like:

Jost Regular

https://fonts.google.com/specimen/Jost?query=jost

This is my selection for headings across the website. Inspired by the 1920's German sans-serif; Jost is an elegant and legible font that portrays history and excellence. This makes it a great choice for headings and titles across the website. As a sans-serif font, the backup fonts were Arial, Helvetica, and sans-serif.

The last part of this section is to highlight your use of images in your site. If they are your own you can describe them and credit yourself, otherwise credit the creator and add in a link to their work or where you found the image.

For a template of the five stages of UX/UI, have a look here at the template for the entire readme.md file.