Sitemap
A sitemap, in simple terms, is a list of all the major elements contained within a website, and how they relate to each other. Creating a sitemap is helpful when developing the layout and structure of a website.
Visual Sitemap
A visual sitemap is created during the development of a website to assist with planning the layout and structure.
A visual sitemap is a diagram that depicts a website's information architecture; It helps designers and stakeholders visualize the website's layout and navigation paths. The information architecture of a website is defined by how that site is labeled and organized, to ensure ease of use and to maximize the user's ability to navigate it. In this context, sitemaps will visually represent where each page is located within a website, and how they are all connected. XML Sitemap
An XML sitemap is used to provide detailed information about a website to search engines, for the purpose of improving how the website is indexed and displayed in search results.
Lists every page within a website that is made available to search engines to facilitate search engine optimization. The list of pages in an XML sitemap will be ordered by priority and importance, and this ordering will also determine what is then prioritized by a search engine. The XML sitemap also provides information to the search engine regarding when each page was last updated, and how frequently it is updated Different XML sitemaps can be created to target videos, photos, and other elements on a website, so that search engines can correctly index and display this information if a relevant topic is searched for HTML Sitemap
A HTML sitemap can be incorporated into a website as a navigational element for the user.
The HTML sitemap also creates a list of the different pages on a website, but this type of sitemap is visually displayed on the website to provide users with a better understanding of the layout, and how to navigate within the site. HTML sitemaps should provide the user with a clear and simple understanding of the organization and structure of a website. Color and typography
Color and typography play a big role in the web design process as well. Colors in general are used for design, but they also convey meaning, which can greatly affect the user experience if designed and implemented correctly.
The same can be said for typography. Typography can display a sense of urgency and emotion if properly emphasized. Color
Choosing the color scheme carefully will determine what a user feels when they look at the web page. Using this to support a brand will increase the popularity of the brand, if managed correctly.
Color is known for conveying meaning, and depending on what color is used, that meaning will ultimately determine what is trying to be portrayed. Color is used to attract people to the website and the brand. A brand's website will have the same color scheme as its branding elsewhere. The colors will match so that people can recognize the branding, which allows them to feel the same type of happiness or joy that they do when dealing with the brand in other places Keep your color scheme simple, with a maximum of two or three colors Colors that influence purchase: black, orange, purple, and gray. Warm colors consist of red, yellow, and orange variants and they represent passion, happiness, energy, and comfort Cool colors consist of green, blue, and purple variants and are more subtle, representing calmness, trust, and professionalism Red: danger, importance, love. Red is known as the color of energy—simply looking at it can . It’s an excellent color for grabbing a visitor’s attention; try using it to highlight the most important elements on your page. Orange: energy, optimism, fun. Orange has a positive energetic vibe. It’s also , making it a good color for e-commerce stores if you want to highlight the best price. Yellow: happiness, attention, warmth. Yellow denotes a sunny disposition; when combined with black, it will quickly command attention. (Think about in NYC, for example.) Green: growth, success, nature. Green is fantastic for products that are close to nature. It’s also a popular color to use within user interfaces, giving users a signal that an operation completed successfully. Blue: trust, comfort, calmness. Blue represents relaxation and comfort. Brands love this color because it gives customers an impression of inner security. Purple: luxury, creativity, wisdom. Purple is usually linked to royalty as well as luxury products. Black: power, sophistication, mystery. Most brands limit black to text and accents. As a primary color, black may be prominent on fashion websites to convey a feeling of luxury. White: cleanliness, health, innocence. White usually makes us think of health and cleanliness. Designers typically choose this color to suggest a product’s safety, especially for medical equipment and high-tech products. Typography
Fonts are used to display content and express emotion. When displaying a message, choosing the right type of font, and even the right color, to make a topic stand out is significant to the reader and the message.
Fonts that are not easily readable can deter people; users are more likely to click off the website if the text is too hard to read. This is also why the font must be readable on the mobile site, to ensure overall functionality Readability is the most important. Web-safe fonts can be used on any browser and device. Therefore, the font and content will always be displayed in the desired format. Layout
Layouts define the structure of a website and affect where the content is displayed, the page order, and eventually the audience.
Audiences are drawn toward easy-to-use web pages, and this influences how developers design sites, based on both the user type and site purpose. In web design, there is a standard web page layout that most websites follow (MDN, n.d.). Any layout needs to have navigational items accessible and this is typically why navigational items can be found in the header and footer sections of a web page
A grid layout uses columns and a method called the rule of thirds to organize and place content.
The rule of thirds method consists of a three by three square that divides a page into nine equal sections.
A method in web design where a page is divided into a 3x3 grid and the most eye-catching elements of a page are decided. The grid can help you to identify the most common places on a page where most users will look first. White Space - Often referred to as “negative space,” or “open space,” white space is the space left between other elements of a page. Think of it as the adhesive that holds a mosaic together or the silence in music. Without it, things are left unstructured and cluttered. White space holds your design together and helps to shape the overall flow of the page. It’s an active element and a fundamental building block of good design. White Space does the following: Improve the Legibility of Text Create Focus and Emphasis Give an Impression of Luxury Wireframing
Wireframing uses mockups and prototypes to visualize and produce a product. The purpose of the wireframe is to show what a website will look like as a finished product, and will therefore guide the developer during the design process.
Wireframes help turn a conceptual idea into a skeleton outline of an interface. Wireframes are also known as schematics, and should be thought of as a blueprint for an interface.
It is an essential tool that is a speedy and low-cost way to bridge any communication gaps between the customer and the development team Try not to use colors and focus more on the making a skeleton of how the website will look. There are two types of wireframes:
could be an early conceptualization using pen and paper, a whiteboard, or post-it notes presents the prospective product on a high-tech level and includes a higher level of investment and functionality. Steps to create a wireframe
Wireframing should be the first step you take to depict what a web page may eventually look like. Wireframing can be important as it gives a first impression of what the interface will resemble:
User flows map out how the user will move throughout the website. Ex. Once a user gets to the landing page of an e-commerce site, they may want to search for a product, check out a product, and eventually purchase the product Create a minimalistic layout Flows are already understood at this point. This skeleton structure would include essential elements such as text boxes, tabs, multimedia elements, etc. This step is where the pen finally meets paper Decide fidelity level and fill in details add details from top to bottom and left to right add basic usability details such as the navigation bar or search bar add elements that you think will make it more convenient for customers, and see where they can best be placed 
Unit 5: Color, Typography, Layout & Wireframing
