In this session you will be expanding the SFPOPOS site and finishing up your wire frames.
- Describe Importance of wire framing
- Describe target audience
- Create a site map
- Write user stories
- Use Figma to create wire frames
Wireframing and its importance in website design:
Wireframing is the process of creating a basic layout of a website or application before designing it in detail. Wireframing helps designers to focus on the user experience, usability, and functionality of a website, without getting distracted by aesthetics or visual design. Wireframes are an essential step in the website design process, as they help to identify potential issues and provide a clear vision of the website's layout and structure.
Brief history of wireframing:
Wireframing as a design practice has been around since the early days of graphic design, when designers used hand-drawn sketches to outline the basic structure of their designs. The concept of digital wireframing specifically emerged in the 1990s with the rise of user-centered design methodologies and the advent of digital design tools. Today, wireframing is an integral part of the website design process, with designers using a variety of tools and techniques to create effective and user-friendly digital products.
Importance of wireframing in website design:
Wireframing is important in website design because it helps designers to create a clear vision of the website's layout and structure, ensuring that it meets the user's needs and achieves business objectives. By wireframing a website, designers can identify potential design issues early in the process, saving time and resources in the long run. Wireframes enable designers and stakeholders to review and refine the website's functionality and content, ensuring that it is effective and user-friendly. Overall, wireframing is an essential step in creating a successful and engaging website.
Demographics: Understanding the demographics of your target audience is crucial in designing a website that will resonate with them. Factors like age, gender, income level, and location can all impact how users interact with a website. For example, a website targeting older adults may need to have larger text and simpler navigation, while a website targeting younger adults may be more visually engaging and interactive.
Challenge: Define the target audience for the SFPOPOS. Answer these questions:
- Who uses the SFPOPOS site?
- What is their is age gender and income?
- Where do they live?
Psychographics: Psychographics refers to the attitudes, values, interests, and lifestyles of your target audience. Understanding these factors can help you design a website that speaks to their interests and needs. For example, a website targeting eco-conscious consumers may need to emphasize its sustainability practices and eco-friendly products.
Challenge: What is the psychographic profile of an SFPOPOS user?
- How often does the user visit San Francisco's public open spaces?
- What activities does the user enjoy participating in while visiting these spaces?
- What motivates the user to visit and spend time in San Francisco's public open spaces?
User goals: Understanding the goals of your target audience is crucial in designing a website that meets their needs. User goals may include finding information, making a purchase, signing up for a service, or simply browsing. By understanding these goals, you can design a website that provides the necessary information and functionality to help users achieve their goals.
Challenge: What are the goals of a SFPOPOS user?
- What information are they most interested in?
- When they visit the site what are they looking for?
User behavior: Understanding how users behave on your website can help you optimize the user experience. Factors like where users click, how long they stay on a page, and what actions they take can all provide valuable insights into how users are interacting with your website. By analyzing this data, you can make informed design decisions that improve the user experience and achieve business objectives.
Challenge: Think about user behavior on the site. It's hard to predict this without observing actual users or examining user data. Predict as best you can how someone would use the site. Ask yourself what does a visitor do when they visit this site?
Pain points: Pain points are the areas of frustration or difficulty that users experience on your website. By identifying these pain points, you can make design decisions that alleviate these issues and improve the user experience. For example, if users are having difficulty finding a specific product, you may need to reorganize your navigation or add a search function to make it easier to find what they are looking for.
Challenge: Considering all of the questions above, ask yourself where users might run into problems or frustrations when using the site.
Use the answers to the questions above to refine and improve your user stories and wire frames.
The SFPOPOS site needs a new page. We have many visitors and want to add a newsletter. We need visitors to # for the news letter. Your job is to add a page with a form that will allow visitors to register an account and opt in for the newsletter.
The form should display input fields: username, email, and a check box that asks if you would like to receive the newsletter.
You need to decide where to place this page. You will also decide on the wording of the form, you can also expand the form if you think of any good ideas to add to it.
Create an outline of you project. Do this by first making a list of all of the content. What is the content for the SF Public Spaces site?
Let's think about content with the terms: content pages, these are the seprate pages of the project, and elements, these are the individual content items on any page. A page might Home or About. Elements might be page title, nav bar, Nav Link home, search input, search button, etc.
https://www.chatterbuzzmedia.com/blog/web-content-outline-overview/
Create a site map. (Follow the guide above.)
Identify key pages: The first step in creating a site map is to identify the key pages that will be included on the website. These may include the homepage, about page, product or service pages, and contact page. By identifying these pages early on, you can begin to map out the structure of the website and how users will navigate through it.
Group related pages: Once you have identified the key pages, you can begin to group related pages together. For example, all product pages may be grouped together under a "Products" category. Grouping related pages together helps to create a logical and intuitive navigation structure, making it easier for users to find what they are looking for.
Determine page hierarchy: Page hierarchy refers to the order in which pages are presented to the user. Generally, the most important pages should be presented first, with secondary and tertiary pages grouped together. By determining the page hierarchy early on, you can create a clear and intuitive navigation structure that guides users through the website in a logical order.
Consider user flow: User flow refers to the path that a user takes through the website to achieve a specific goal. By considering user flow when creating a site map, you can ensure that the website is designed to meet the needs of the user. For example, if the user's goal is to make a purchase, the site map should include a clear path from the product page to the checkout page.
Use visual aids: Visual aids like flowcharts or diagrams can be helpful in creating a site map. These tools help to visualize the structure and flow of the website, making it easier to identify potential issues and refine the navigation structure. By using visual aids, you can create
Use the ideas above to create your site map. Feel free to reorganize the original site to improve it. You can make any changes you like that improve the site.
Use the ideas above to inform and improve your user stories.
Ask yourself how these user stories inform the site design. Are there any changes that need to be made to the site after writing the user stories? Be sure to make any changes that you think are necessary.
Think about the User Experience.
https://forgeandsmith.com/blog/ux-vs-ui-how-they-work-together-in-web-design/
Read the article above and let it inform your user and wire frames. Make any changes that you think are needed.
You can use any tool you like to create your wire frames. Your wireframes must be neat and legible!
I can't cover all of the possible tools used to create wire frames. I will cover Figma here. It's free and works well. It does have a learning curve, like all software.
Figma also has a desktop app:
https://www.figma.com/downloads/
Figma wire framing tutorial: https://www.youtube.com/watch?v=D4NyQ5iOMF0 This 8 min video covers everything you need to know about creating wire frames. It also has a lot of great best practice advice.
Best Practice:
- Use only text and boxes.
- Avoid color
- No photos
- Inlcude everything
- Use real text
- Do not strive for pixel perfection