UI/UX#
What is UI/UX?#
Wireframes#
visual blueprint of how the website works
also serves as a schema for system functionality
can sketch on paper, apps or any third-party websites
Sitemap#
gives website a direction to layout pages
usually start at home page as other pages stem from it
label most of the content for others to understand
draw lines to show how to navigate pages, usually from buttons and header items
- also create wireframes for other responsive devices, such as mobile and tablets
smaller width and longer length
different elements and buttons for interaction
items are usually collapsed into single column
Pages#
Home#
represent the design to be used on all the pages
- Header
contain navigation and menu
create section for the logo and menu
have consistent header for all pages
hero image: usually a slider image, behind the menu and near the header
- Information Section
represented with image, large title and descriptions
- Sponsors Section
similar column design
- Footer
contact form, site map and logo in reverse color with some contact info such as phone number and email
small copyright section at the bottom
have darker color for the footer to stand out
page can have fixed height and width, without scroll or parallax scroll
Features#
promote product or the website
make more interesting with photos, text and call to actions to engage users
- Header
contain navigation and menu
create section for the logo and menu
no hero image or slider required
have separate page title section
have consistent header for all pages
- Feature image sections
use large image and text to show off the products
have descriptions and services
use bullet points if needed
have slightly different design for each feature to be more interesting
- Footer
contact form, site map and logo in reverse color with some contact info such as phone number and email
have darker color for the footer to stand out
small copyright section at the bottom
have consistent footer for all pages
Contact#
usually smaller than other pages
only include necessary information
- Header
contain navigation and menu
create section for the logo and menu
no hero image or slider required
have separate page title section
have consistent header for all pages
- Info section
phone/email, contact form if not included in the footer, map
- Footer
contact form, site map and logo in reverse color with some contact info such as phone number and email
have darker color for the footer to stand out
small copyright section at the bottom
have consistent footer for all pages