Interface Design Wireframe and Storyboard
Unit Outcomes practiced in this assign
Interface Design Wireframe and Storyboard
Unit Outcomes practiced in this assignment:
Describe fundamental user interface design principles.
Explain the process of user interface design.
Design basic user interfaces.
Course Outcome practiced in this assignment:
IT460-4: Develop information systems by converting design specifications into data structures.
Purpose
You, as the Systems Analyst, have been focusing thus far on the “inside” of a system, but realize the need to understand the interfaces used by a system as well. In this assignment, a new client is asking for assistance in building a website “from scratch” and needs for you to make design recommendations based on research.
Assignment Instructions and Requirements
Scenario:
Avery’s Gym has had some limited success providing athletic training and physical therapy…but she’s struggling a bit to expand her presence and her brand to expand her business. Avery is considering expanding her web presence and is interested in exploring what her competitors are doing. She thinks a great way to do that would be to build a website that could serve as a home for her marketing efforts. There are two parts to the assignment. First, research other similar sites to serve as a launching point for your creative efforts. Second, draft an original wireframe diagram using Visio that may serve as the starting point of a web system design project.
You can expand your research options to explore themes related to three main areas. Creativity is encouraged!
Gym or Physical Fitness center
Physical Therapy
Mental Health and Wellness centers
Because Avery is focused on crafting personalized training and experiences, she is looking for local inspiration. Choose a gym, physical fitness center, physical therapy site, or mental health and wellness facility that is close to you (preferably independent). Do not choose a large national business or chain as the starting point for your research.
Part 1: Home Page Research
Find an appropriate corresponding website home page with the purpose of researching similar sites for inspiration for your own design. Provide the following information focusing primarily on the home page, features, and branding of the site. Think of this as a “walk through evaluation.” In addition to providing a URL and screenshot – write a brief analysis addressing some of the common elements listed below:
Provide the full URL of your inspiration.
Include a screenshot
Provide additional written documentation to accompany your research. Adding labels and annotation to the screenshot highlighting your analysis is preferred.
Paragraph 1: Organization and Design (at least 75 words)
Describe the design elements:
Main features and purpose
Navigation menu(s)
Layout
Any whitespace
Paragraph 2: Branding and Communication (at least 75 words)
Describe the key features of marketing and communication elements:
The use of color (combinations, locations)
Text (families, variety of sizes, alignment)
Multimedia (images, graphics, videos, etc.)
Social media/communications
Part 2: Original Diagram
Consider what you learned about the organization of your research and develop your own proposed design for your client. Create an original wireframe and storyboard for your client’s home page. Visio is required.
Design your wireframe for a website homepage.
Include the location of the logo, navigation, main area for home page content, and other elements you feel are necessary.
Identify and label key elements.
Do not simply copy the design of the page you reviewed; create your own design.
Actual content is not necessary! This should be aline drawing showing where items should be placed on the screen. Placeholders could be included.
Your wireframe should look something like the image below, although of course with your own page organization and detail and relating to the client’s needs:
Original Image by: Paul Shryock, (CC BY-NC-ND 4.0) Image modified by cropping to focus on website wireframe example. Retrieved from https://creativecommons.org/licenses/by-nc-nd/4.0/
Provide additional written documentation to accompany your Visio wireframe. Elaborate on your design decisions, identify the key features, address important aspects of navigation, marketing, and communications.
Paragraph 1: Organization and Design
Describe the design elements (at least 100 words):
Main features and purpose
Navigation menu(s)
Layout
Any whitespace
Paragraph 2: Branding and Communication (at least 100 words)
Describe the key features of marketing and communication elements:
The use of color (combinations, locations)
Text (families, variety of sizes, alignment)
Multimedia (images, graphics, videos, etc.)
Social media/communications
Review all instructions above and the rubric below before submitting to the assignment Dropbox.
Reminders
Proofread your work for grammar, spelling, punctuation, capitalization, and formality.