CINF201-Week 2 Solved

Week 2: Website Planning

 

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.

 

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

 

 

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?
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?
 

 

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.

Personal resume website
Bakery website
Wildlife conservation/blogging website
 

Tips

Find similar websites for inspiration
Use https://www.wirify.com/ to see how potential wireframes would look
Label your boxes, write an x to signify an image, don’t write too much text
No colors except black, white, or greys
Explain things as needed
Don’t worry about perfection, this is mostly a thinking/planning exercise
Submit only 1 wireframe for each website for a total of 3 wireframes
 

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.

 

Your three wireframes and one style tile are due by Thursday, September 9th at 6pm. To submit the work for this exercise, go to Blackboard à Course Materials à Lecture Notes for this week’s class. You can also visit the “Assignments” folder and the submission area will be titled “Website Planning Exercise.” You can submit each file individually or as a zip folder with everything inside of it. If you choose to draw your wireframes/style tile, make sure to either take pictures/upload them to blackboard or turn them in at the beginning of class next week. The work submitted will be evaluated based on the rubric explained below.