The Web Project (WP) results results in the design of a significant web-based information space. This project evolves over 3 stages: prospectus, prototype, and the final submission. The WP is challenging because it demands that you construct a portfolio-worthy design for the web that is responsive, inclusive, and usable.
This projects results in a design prospectus, a prototype version of your webspace, and a final webspace.
For the full specifications, see Submission Requirements.
This project offers an opportunity to link your growing knowledge of web design with a specific project. Because this endeavor open to completion as a team design project, it represents an opportunity to consider what you contribute to a team, and how your knowledge, vision, and abilities might shape the teams' design efforts. Regardless of whether you opt to take on the WP alone or in collaboration with others, projects of this scope are demanding in their complexity technologically, curatorially, and designerly. In that context, consider the following 4 complementary learning challenges.
Think about how to build a useful, effective information space that anticipates the needs and expectations of your intended visitors while also serving other project stakeholders, including yourself. Draw on the strategic knowledge you have acquired and honed this semester and throughout your SVSU academic career for thinking about how people experience design to develop a quality information experience.
Remind yourself of your individual and collective team design goals and principles. While linking those goals and principles with this work, you may notice things that you did not think to consider during that workshop. If that happens, note those gaps so your team might add new elements to its value posters.
Supplement the knowledge you have worked to acquire about coding and design this semester by studying specific web spaces and systems to understand how they are crafted and how they serve visitors. Draw inspiration from others' successes. Avoid others' failures. Challenge your thinking through consideration of other designs. Challenge others' thinking through the construction of your own information space.
One of the greatest mistakes designers can make is to get trapped in their own vision for a project. As you talk about your project with teammates, peers, and usability participants, open yourself to advice, to questions, to input from others about how to craft, refine, and revise your information space.
Deliverables: memo, prospectus, prototype, web project
Document scope: 150 words (memo), 2 pages (prospectus), variable (prototype, web project)
Project value: 600 points (100 points each for the Prospectus & Prototype, 400 for the final website)
Evaluation rubric: _Eval_Prospectus.pdf, _Eval_Prototype.pdf, _Eval_WebProject.pdf
Recommended tool(s): Google Docs (prospectus); Figma (prototype); FigmaMake/Google Sites (web project)
Technology Note. Originally, I planned to require that you develop your prototype in Figma and your final site in Google Sites. However, the makers of Figma released FigmaMake just before the beginning of the semester. That tool carries site coding forward directly in the Figma workspace. I grant you permission to explore that tool, and encourage you to do so if you feel comfortable with the prompt engineering strategies I have been teaching in courses for harnessing the power of ChatGPT and other smart tools. If you are uncertain, reach out to talk about this option.
The Web Project requires you to construct a functioning, web-based information space that curates content in service to a specific community or cause/purpose. To be more concrete, this means you must create a knowledge base or community guide in service to a specific client or community, or create a comprehensive professional portfolio.
Option: Knowledge Base/Community Guide. There are countless examples of these sites: The Nielsen-Norman Group (NNGroup.com); The World Wide Web Consortium (w3.org/); iFixit (iFixit.com); Wikipedia (Wikipedia.org); The Pokemon Database (Pokemondb.net). These are all content-intensive spaces that serve very specific or very broad audiences and purposes. Such spaces are built on meticulously constructed information architectures that allow visitors multiple pathways for connecting with the content: systematic navigation, discovery and exploration, search, for example.
Such sites match a topic (e.g., information design tools; design knowledge/terminology; technology repair; community knowledge) with a curation metaphor (e.g., encyclopedia, database, library, museum). If you are unsure how to proceed, consider local offices and organizations. For example, the RPW Department has wanted to construct an unofficial guide to RPW courses and programs, but faculty have so far lacked the time to develop such a space. This could be a quality team project.
Option: Professional Portfolio. Portfolios serve a range of professions and industrial expertise. The emerging standard for information design is the UX Portfolio. Such portfolios curate several specific content elements: identity, professional values, career goals, project narratives, project examples. You reviewed portfolios of SVSU alumni during an earlier workshop assignment. Refer to those links on Canvas Pages (Bryan X Raymond, Allison Stein) for examples. There are many other quality portfolios available through LinkedIn and searchable through any search engine.
Effective content curation emphasizes the kind of strategic knowledge you have been refining throughout your studies, including here this semester: pattern recognition and building; layered communication through a variety of design elements (e.g., text, iconography, images, color); and crafting experiences through purpose-driven task design. All of these design strategies are essential to your success with this project.
The WP requires planning and execution through 5 phases.
Before you begin planning a site, you need to determine what problem you seek to address/resolve. UX expert Maria Rosala (who some of you may have encountered on the NNGroup site) identifies 3 elements of a well-crafted problem statement. (Note that problem statements do not discuss solutions.)
You'll include a problem statement in your prospectus, so consider carefully what your web space will be designed to do for visitors. Although typically we would work from the problem statement toward potential solutions, in this case you already know that you'll craft a webspace as your solution.
Decisions about content, media, and architecture are all important individually to your design. The 3 define both the concept and execution of your visitor experience.
Site Content. Determine your space's content. Will your content consist of fewer, longer, more-complex entries, or many smaller, less-detailed entries? Such decisions impact the way your space will serve visitors and shape the way they engage with it.
Plan your development around the following content requirements. The number and complexity of destination (i.e., primary content) pages is the greatest variable. These pages are framed by the rest of the site (e.g., home page, pathway/navigation pages).
Detailed destination pages might present the equivalent of 750-1000 words of content. Simple, less-detailed destination pages might present the equivalent of 150-200 words of content.
Content Media. The primary media formats for information spaces are defined by their function, but generally include text, images/icons, special containers (e.g., tables, charts), dynamic content (e.g., video, animations), audio, and connecting content (e.g., links in various media, PDFs). Plan the format(s) for your content based on the kind of interaction you want to build, and the strategies you anticipate visitors implementing to navigate and consume the space, and the needs and expectations visitors bring to your space.
The sites we hold up as exemplary curate content in multiple media formats to take best advantage of how media engage visitors and fulfil their purpose in visiting.
Information Architecture. As any of you who completed RPW350 Information Architecture know, IA is a conceptual phrase that brings together a whole array of content and design strategies to facilitate engagement with information spaces. The phrase breaks down into Information (meaningful content) and Architecture (meaningful structure). We combine it with and extend it through Experience Architecture (XA), where Experience can be distilled to meaningful relationships (among content elements, and between visitors and content).
As you plan, consider how to best organize the content into pages, how to connect those pages for optimal navigation and engagement, how to organize content on pages, and how content anchors the experience of your constructed space. How does your space serve? How does the architecture (of both information AND experiences) facilitate user engagement?
Refer to the document Framing Information Architecture & Experience Architecture (Canvas Files) for a break down of architectural elements and concepts.
Build a Wireframe of the Site. As your vision of content and structure come together, map the organization of the space by building a wireframe (map) of the site. Wireframes can be low fidelity (e.g., paper) or high fidelity (e.g., digital). They can have filler content (e.g., lorem ipsum), descriptive content (i.e., explanations of the content that will appear on screens), or no content. My wireframes are often some combination of the first 2 content options. Further, wireframes can be static maps (boxes connected by lines that illustrate navigation pathways), or they can be interactive. Your best digital tool for this purpose is Figma. By building the wireframe (rough sketch) of your site in Figma, you set yourself up to transform that simple model into a navigable prototype.
Craft the Prospectus Document. This document is a brief, detailed explanation of your preliminary vision for the web project. The more thought you invest in planning your site, the easier it will be to assemble this doc. I recommend that you use Microsoft Word or Google Docs for this project stage.
The prospectus should include the following design and content elements.
Construct your webspace using boxes that are 1440px wide in Figma. Doing so will promote better scaling if you opt to use FigmaMake for your site build. The prototype represents a significant milestone on your design journey, although it may be less comprehensive than the final submission. Whether or not you completely populate your webspace in the prototype, you should demonstrate the vision of the design, and provide a complete enough site to assess through usability study.
This project represents the culmination of your work for the semester. That is, the accumulated knowledge and insight you have gained from studying the way people experience design, from systematic examination of how physical and information spaces are constructed to be experienced should help you take a systematic, strategic approach to designing your own information space.
Like all well-designed information products, your website should serve a clearly communicated purpose (or set of purposes) for readily identifiable users. Your design should be usable, professional, and effective. Remember that your prototype must be functional / interactive. That way it will help you/your team more fully understand how visitors engage with your content, and what goes awry if anything does.
The site you construct should include the following design and content elements.
Note. The course website illustrates this kind of layering. At the highest level of organization, you can access content identified in the navigation bar Site Links. Within the Courses section of the site (where you are right now), there are sections dedicated to individual courses. At this layer, you can use the Course Links to move about, and within projects you can use the Project Links to move up and down this screen.
The course calendar grants you time between submission of the prototype and final website to conduct usability studies of your working prototype and implement changes to the design. The specific details of those studies are covered in the description of the Usability Study workshop. But do not let that be the only time during the project timeline when you gather insights from others. Seek feedback continuously throughout the process every chance you get.
Use feedback from peers, colleagues, study participants, your client (if applicable), and me in addition to your own design insight and strategy to refine your prototype into the fully functional, fully serviceable site it needs to be. At this point in your academic career, I don't feel the need to express this part in more detail than I do here. You know what to do.
Remember that you may choose to develop your final site with Figma and FigmaMake, or with Google Sites. If you opt for Google Sites, your project will be published in that context, and thus ready for submission. If you opt for FigmaMake, you'll follow a different pathway. We will address this detail when we get to that stage for the project.
A memo of transmittal introduces the accompanying document to its audience(s). You'll submit work in progress at the Prototype submission date, and the final site at the end of the project cycle. These 2 milestones will be accompanied by memos.
Your memos should be addressed from you to me, and should introduce the accompanying project. Each memo should incorporate the following content elements.
This section is designed to help you be strategic in the development of your project components. Consider the following hints and tips. Use this set of recommendations as a checklist for quality control.
Remember that communication in professional and technical contexts values highly the ability to write and speak with economy, directness, and professionalism. Another way of saying this is to make every word count. If this is not already habit for you, then invest deeply in this strategy now.
Focus on the little and big details. Proofread your project content carefully. Troubleshoot your code when necessary. Do not neglect visual content or content in special containers (e.g., tables). Hold your work to a high standard so it reflects the best work you can achieve.
Continue to examine other websites during your work on this project. Learn from those spaces, and apply what you can from them into your own design. Pay particular attention to the standards those designs establish and maintain for layout, for editorial quality, for usability. When you see examples of designs that could be improved, apply that awareness as you build your prototype and refine your final submission.
Once you have begun to construct your prototype, review screens for quality and consistency of writing and design, and test links to make sure they go where you want them to go. Tweak as you work.
I also recommend that you compare designs, decisions, strategic thinking, usability study plans, and anything else relevant to your work on this project with others. Peers in the class understand what you are trying to accomplish, and can assist with refining your approach and execution. People outside of the class can offer fresh perspective on your design thinking that you might lose sight of because you are deeply immersed in professional examination of designs like these. Sharing your work and seeking feedback, even in small ways or regarding very specific details, is often a useful venture in a variety of ways. It is also a good professional habit to develop.
The revisions and refinements you make as you prepare your submission may help you understand your design process, and therefore your professional development in more-sophisticated ways. Archive your prototype of this project and of your final submission when it is ready, so you are able to examine your growth and maturation as you progress through the program you are in.
Read and attend carefully to these submission guidelines. Failure to do so may result in points lost on the final evaluation of your project.
Create a project folder inside your shared class folder on Dropbox.com. Remember, I can only view files that you place inside the shared folder. Until you place files in that space, you have not in practice submitted them.
Name the folder WebProject.
Your prospectus submission ought to include 2 files. Model your filenames on the examples listed here. For solo projects, use these models.
For team projects, use these models.
Note. Do not share individual files with me. By placing them in your project folder, you have already shared them by default.
Your prototype submission ought to include 1 additional file. Model your filename on the example listed here. For solo projects, use this model.
For team projects, use this model.
Note. Do not share individual files with me. By placing them in your project folder, you have already shared them by default.
Your final submission ought to include the files from the previous stages as well as 1 new file. Model your filename on the example listed here.
For team projects, use this model.
Note. You may export your wireframe as an image file (e.g., gif, jpg, png) rather than as a PDF if that is preferable.
Note. Do not share individual files with me. By placing them in your project folder, you have already shared them by default.
The project submission is worth 600 possible points, assessed to 3 separate components. You will earn points according to the standard described on the policies page (see Policies for a description of these categories).
The Prospectus and Prototype elements are worth 100 points each. Those points are distributed across 3 areas.
The final Web Project is worth 400 points. Those points are distributed across 4 areas.
The specific areas of emphasis for the WP project are drawn from this description and our discussions of the project (including any supporting teaching materials that I provide to you along the way). Review the project rubric (_Eval_Prospectus.pdf, _Eval_Prototype.pdf, _Eval_WebProject.pdf) for the specific qualities and characteristics emphasized in each evaluation category.
Remember that I will only post the point values for projects on the Grades page in SVSU Canvas. I will provide the supporting details relevant to that evaluation in your class folder in a project-specific file. Look for a Microsoft Word file in your shared class space on Dropbox with a filename that that follows this pattern:
YourLastName_Eval_Prospectus.docx, YourLastName_Eval_Prototype.docx, YourLastName_Eval_WebProject.docx.
This material has evolved over many years of teaching & research, and is protected by U.S. copyright laws.
If you are here because of random chance, or because this content came up in a search, then please feel free to explore the site. If you are a teacher or other professional in any context who would like to use any of my course content in your work, I grant you permission to do so with the following limitations.