An information design website plan for a mock company called " Basements and Barbells." This presentation covers everything from the stakeholder and user demographics to user personas.
The usability test identified several problems with the photo editing app AirBrush:
1. Users were confused about saving photos and accessing recently taken photos.
2. The flow between taking a photo, editing, and sharing was not clear or intuitive.
3. Some icons and features were misleading or unclear in their purpose.
The team proposed solutions to improve the transparency of saving, streamline the editing and sharing flow, simplify camera settings, allow editing multiple photos, and make sharing photos more prominent. These changes aim to reduce confusion and friction for users. A revised prototype was created and additional testing was recommended.
The document discusses the importance of navigation design for websites. Effective navigation allows users to understand where they are within the site, what else is available, and how to find needed information. Key aspects of navigation include menus, site maps, breadcrumbs, and search functions. Navigation elements should be obvious, consistent, easy to use, and minimize space on pages. The goal is to help users efficiently chart their course through a website to find desired content.
Content Management & Page Structure - Best Practices for Structuring Content ...D'arce Hess
Presented at SPTechCon Boston 2016. This presentation is a base line for end-users and business users to be able to structure content in SharePoint and O365 without needing to be a developer or designer.
BCG has proposed a design and deployment plan for CSIC's new corporate website and mobile app over a 96 day period beginning in March. The proposed site map includes 22 pages organized hierarchically. Mockups were provided for the homepage and interior pages, showing elements like navigation, images, services/location buttons, calls to action, and consistent branding. Two blog designs and a locations page with interactive map were also proposed. The mobile app would maintain the same style and content as the full site for accessibility.
The document discusses various aspects of web design, including:
1. Four steps to user-centered design: focus on the user's goals, provide intuitive pathways, follow conventions, and test designs.
2. Four types of web conventions: navigation systems, icons, placement on the page, and color.
3. Factors to consider when designing for different systems like platforms, browsers, and monitor capabilities.
4. Six common ways to organize a website, such as by category, task, user, language, date, or corporate department.
This document is a summer project report by Rahul Kumar on creating a dashboard application using Bootstrap. It includes an acknowledgements section, table of contents, and sections introducing dashboards and their purpose, Bootstrap framework, FusionCharts, steps to create the application in Visual Studio, and a conclusion. The report provides details on the project completed to fulfill BTech degree requirements, under the supervision of Akriti.
The document discusses navigation and flow in user interfaces. It defines different types of navigation including lateral, forward, and reverse navigation. It also discusses using navigation to help users find information and complete tasks through an app or website. Navigation is enabled through components, embedded behaviors, and platform affordances. User flow diagrams can help visualize the paths users take to complete tasks and understand the logical flow of interactions in an interface.
The usability test identified several problems with the photo editing app AirBrush:
1. Users were confused about saving photos and accessing recently taken photos.
2. The flow between taking a photo, editing, and sharing was not clear or intuitive.
3. Some icons and features were misleading or unclear in their purpose.
The team proposed solutions to improve the transparency of saving, streamline the editing and sharing flow, simplify camera settings, allow editing multiple photos, and make sharing photos more prominent. These changes aim to reduce confusion and friction for users. A revised prototype was created and additional testing was recommended.
The document discusses the importance of navigation design for websites. Effective navigation allows users to understand where they are within the site, what else is available, and how to find needed information. Key aspects of navigation include menus, site maps, breadcrumbs, and search functions. Navigation elements should be obvious, consistent, easy to use, and minimize space on pages. The goal is to help users efficiently chart their course through a website to find desired content.
Content Management & Page Structure - Best Practices for Structuring Content ...D'arce Hess
Presented at SPTechCon Boston 2016. This presentation is a base line for end-users and business users to be able to structure content in SharePoint and O365 without needing to be a developer or designer.
BCG has proposed a design and deployment plan for CSIC's new corporate website and mobile app over a 96 day period beginning in March. The proposed site map includes 22 pages organized hierarchically. Mockups were provided for the homepage and interior pages, showing elements like navigation, images, services/location buttons, calls to action, and consistent branding. Two blog designs and a locations page with interactive map were also proposed. The mobile app would maintain the same style and content as the full site for accessibility.
The document discusses various aspects of web design, including:
1. Four steps to user-centered design: focus on the user's goals, provide intuitive pathways, follow conventions, and test designs.
2. Four types of web conventions: navigation systems, icons, placement on the page, and color.
3. Factors to consider when designing for different systems like platforms, browsers, and monitor capabilities.
4. Six common ways to organize a website, such as by category, task, user, language, date, or corporate department.
This document is a summer project report by Rahul Kumar on creating a dashboard application using Bootstrap. It includes an acknowledgements section, table of contents, and sections introducing dashboards and their purpose, Bootstrap framework, FusionCharts, steps to create the application in Visual Studio, and a conclusion. The report provides details on the project completed to fulfill BTech degree requirements, under the supervision of Akriti.
The document discusses navigation and flow in user interfaces. It defines different types of navigation including lateral, forward, and reverse navigation. It also discusses using navigation to help users find information and complete tasks through an app or website. Navigation is enabled through components, embedded behaviors, and platform affordances. User flow diagrams can help visualize the paths users take to complete tasks and understand the logical flow of interactions in an interface.
The document describes the development of an educational website for students. It includes 6 main pages: Home, Study Ads, Topics, Gallery, Contact, and About Us. HTML, CSS, and JavaScript were used to design and style the pages. The Home page welcomes visitors and outlines the site's goals. Study Ads links to other educational sites. Topics allows searching by subject. Gallery shares photos. Contact has a sign-in form. About Us provides information on the creator. Screenshots demonstrate the wireframes, buttons, and content for each page. CSS styling was added for colors, images, headings, and text. The website aims to be helpful, understandable, and provide a friendly environment for students.
Technology Plan for new 4SiteStudios.comRiché Zamor
A user can see various visual representations and information on the homepage of a website for a design studio called 4Site, including recent projects, services offered, a video, blog posts, tweets, and options to sign up for the newsletter or contact 4Site. Navigation menus allow users to access other internal pages for projects, services, products, and contact information. Interactive elements and forms allow users to learn more about specific topics or contact 4Site directly.
The document provides a critique of the website www.v8supercars.com.au/drivers/driverdetails.asp?DID=233 about Australian racing driver Jamie Whincup. The summary identifies the purpose of the site is to provide information about Jamie Whincup and his racing career to fans and spectators. The critique evaluates the site based on 7 criteria: ease of use, navigation, cognitive load, information design, screen design, media, and usability. Overall, the site received positive reviews for having a simple, intuitive interface that clearly communicates its purpose and allows users to easily access relevant information about the driver through effective navigation and organization of content.
Joomla Day Austin Texas 2011 - Part 1 features Jen Kramer, Cory Webb, Andy Miller and Kyle Ledbetter presenting Joomla site planning and template design
The document summarizes a website called "A Love Supreme" and discusses how its design could be applied to a magazine. The website uses a simple and clear layout that is easy to navigate. It also features a red and white color scheme that appeals to football fans and associates the site with its club. Additionally, the website links to other social media platforms, which creates connections between different types of media and raises awareness of the product.
This document provides guidelines for building a user-friendly website with four key concepts: usability, adherence to standards, engagement of users, and consistency. It emphasizes making the site intuitive to use through clear information architecture and navigation. Standards like intuitive linking, use of white space, and consistent styling of elements like tables and documents are covered. The importance of concise, scannable content that simplifies information for users is also discussed. Maintaining consistency across all design elements throughout the site is stressed.
Live world pov on facebook product changes mar5 2012LiveWorld
Facebook announced new features for brands at its February 29th marketing conference including enhanced pages with cover photos and messaging, timeline profiles for richer storytelling, personalization of brand pages, new advertising options like offers and reach generator, and insights for analyzing engagement. LiveWorld recommends that brands embrace these new tools, continue creating engaging content, and pilot the new distribution methods while planning adequate resources.
The document provides details about a UX designer and their experience and design process. It then summarizes two projects the designer worked on:
1) A redesign of MSN's "My MSN" portal website. The goal was to update the look and improve usability. Wireframes and mockups were created and modules were developed.
2) Redesigning the signup process for Microsoft Online Services trials. The original process took over 70 clicks to complete. The redesign simplified the process and provided immediate access to services.
The document summarizes the results of a usability study conducted on the Cornell Alumni Magazine website. The study included a preliminary analysis of the old and new websites, an online survey of 258 alumni, and in-depth usability testing with 7 participants. The survey found that most respondents were aged 61-70 and preferred the new website over the old one. However, usability testing revealed issues with the navigation, advertisements, and finding articles. Suggested improvements included optimizing the navigation and layout of content. The study provided insights to help improve the user experience of the redesigned website.
My final deliverable for the Moodle redesign project - a (3,000 word) report detailing all the proposed changes for the existing Moodle system.
The report goes through all the details, large and small, going through my motivations, inspiration and intentions of the whole project. There are visual depictions inserted to aid the points made, and in-depth written analyses of current features, alongside changes that are to be made.
The document provides an analysis of the existing Taylor County Boondocks Mud Park website and proposes a redesign. It summarizes the current site's strengths as having easy navigation and relevant information, but weaknesses as high contrast, disorganization, and redundant content. The proposed redesign aims to improve organization, balance, and use of focal points through a clean grid layout with consistent headers, footers, and colors. User testing revealed the need for more contrast between the navigation and header background as well as improved readability of the logo and navigation text.
The document discusses various aspects of designing an effective website, including analyzing content and target audiences, organizing site structure and navigation, and implementing design elements. The key steps outlined are to analyze content and audience needs, organize the site structure into main sections and subsections, and implement an intuitive navigation system to help users easily find relevant information. Maintaining and optimizing the site over time are also emphasized.
The style guide outlines design guidelines for the Scissor Kicks website to promote a consistent brand and user experience. It details navigational elements, layout, colors, fonts, and other specifications to create a clean, accessible site that encourages return visits and product sales. Requirements include using specific colors and fonts, limiting text length, and prioritizing usability on different devices through responsive design. The objective is to represent the company as a credible source for soccer gear through an organized, easily navigable site.
MingleSpot is a social networking website that allows users to connect with friends, search for people with shared interests, and join online communities. Key features include user profiles, searching for friends and adding them, asking and answering questions, creating and participating in polls, joining or creating interest groups, sharing opinions, finding local information, and sending messages to connections. The goal is to make it easy for users to stay connected with friends and family, meet new people, and grow their business networks. Technologies used include Java, servlets, JSP, and JavaScript.
MingleSpot is a social networking website that allows users to connect with friends, search for people with shared interests, and join online communities. Key features include user profiles, searching for friends, asking and answering questions, creating and participating in polls, joining or creating interest groups, sharing opinions, accessing local information, and sending messages to connections. The website aims to help users stay connected with existing contacts and make new connections. Technologies used include Java programming languages and related tools.
The document provides information on website design including:
1) It discusses the different steps involved in website design including analyzing content and audience, organizing navigation and structure, and developing pages and layout.
2) It outlines various types of website navigation structures like linear, database, and hierarchical and explains how content can be organized for each.
3) Key aspects of website design like audience analysis, content planning, and usability are covered to help create an effective site.
The document summarizes a final website portfolio project for a botany archives site documenting a family's gardening activities. The goals are to create a publicly accessible archives that allows users to search by plant or year and provide feedback. The intended audience is the family and local community. It provides educational and inspiring content while encouraging gardening and botanical education. The site aims to build a virtual community for local gardeners through a minimalistic design that focuses on searchability and records of family gardening activities.
The document summarizes a final website portfolio project for a botany archives site documenting a family's gardening activities. The goals are to create a publicly accessible archives that allows users to search by plant or year and leave feedback. The intended audience is the family and local community. It provides educational and inspiring content while encouraging gardening and botanical education. The site aims to build a virtual community for local gardeners through a minimalistic design that focuses on searchability and records of family gardening activities.
The document describes the development of an educational website for students. It includes 6 main pages: Home, Study Ads, Topics, Gallery, Contact, and About Us. HTML, CSS, and JavaScript were used to design and style the pages. The Home page welcomes visitors and outlines the site's goals. Study Ads links to other educational sites. Topics allows searching by subject. Gallery shares photos. Contact has a sign-in form. About Us provides information on the creator. Screenshots demonstrate the wireframes, buttons, and content for each page. CSS styling was added for colors, images, headings, and text. The website aims to be helpful, understandable, and provide a friendly environment for students.
Technology Plan for new 4SiteStudios.comRiché Zamor
A user can see various visual representations and information on the homepage of a website for a design studio called 4Site, including recent projects, services offered, a video, blog posts, tweets, and options to sign up for the newsletter or contact 4Site. Navigation menus allow users to access other internal pages for projects, services, products, and contact information. Interactive elements and forms allow users to learn more about specific topics or contact 4Site directly.
The document provides a critique of the website www.v8supercars.com.au/drivers/driverdetails.asp?DID=233 about Australian racing driver Jamie Whincup. The summary identifies the purpose of the site is to provide information about Jamie Whincup and his racing career to fans and spectators. The critique evaluates the site based on 7 criteria: ease of use, navigation, cognitive load, information design, screen design, media, and usability. Overall, the site received positive reviews for having a simple, intuitive interface that clearly communicates its purpose and allows users to easily access relevant information about the driver through effective navigation and organization of content.
Joomla Day Austin Texas 2011 - Part 1 features Jen Kramer, Cory Webb, Andy Miller and Kyle Ledbetter presenting Joomla site planning and template design
The document summarizes a website called "A Love Supreme" and discusses how its design could be applied to a magazine. The website uses a simple and clear layout that is easy to navigate. It also features a red and white color scheme that appeals to football fans and associates the site with its club. Additionally, the website links to other social media platforms, which creates connections between different types of media and raises awareness of the product.
This document provides guidelines for building a user-friendly website with four key concepts: usability, adherence to standards, engagement of users, and consistency. It emphasizes making the site intuitive to use through clear information architecture and navigation. Standards like intuitive linking, use of white space, and consistent styling of elements like tables and documents are covered. The importance of concise, scannable content that simplifies information for users is also discussed. Maintaining consistency across all design elements throughout the site is stressed.
Live world pov on facebook product changes mar5 2012LiveWorld
Facebook announced new features for brands at its February 29th marketing conference including enhanced pages with cover photos and messaging, timeline profiles for richer storytelling, personalization of brand pages, new advertising options like offers and reach generator, and insights for analyzing engagement. LiveWorld recommends that brands embrace these new tools, continue creating engaging content, and pilot the new distribution methods while planning adequate resources.
The document provides details about a UX designer and their experience and design process. It then summarizes two projects the designer worked on:
1) A redesign of MSN's "My MSN" portal website. The goal was to update the look and improve usability. Wireframes and mockups were created and modules were developed.
2) Redesigning the signup process for Microsoft Online Services trials. The original process took over 70 clicks to complete. The redesign simplified the process and provided immediate access to services.
The document summarizes the results of a usability study conducted on the Cornell Alumni Magazine website. The study included a preliminary analysis of the old and new websites, an online survey of 258 alumni, and in-depth usability testing with 7 participants. The survey found that most respondents were aged 61-70 and preferred the new website over the old one. However, usability testing revealed issues with the navigation, advertisements, and finding articles. Suggested improvements included optimizing the navigation and layout of content. The study provided insights to help improve the user experience of the redesigned website.
My final deliverable for the Moodle redesign project - a (3,000 word) report detailing all the proposed changes for the existing Moodle system.
The report goes through all the details, large and small, going through my motivations, inspiration and intentions of the whole project. There are visual depictions inserted to aid the points made, and in-depth written analyses of current features, alongside changes that are to be made.
The document provides an analysis of the existing Taylor County Boondocks Mud Park website and proposes a redesign. It summarizes the current site's strengths as having easy navigation and relevant information, but weaknesses as high contrast, disorganization, and redundant content. The proposed redesign aims to improve organization, balance, and use of focal points through a clean grid layout with consistent headers, footers, and colors. User testing revealed the need for more contrast between the navigation and header background as well as improved readability of the logo and navigation text.
The document discusses various aspects of designing an effective website, including analyzing content and target audiences, organizing site structure and navigation, and implementing design elements. The key steps outlined are to analyze content and audience needs, organize the site structure into main sections and subsections, and implement an intuitive navigation system to help users easily find relevant information. Maintaining and optimizing the site over time are also emphasized.
The style guide outlines design guidelines for the Scissor Kicks website to promote a consistent brand and user experience. It details navigational elements, layout, colors, fonts, and other specifications to create a clean, accessible site that encourages return visits and product sales. Requirements include using specific colors and fonts, limiting text length, and prioritizing usability on different devices through responsive design. The objective is to represent the company as a credible source for soccer gear through an organized, easily navigable site.
MingleSpot is a social networking website that allows users to connect with friends, search for people with shared interests, and join online communities. Key features include user profiles, searching for friends and adding them, asking and answering questions, creating and participating in polls, joining or creating interest groups, sharing opinions, finding local information, and sending messages to connections. The goal is to make it easy for users to stay connected with friends and family, meet new people, and grow their business networks. Technologies used include Java, servlets, JSP, and JavaScript.
MingleSpot is a social networking website that allows users to connect with friends, search for people with shared interests, and join online communities. Key features include user profiles, searching for friends, asking and answering questions, creating and participating in polls, joining or creating interest groups, sharing opinions, accessing local information, and sending messages to connections. The website aims to help users stay connected with existing contacts and make new connections. Technologies used include Java programming languages and related tools.
The document provides information on website design including:
1) It discusses the different steps involved in website design including analyzing content and audience, organizing navigation and structure, and developing pages and layout.
2) It outlines various types of website navigation structures like linear, database, and hierarchical and explains how content can be organized for each.
3) Key aspects of website design like audience analysis, content planning, and usability are covered to help create an effective site.
The document summarizes a final website portfolio project for a botany archives site documenting a family's gardening activities. The goals are to create a publicly accessible archives that allows users to search by plant or year and provide feedback. The intended audience is the family and local community. It provides educational and inspiring content while encouraging gardening and botanical education. The site aims to build a virtual community for local gardeners through a minimalistic design that focuses on searchability and records of family gardening activities.
The document summarizes a final website portfolio project for a botany archives site documenting a family's gardening activities. The goals are to create a publicly accessible archives that allows users to search by plant or year and leave feedback. The intended audience is the family and local community. It provides educational and inspiring content while encouraging gardening and botanical education. The site aims to build a virtual community for local gardeners through a minimalistic design that focuses on searchability and records of family gardening activities.
Rethinking Kållered │ From Big Box to a Reuse Hub: A Transformation Journey ...SirmaDuztepeliler
"Rethinking Kållered │ From Big Box to a Reuse Hub: A Transformation Journey Toward Sustainability"
The booklet of my master’s thesis at the Department of Architecture and Civil Engineering at Chalmers University of Technology. (Gothenburg, Sweden)
This thesis explores the transformation of the vacated (2023) IKEA store in Kållered, Sweden, into a "Reuse Hub" addressing various user types. The project aims to create a model for circular and sustainable economic practices that promote resource efficiency, waste reduction, and a shift in societal overconsumption patterns.
Reuse, though crucial in the circular economy, is one of the least studied areas. Most materials with reuse potential, especially in the construction sector, are recycled (downcycled), causing a greater loss of resources and energy. My project addresses barriers to reuse, such as difficult access to materials, storage, and logistics issues.
Aims:
• Enhancing Access to Reclaimed Materials: Creating a hub for reclaimed construction materials for both institutional and individual needs.
• Promoting Circular Economy: Showcasing the potential and variety of reusable materials and how they can drive a circular economy.
• Fostering Community Engagement: Developing spaces for social interaction around reuse-focused stores and workshops.
• Raising Awareness: Transforming a former consumerist symbol into a center for circular practices.
Highlights:
• The project emphasizes cross-sector collaboration with producers and wholesalers to repurpose surplus materials before they enter the recycling phase.
• This project can serve as a prototype for reusing many idle commercial buildings in different scales and sizes.
• The findings indicate that transforming large vacant properties can support sustainable practices and present an economically attractive business model with high social returns at the same time.
• It highlights the potential of how sustainable practices in the construction sector can drive societal change.
2. TABLE OF CONTENTS
Stakeholder Overview……………………………………3-6
User Demographics……………………………………....7-8
User Personas/scenario…………………………..........9-12
Content Specifications…………………………..........13-18
Features/Content Tables………………………...........19-20
Architectural Map…………………………………………..21
Wireframes……………………………….....................22-23
Style Guide…………………………………………………..24
Mock-ups………………………………………………...25-27
Sources……………………………………………...............28
3. STAKEHOLDER ID, HISTORY,
& REASON FOR PROJECT
Jim Ferdaise is a fitness professional and the CEO of Basements
and Barbells, a local fitness center. He loves working out and
running his gym but loves helping others achieve their fitness
goals even more. Jim does a great job at running his gym with
profits rising and plenty of members to fill the fitness center
every day, but he feels like something is missing.One night Jim
was sitting on his couch watching late nightTV and stumbled
upon an infomercial for some home fitness equipment.This is
when he realized that there are so many potential members for
Basements and Barbells out there that he’s currently not
reaching.
4. STAKEHOLDER ID, HISTORY,
& REASON FOR PROJECT
(CONT.)
Basements and Barbells is a typical gym with all of the
equipment and staff that a member would need to accomplish
his/her fitness goals. It offers memberships, personal training,
and in-house fitness classes, but that’s about it. After seeing that
informercial Jim realized that he was just scraping the surface
when it came to the fitness industry, and decided he wanted to
update the website with an available app that could help with
his new marketing plan.
5. STAKEHOLDER ID, HISTORY,
& REASON FOR PROJECT
(CONT.)This app will feature ways for members to incorporate their workout experience at
the gym and at home including:
• Live feed during scheduled workout sessions at Basements and Barbells
• Nutrition plans tailored for the specific user
• Many different workout programs
• The option to choose a professional trainer that will assist in achieving the user’s
goals
• Available times to meet with his/her trainer on site
• Q & A feedback in case the user has any questions for their trainer
• Communicate with fellow members of Basements and Barbells via a message
board
6. STAKEHOLDER OBJECTIVES
• Attract new users to the gym
• Increase interactivity with the gym and its members
• Reach out to users looking for a new workout experience
• Make it easier for anybody to create a healthier lifestyle for
themselves
7. USER DEMOGRAPHICS &
NEEDS
Target User/Group: fitness enthusiasts, active/energetic
individuals, anyone looking to improve his/her quality of life
• Age: 18 – 50
• Gender: male/female
• Education: diploma and higher
• Computer Experience: moderate – high
• Previous Knowledge: some experience with mobile apps
• Income: $25,000 - $100,000
8. USER DEMOGRAPHICS &
NEEDS (CONT.)
Consumers would use this app because it’s convenient, it offers
many different ways for a member at Basements and Barbells to
stay active, and offers fewer excuses to be inactive.This app is
engaging and enticing.There is always the potential for activity to
be happening in real time with this app. A user can check in to see
what fitness classes are currently being held and join in through the
app via live video, speak with a trainer, check out nutrition plans,
and even after hours, a member can reach out to fellow members
via the message board. A user may request:
• Fitness class video be more engaging
• List of restaurants/grocery stores that align with each nutrition
plan
• Fitness tracker
12. USER SCENARIO
Jess decided to change things up and did some research on
finding a new gym. After plugging in a few keywords she
stumbled upon a link to Basements and Barbells. She was
intrigued by the photos of the gym and decided to stop in to
check out the place.After a quick tour she decided to join and by
her surprise she was notified of a cool new app that the gym
recently implemented. She downloaded the app and was
instantly hooked. Now, Jess can’t wait to workout and see what
fun new activities the app has to offer every day! She loves
utilizing the message board to connect with her workout
buddies and speaking with her personal trainer to see how she
can improve.
13. CONTENT SPECIFICATIONS:
HOME PAGE
Header:
Within the header (from left to right) will lie the logo/company
name, main navigation, login icon, and search directly below the
login icon. The logo will rest in the top left of the page and the
navigation centered in the header with the login and search
right justified. The logo will also act as a home page link. The
navigation links will include a hover feature with each link
transitioning with a red background that will fade in over .75
seconds when hovered over.
14. CONTENT SPECIFICATIONS:
HOME PAGE (CONT.)
Navigation:
Again, the navigation will be rested in the center of the header
and links will have the hover feature previously stated. The
navigation links will include (from left to right) “About Us,
Available Classes, Workout Programs, Trainers, Memberships,
Sign Up.”
15. CONTENT SPECIFICATIONS:
HOME PAGE (CONT.)
Content:
The content will begin with an automated carousel including 5
different large images of the gym overlaid by links to different
pages of the website that will offer their own specific content.
Directly below these links will rest a “search” feature. Below the
carousel will include 3 informative features of the website/gym that
will entice the user to join. This will be displayed in 3 different
equally sized vertical rectangles aligned side-by-side. Below this
section will include 2 large illustrations of barbells with weights on
them. They will be stacked vertically 1 above the other. Each will
also include a hover feature that expand an image along with
promotional information displayed next to it when the barbell is
scanned over by the mouse. Below this content will rest the footer.
16. CONTENT SPECIFICATIONS:
HOME PAGE (CONT.)
Footer:
This reiterates all of the links included in the header. It will also
include quick links to every other page of the website and a site
map. It will also display the logo again and available social
icon links.
17. CONTENT SPECIFICATIONS:
TRAINERS PAGE
This page will include all of the trainer’s photos displayed in a
vertical order, left justified with detailed personal and
professional information about the trainer written out to the
right of each photo.
18. CONTENT SPECIFICATIONS:
ABOUT US PAGE
This page will include a large group photo of the team at the top
followed by a brief history of the company and what they are
currently about. Below this will include a quick optional form for
a user to fill out to join the gym. Below this will rest a map of
where the gym is located and functional capabilities for the user
to scroll in and out and move the map around if he/she so
chooses.
19. FEATURES
TABLE:
Project Feature How is the feature implemented What concerns do we have about
this feature
Content
Main
Navigation
The main nav of the home page displays
global links to other pages of the website
and collapses these links when the screen
is shrunk to a smaller size. Another
feature rested inside of the navigation is a
search feature, where the user can search
anything they would like.
The main concern with the main
nav is to get all of the typeface,
colors and logo to match and be
homogenous with the rest of the
site.
• Helpful links to pertinent
information about the website
• Search feature allowing users to
find information that is not
currently displayed
Logo The logo at the top left of the page
informs the user of the website that they
are on and offers a global link for the
to click on to direct them to the home
page no matter where they may be in the
site.
An inexperienced user may not
know about the logo being a
feature of the website to direct
them to the home page.
• Company logo
• Will read out he company name
below the logo
Image Links Throughout the home page there will be
various images with links that will direct
the user to the related page on the
website.
Getting all of the images to match
in size and quality, and for each
to function properly every time
no errors.
• large images with written
content/titles next to them to
inform users of the image content
Carousel Offers five different image links to scroll
through that directs the user to its related
page with specific content
Finding the right content/images to
place within the carousel
• large images of the gym with
related content portrayed over
each image
Inner page1:
About Us
Will display image of faculty at the top
followed by a brief history of the
company. Below this, will display a sign
up form and map of gym location below
that.
Getting all of the content and form
functioning properly with no errors
• large image of faculty
Inner page2:
Trainers
Photos of each trainer displayed in
vertical order with descriptions of each
trainer displayed to the right of each
photo
Getting all of the information on
each trainer written out properly
and accurately
• large images of each trainer
20. CONTENT
ASSETS
TABLE:
Asset Format Description Associated
Assets/Media (if any)
Other Information
Logo .png The Basements and
Barbells logo and
business name below it
Link to home page none
Carousel Text and .png links Carousel offering five
options of images and
related content to choose
from
CSS/HTML/
Javascript
Some javascript
implemented to
control functionality
of the carousel
Informative
Features
Text and .png links “Classes” written out with
3 image links below to
the 3 most popular
classes offered
CSS/HTML none
Barbell Image
Promotions
Text and .png links Image of barbell with a
hover feature that
expands into a
promotional image and
its related content beside
it
CSS/HTML Image expands from
the most inner
weight on one side of
the barbell and
related text content
will expand from the
bar
Inner Page1:
About Us
Text, .png, and text boxes Information of company
followed by a small sign
up form and a map
pinning the gym location
CSS/HTML/
Javascript
Some javascript
implemented to
control functionality
of the form and map
Inner Page2:
Trainers
Textr and .png Information about each
personal trainer available
at the gym
CSS/HTML none