Overview

This week we will learn about information architecture and how we can use it to organize our web pages. We will also go over methods for planning a website which include wireframes, style tiles, and needs assessments.

Information Architecture (Lecture/Class Activity)

Organizing information logically is essential to the development of websites of any scale. Users that are unable to find the information they are looking for will leave a website quickly and may never return especially if they have a poor experience. It is important to “chunk” our information into manageable parts so that it can be organized based on any number of factors. Review the two links below for additional details.

Reading Links

https://www.usability.gov/what-and-why/information-architecture.html

https://webstyleguide.com/wsg3/index.html (Chapter 3 – Information Architecture)

When organizing our information, we should take some of the following into consideration:

• Who is our audience?
• What are the highest-level categories?
• What are our sub-categories?
• How many pages of content do we have?
• What are the major keywords for our content?

Website Planning (Lecture/Class Activity)

Before doing any development on a website in terms of coding, it is important to have a plan or idea of the goals for the website. Thinking about the purpose of a website, its intended audience, the content, and other items will allow us to build a more user-friendly website that draws in people. We will learn a few methods to help streamline the process and get our ideas flowing before we code.

Needs Assessment

It is a good idea to evaluate your website and what it requires to be successful. Normally, you would ask a client questions about the website, so you could gain an understanding of their wants and goals. If it is a preexisting website, you might ask how was it performing before? Where does most of the traffic come from? What features does it have? Are users able to work with them easily? In the case of a new website, there will be other types of questions to answer.

Without this information, you couldn’t realistically expect to deliver a product which works for a client. The links below cover types of web development cycles and steps to take before building a website. Skim through the content in the following links to discover useful questions a web developer would ask prior to developing a website.

Reading Links:

• https://paper-leaf.com/insights/steps-to-take-before-designing-a-website/
• https://www.smashingmagazine.com/2018/02/comprehensive-website-planning-guidepart1/
• https://www.signitysolutions.com/blog/web-development-life-cycle/

Some of the most important questions to ask are listed below. This list isn’t exhaustive but will serve as a useful starting point for your assignment this week.

• What is the website about?
• Who is the intended audience?
• Why does this website matter?
• What pieces of information are the most important?
• What are the goals for the website?
• What do other websites in this field look like?
• What features will be required?

How will users primarily access the website? What types of colors/fonts will be used?

• How many pages will be needed?
• Do we need to track users and other information?
• How do we measure success in this website?

Wireframes

Wireframes are used to assist with the planning and development of websites, applications, etc. Rather than beginning with coding, a developer might use a wireframe to plan out the different components and how they will interact. These components are typically laid out in black and white with only major headings/links written out in text.

For web development, wireframes are used to provide a visual structure of the website’s layout. Wireframes allow us to do this by separating content from styles. We can then focus on content and where it is placed rather than worry about aesthetics like color or fonts which are better suited for style tiles. This will enable us to figure out what HTML is required for the structure a little more easily.

Wireframes are intended to be basic and don’t need to have a lot of content in them. The goal is to depict what various parts may look like on a page. Navigation menus, blocks of text, headings, etc. may be shown in a wireframe. The links below will provide more information and some examples of wireframes that you can create.

Additional Reading

• https://www.webopedia.com/TERM/W/wireframe.html
• https://webdesign.tutsplus.com/articles/a-beginners-guide-to-wireframing–webdesign7399
• https://www.slideshare.net/folletto/introduction-to-building-wireframes/68Lets_sketch_Wordpresscom_homepage (Only slides 1-28)

Wireframe Examples (Inspiration for Web Planning Exercise)

• https://www.invisionapp.com/inside-design/wireframe-examples/
• https://www.justinmind.com/blog/20-inspiring-web-and-mobile-wireframe-andprototype-examples/

Wireframes are created by drawing out the structure of the product you intend to build. This can be done on paper, markerboard, online, and even in a local image editor. I’ve listed some tools that should be a good start if you don’t know where to begin. There are many others out there are free or cost money, but the ones below don’t require logins for the most part and are capable enough for our purposes.

Online Editors

• https://wireframe.cc/
• https://www.gliffy.com/examples/wireframes

Draw/Print

http://media.konigi.com/tools/graphpaper/pdf/konigi-wireframe-gray.pdf http://gridzzly.com/

• https://sneakpeekit.com/

Image Editors

• https://www.getpaint.net/index.html
• https://www.gimp.org/

Style Tiles

These are used to convey the aesthetics of a website in terms of its look and feel as opposed to the way the content is structured. Unlike wireframes, style tiles are supposed to have colors, varying fonts, logos, patterns, and other parts which help to show potential styles for the website.

Review the following link to understand more about style tiles in general: http://styletil.es/

Style tiles don’t have to be done in the format shown in the link. The different visual styles you’d like to apply can be formatted in any way, but a user should be able to understand what you are trying to convey. Style tiles are typically made with an image editor of some sort, but physical materials such as markers and paper can be used as well.

Information Architecture Review (CW)

Visit the website for the NY Times (https://www.nytimes.com/) and another website of your choosing (cannot be another news site). In at least two paragraphs, describe the information architecture of both websites. If you’re not sure where to begin, use the questions listed below to guide you.

• How is the information organized/chunked?
• Which pieces of information seem to be the most important vs not?
• What are the highest-level categories? What are some sub-categories?
• How is the navigation organized?
• Is there a site map available?

Information Architecture Review – 10pts

• Link for website is included: 1pt
• Length of write-up: 2pts
• Quality of write-up: 7pts o Specific categories mentioned o Discussed how information is organized

Website Planning Exercise (HW)

Look at the list of potential websites listed below. Think about the kind of content you might find on those websites. Based on your thoughts and some light research, create a wireframe for one page from each website. This might include the home page, about page, blog post/listing page, contact page, etc. Use your creativity and the tools listed above (others are cool too) to create 3 separate wireframes. If you choose to draw your wireframe, take a picture and submit it to Blackboard or turn it in at the beginning of class next week. Links or direct file uploads are fine for this assignment. Just attach them with your submission.

If you need to explain anything in the wireframe, feel free to add a little paragraph along with your submission. Make sure to let me know which wireframe your writeup refers to so I don’t misunderstand anything.

1. Personal resume website
2. Bakery website
3. Wildlife conservation/blogging website

In addition to the wireframes, you will also create one style tile. The style tile should be for one of the three websites that have a wireframe (personal resume, bakery, or wildlife website mentioned above). I’ve provided a template for the style tile which is located on Blackboard as an attachment to the assignment and in this week’s lecture notes.

Participation Questions 9/2

To receive credit for participation in today’s class, please answer all the questions in the Google Form linked below. If you don’t want to answer the final question (fun), simply put N/A (not applicable) for your answer and that will count.

This Week’s Participation Questions: https://forms.gle/y1k5fZBjudBqatCLA

Previous Participation Questions/Responses These are the participation questions from last week:

https://forms.gle/VgsZxP5rMUNtmRv56

This link has the responses to the fun question from last week. Feel free to look over the responses from myself and your peers. https://docs.google.com/spreadsheets/d/1QLoQzbO-

Er7ARIECl0aPvY1lKUyZTdYeuwsn4g0XEAk/edit?usp=sharing

Next Week

We will learn about HTML and how it’s used to create websites. The links below will provide an introductory glimpse into HTML and some of the tags used in it.

• https://www.w3schools.com/html/html_intro.asp
• https://www.htmldog.com/guides/html/beginner/ (Getting Started/Tags, Attributes, and Elements are good places to start)