The Web Project (WP) results in the design of a significant web-based information space. This project evolves over 3 stages: prospectus & wireframe, 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.
Web space that meets your client's needs and expectations for content delivery and design.
For the full specifications, see Submission Requirements.
This project offers another opportunity to link your growing knowledge of web design with a specific project. Because this endeavor is a team design project, it represents an opportunity to consider what you bring to a team, how to contribute to rather than claim as your own a web-based deliverable. That kind of work brings its own special array of frustrations and triumphs, but if you can complete the project and maintain a sense of your own identity while also sustaining a team spirit, it is a victory to be celebrated. With that in mind, consider also the following three learning challenges.
Think about how to build a useful, effective information space that anticipates the needs and expectations of your intended users while also serving the project stakeholders on the client side. Draw on the strategic knowledge you have acquired and honed this semester for thinking about how people experience design to develop a quality information experience.
Remind yourself of the team's design goals and principles that you assembled together during the workshop with that focus. 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.
Draw on the research you have done this semester. Learn from other designs. 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, web project
Document scope: 150 words (memo), variable (web project)
Project value: 600 points (100 points each for the Wireframe & Prototype, 400 for the final website)
Evaluation rubric: _Eval_WebProject.pdf
Recommended tool(s): Figma for the wireframe; BootstrapStudio for the web project; Adobe InDesign, Illustrator, Photoshop or their open-source equivalents for design elements
The Web Project requires you to construct a functioning, web-based information space that curates content on behalf of your project client. Effective curation of content 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 4 phases.
Decisions about content, media, and architecture are all important individually to your design. The three connect in both concept and execution as well.
Site Content. Your clients provide the baseline for site content. Remember that you have advisory expertise here as well. As you get deeper into the development of your website, consider what site visitors need and expect, consider what your client needs and expects of the site, and consider how you might be positioned to act as advocates for both.
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.
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 strategy 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 connection, 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 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 content and structure come together, map the organization of it all by building a wireframe of your website. This is essentially a 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. There are many tools for building wireframes. The most commonly used apps here in our program are Figma, Miro, LucidChart, and Canva. I have used all of these, but prefer Figma for in-depth work. If your team has someone on it familiar with Figma, I encourage you to use that to build your wireframe, but that is merely a suggestion.
I have curated resources for you on this topic from the Nielsen-Norman Group and SmartDraw. Refer to the linked content on Canvas Pages.
Because your wireframe will likely evolve as you build your information space, you do not need to submit the wireframe of your site until the final submission.
Construct an information space to execute your core design decisions and the vision that emerges from your team's shared design goals and principles. Regardless of your client or content, your goal is to build a complete website by the project's conclusion. The prototype represents a significant milestone on that journey, and may be less comprehensive than the final submission, but should demonstrate the vision of the design, and be complete enough 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 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, 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.
Your clients and I must be able to access your website through the end of the semester (that is, until grades are submitted to the Registrar's Office during the week after final exams). Although you may work on individual pages on your own personal spaces on the BootstrapStudio servers, for the prototype stage and final submission you'll need to bring everything together into one coherent site under one user space. The BootstrapStudio Guide content provides quality support for managing pages and assets, for assembling, exporting, and sharing your site. Seek that material for guidance on accomplishing these tasks.
When you get to the end of the prototype stage and to the end of the full project cycle, follow the instructions for exporting your site. Make sure every team member has that complete content package for their own project archive. Whomever hosts these stages on their BootstrapStudio server space, that person must also provide a zipped project folder with the complete site through the project folder on their shared Dropbox space.
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 prototype submission ought to include 2 files. Model your filenames on the examples listed here.
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 prototype stage as well as 3 new files. Model your filenames on the examples listed here.
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 Wireframe 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_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:
YourProjectName_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.