XD Roundtable Project
Objective: You are being asked to build a multi-page static website to showcase the skills you have acquired in this course. The (fictional) site client is (non-fictional) XD Roundtable. There are several compulsory skills you must demonstrate in the construction of this site.
Task: Your task is to build a three or more page website for XD Roundtable, the User Experience Design student organization at CDM. The site will have basic information about the organization, a recap of past events, and an event calendar of upcoming events. [I have the question out to actual leadership of the organization as to what else they’d like to see on a site–I will keep you all posted with any responses I receive.
Update: See G: Useful Info near end of this document.] You will upload your project solution to StudentWeb in a /project folder, with the home page of your site sitting in an index.html file. You will also submit to the Project area of D2L Submissions at least two wireframe for your site’s HTML template and a reflection (as a submission comment) that addresses the questions specified in the Requirements Section of this document. Why two wireframes? One for a landscape oriented desktop webpage, and one for a portrait oriented full screen phone webpage.
Wireframe Requirement As we are not formally covering wireframing in this course, I am flexible about the format you use and will not grade you on the quality of your wireframe. However, I do want you to create them as I want you to add some formality to the process of thinking through your solution design before you begin to build it.
How will I enforce this order of operation (wireframe before actual site)? I’m not set up to fully enforce it, but I’m setting the wireframe deadline 72 hours before your site deadline. Given most of you will be coding your site at the very end (though you shouldn’t be), this means the wireframe gets done before the final coding push.
To reinforce this point: the wireframe will not be accepted late, at least not for credit.
I don’t care whether your wireframe is low fidelity (and hand drawn) or high fidelity (and created on a professional wireframing tool.) Again, the quality of the wireframe is not important to me, just the fact you’ve done one is what is important. And I will look at how similar your finished site is to the wireframe.
If you have multiple page template designs on your site, pick the template you use most. If every page is different, (why is every page different? It’s more work for you and poorer usability for your users) pick any one of them that is not a splash page. (And, no, you are not required to have a splash page.)
XD Roundtable Project
Here are some pointers on how to construct a wireframe (if you want to learn more on your own):
- https://www.sitepoint.com/developing-your-design-process/ This is a pre-wireframing read. It is a short high level overview of a design process.
- https://www.experienceux.co.uk/faqs/what-is-wireframing/ Explains what wireframing is and is not. No real detail here, just more context.
- https://www.sitepoint.com/the-web-design-process-part-3-layout/ This is part 3 of a series, but it’s the part about wireframing. It discusses parts of a web page you might want to address.
- https://careerfoundry.com/en/blog/ux-design/how-to-create-your-first-wireframe/ Some more nuts and bolts discussion in this tutorial. You probably want to stop here, but I’m including one more as the last article goes into extreme detail.
- https://www.smashingmagazine.com/2016/11/wireframe-perfectionist-guide/ There is a lot to unpack in this article as it is very good and very complete and way more than you need right now. Bookmark this for a future course when you do a deep dive into wireframes. For right now, get a handle on the general process, stay low fidelity, and realize that you don’t have much information that you might want to have to execute a complete site design.
- Site Requirements and Specifications 1. Responsive Design
Your site will be responsive in that it will adapt between a landscape (horizontal) desktop context and a portrait (vertical) smartphone context. You may design for more contexts if you like, but these two are required.
When you test your site’s responsive breaks, correct for very small or very large viewport widths. I mention only because last quarter there were some errors along these lines.
- Primary Site Tasks o All of your pages must have a consistent (within the responsive context) header
that includes the organization’s logo (you may choose or edit from among the logos they have historically used), a site menu (links to the two or more pages you create), a social media menu (including a menu item that generates an email to them), and a footer that is common across all your pages.
I’ve reached out to the organization leadership. If we get updated information in a timely manner, the sitemap defined below may evolve. Build a home page that contains information about the organization AND a
photo montage representing the organization. You may place additional content on this page if you like.
https://www.sitepoint.com/developing-your-design-process/
https://www.experienceux.co.uk/faqs/what-is-wireframing/
https://www.sitepoint.com/the-web-design-process-part-3-layout/
https://careerfoundry.com/en/blog/ux-design/how-to-create-your-first-wireframe/
https://www.smashingmagazine.com/2016/11/wireframe-perfectionist-guide/
Project XD Roundtable
Build a second page that consists of a future event calendar including one “featured” event. [If XDRoundtable has not listed sufficient numberof future events–make some up!]
Build a third page that contains a summary of past events.
- Requirements about webhost folder and file organization. o Your home page must be called index.html and placed in a /project folder on your
webhost account. The /project folder is at the same hierarchy level as your /labN folders, so that I would
access it with something like The other .html files (for the other pages) must also be placed in the same /project
folder. You may name your other page HTML files anything semantically appropriate. Place all your CSS, images, and fonts in appropriately named sub-folders to /project. Test your solution by accessing it from the student table on the home page of the class
D2L site. Your project will not be graded if it is not accessible from that location. o Your site will be wholly HTML5 and CSS. You are not permitted to solve any of the design problems using JavaScript.1
- Requirements about site content o While you are not permitted to share HTML or CSS structures, you are permitted to
share XD Roundtable content and design assets. That is, is one of you has taken the time to curate content and is willing to share it with others, I do not have any problem with that–in fact, I encourage it. I will share any content I curate, and will pass along any content XD Roundtable provides me with.
You must develop full content for your solution. You are not permitted to fill content holes with “Lorem Ipsum” text. Reasoning: you can’t think through semantic choices unless the real content is present. You are permitted to create fictional event content if we are unable to procure enough real content to fulfill our needs.
If you are using any external content of questionable copyright license, do make sure you have included NO FOLLOW, NO INDEX in your <head> and include in your footer that this site is for educational purposes and not a real organization site.
- Requirements about pages o If you use a splash page as your index.html, it doesn’t count toward your three page
requirement. o Your site must contain both images and text on each page, with repeating header and
footer content across all of the pages. You must generate consistent navigation among the pages on your site. The current page must be visually indicated in your navigation menu.
Experience Design Roundtable
XD Roundtable Project
To the extent possible, it is anticipated you will build your pages off of one template, so you aren’t building complete separate sites for each page. The workload for a three page site should not be triple the workload for a one page site.
Your site CSS must be placed in one CSS file (and reused across pages as much as possible). If you have unique CSS for one or each given page, then either supplement your main CSS file with individual page files or build a page specific section into the CSS file. The DRY (don’t repeat yourself) principle holds: find a way to specify presentation once so your code is shorter and easier to modify/maintain.2
The <head> of each page on your site must include a <title> unique and appropriate to that page. A single site <title> is considered sub-optimal by Google.
Your solution code must be well documented. Lack of documentation will be graded down on the project. Document as though someone else is going to maintain your code and you care about them getting it right.
URL references to other pages on your site, internal site bookmarks, or to resources stored within your webhost account must be relative references. You are not permitted to use absolute references in these situations. Only external links may be absolute references.
- HTML and CSS requirements. o HTML files must be valid HTML5. When run your HTML and CSS code through the W3C
validator, I will expect it to pass validation without an error (minimize warnings produced as well; validator may return error on Google Fonts—ignore that error, no penalty for it).
You must use a reset.css or normalize.css file with your site. o You must use HTML5 semantic block elements where appropriate in your HTML design. o You must use a web or installed font for all of the text on your site. You are not limited
to the use of a single font—should you prefer a design with multiple fonts. o You may use any valid CSS, including CSS not covered in the course (if you choose). I will evaluate your CSS to see that it is effective. By this I mean, I look at factoring—that is: make your CSS efficient, do not repeat declarations for many similar elements when common declarations can be pulled out and made once. And I look at the organization of your CSS in the file as well as how it is documented.
- Page Layout requirements o You must use Flexbox to manage page layout for your site. The expectation is
that you will use Flexbox rather than normal flow or floats for page layout.
2 In past quarters I’ve seen student write independent HTML and CSS for every page of their site. That runs counter to the idea of designing a template and building all site pages to that template (with, perhaps, only minor adjustments). Please following this templating concept.
Project Experience Design
XD Roundtable Project
Use floats and the position property in your page design only to solve problems appropriate to each (floats for wrapping text around an element; position for positioning an element outside of the flexbox system or vertically stacking elements).
While we did not cover CSS Grid, I do not oppose you using it if you so choose. But Grid is not a requirement.
Do not use Bootstrap or another CSS Framework for your solution. Do not use a web building site (e.g. Wix or Squarespace) for your project. Do not use a WYSIWYG editor that generates solution code for your project.
- You must present your solution for at least two media sizes. You are welcome to present more than two media sizes, but two is the minimum.
One size is a landscape oriented desktop webpage, and the other is a portrait oriented full screen phone webpage.
You must design a different page layout for your large and small page designs. That is: adjust something more than just a few trivial elements (which I’ve seen students do in the past). You will be marked down if your break only addresses easy trivial elements of the page.
You decide at what pixel count to set the break point. Do use pixel size and/or orientation for breakpoint rather than device type as I want to be able to view both your solutions from my desktop.
You must include at least one responsive foreground image with the <picture> element or the srcset= attribute of the <img> element. This responsive image is independent of your media break.
- Your site must employ a consistent navigation solution across all pages. Navigation elements must visually indicate when hovered and when clicked (I realize the hover concept doesn’t exist on most phones). Current page of site must be evident by looking at navigation elements. That is, visually indicate which page is current on the menu. [Hint: create a “current” class and apply it to the current page on each page’s version of the menu.]
Navigation elements should not “jiggle” when hovered or clicked. [Hint: jiggling is caused by design choices that change the pixel size of a menu item when hovered or clicked. Common culprits are bolding text or manually changing border widths. Using border-styles of inset and outset often solve this problem while providing a 3d feel.]
Your site must have a site name or site logo present at the same location on all pages. User clicking on that logo must invoke a bookmark back to the top of the home page. [Hint: if you don’t use an ID as part of this solution, it isn’t a bookmark.]
- Your site must include a social media menu. o Here are their actual social media links:
Project XD Roundtable – Experience Design
XD Roundtable Project
email: xd.roundtable@gmail.com§ Facebook: https://www.facebook.com/depaulxd/ § Twitter: https://twitter.com/RoundtableXd § Instagram: §
- Your site must have a footer (though it does not have to be placed at bottom of page) that includes copyright and disclaimer information.
The footer must be consistent across your pages. o You must use an HTML entity to create the copyright symbol.
- Below are the compulsory requirements, HTML elements, CSS selectors, and CSS properties that must be used in your solution to demonstrate proficiency in using them.
- Required <head> elements are present b. reset.css or normalize.css has been used c. Deploy a favicon for your site, with graphic file placed in root folder d. Use one or more web or installed fonts for all site content e. Use CSS flexbox for general page layout (to demonstrate skills with the concept) f. Use CSS float property to float text around an image in at least one location g. Use the CSS position property (fixed, absolute, sticky, or relative value) to position an
element h. Use an attribute selector or a sibling selector i. Use a pseudo-class (other than :hover :active :visited :link and :lang) j. Use a ::before or ::after pseudo-element k. Use a media breaks to support your responsive solution l. Use a picture element and/or the srcset attribute to support your responsive solution m. Include at least one foreground image on your site n. Include at least one background image on your site o. Use an HTML entity (such as the copyright symbol)
Note that this checklist is not a complete set of requirements. Do carefully read the requirements in sections 1 to 10 above.
- Deliverable Your project is due on the dates designated in D2L. Your wireframes are due three days before your final site is due.
Your wireframes will be the document that creates your D2L submission, so no other document is required. However…
https://twitter.com/RoundtableXd
https://www.facebook.com/depaulxd/
mailto:xd.roundtable@gmail.com
User Experience Design student organization at CDM
XD Roundtable Project
Along with posting your site to the webhost account, you will submit as a comment to the D2L Submission box information that includes.
Statement on any major design decisions you made. Discuss any issues that emerged when you applied flexbox and/or media break to your site. Discuss how you chose your media breakpoints and what (if any) issues emerged from those decisions. Discuss issues that arose developing from your wireframe design.
Note whether your site passed HTML and CSS validation. This serves as a checklist item for you as I will validate your site myself. Discuss the issues if you failed to pass validation, and what you did to try to overcome these issues. Note that I recognize a <link> to multiple Google fonts will generate a validation error; I will disregard that error–no need to mention it.
Include in your comment a point by point description of how you met the [a to o] requirements listed in #12 above. Please use the lettering order provided. This will ensure I don’t overlook work you did to meet requirements when grading your work. It also serves as a checklist for you so you know you have met all the requirements.
This D2L comment submission is absolutely required by the due date. Even if your coding is not complete you must submit this on time. I will not grant any extensions for this submission. I do not mind if you continue to tinker with your site after your submit or after the due date.
Some General Hints o It would serve you well to mark up this document and create your own “requirements check
list” to make sure you’ve hit each requirement for the project. o It would serve you well to spend time planning your solution before you start building it. The
wireframe is there to help this, but you don’t have to make that your entire planning process. o Build your wireframe so it is useful to you, not pretty for me. Actually use it to help design your
site. Don’t treat the wireframe as a make work project or else it will be. o It would serve you well to reread the requirements in this document after you’ve planned your
solution but before you’ve started to build as you will likely notice requirement details better at that point.
Include your reset.css or normalize.css at the beginning (and above your own css); don’t add it at the end of your design process.
It would serve you well to build out an HTML template page first, then save it off and build your site pages from it. It would make sense to take a pass at general page organization CSS on your template before building individual pages (your CSS testing will be much simpler this way).
It would make sense to validate HTML and CSS both early and often. If you don’t validate your template before breaking off individual pages, you are asking for trouble.
Test that your site is accessible from the URL I think it is at. Test that images and other assets show up as expected.
It is expected you will ask questions if you don’t know how to accomplish something, rather than report to me in your reflection that you got stuck and couldn’t finish a requirement.
Project XD Roundtable, the User Experience Design student organization at CDM
XD Roundtable Project
DePaul University | College of Computing and Digital Media ©2020 8
- Starter Content Provided You are being provided with the following
- A text file with XD Roundtable content that I’ve pulled from their Facebook pages and other related organization sites. This text file also includes descriptions of several events. You may create more content, if you like. This text file includes the XD Roundtable Facebook URL. If you explore their actual site you will see a long history of past events. Feel free to create fictional future dates for these past events. The content here should help guide your content for the calendar page. And the links here should inform you social media menu. [NOTE: I have not updated this content for Winter Quarter, so the events and dates are old. You can harvest more recent materials from XD Roundtable sites]
- A zip file with many images I’ve used for XD Roundtable visuals (or humorous approximations of visuals).
- XD Roundtable has a website now at https://dehub.campusgroups.com/xdr. It looks like it was created through a site generator. For the purpose of the class project you may harvest content from this site. This is a richer set of information than I’ve seen from them in the past. There is a lot to work with here. Some quick observations (as I am seeing the site as I am finalizing this project document):
Their homepage is a long scroll that includes a new logo, an about us, member benefits statement (in three boxes), leadership team, call to action (to join), and contact us form. All that content is great, but perhaps doesn’t all need to go on homepage.
Main menu is repeated at bottom (as is commonly done on scrolling pages) o They don’t include a social media menu. o The interactive features (join, etc.) are driven by the Content Management Platform this
site is built on. I don’t expect you to do that in 406. So, you do not need to build a “join” behavior.
They only show one upcoming event (as they have not yet planned sprng quarter events). Their past events don’t appear to be on this website, but are available from their Facebook page.
Their news page isn’t really news–it is a welcome message. o Their leadership page repeats the info from their homepage (and probably is better
placed just here). Interesting the officer links don’t function as email links. I have these five email addresses, but as your site doesn’t need to be implemented live, I suggest using dummy addresses instead.
Under resources they have shared some photos. The categorization must come with their platform as it is overkill here. They have no documents–but plenty of content does exist on Facebook. I don’t know why they list newsletters as they don’t do them. They don’t have much else under resources (even though they do have a real survey).
https://dehub.campusgroups.com/xdr
DePaul University – Project XD Roundtable
DePaul University | College of Computing and Digital Media
Real useful links info might include links to relevant academic degrees at DePaul (UXD, HCI, DCMA, EXP Des, etc.) and/or UXD sites/orgs in Chicago.
- More Stuff Ask any outstanding questions in the Project Discussion forum. Really. Rather than not being able to do it and writing a reflection that you couldn’t do it, ask questions before it is due!
Some of the requirements listed have not yet been covered as of Module 7. They will be covered by Module 9 at latest.
Yeah, there is some redundancy in the requirements and specifications. If I’m redundant, less people will miss it. If there are any contradictions, let me know.
Hopefully these requirements won’t change over the next few weeks, but minor updates are possible based on what we do/don’t cover and new information from XD Roundtable.
XD Roundtable Project
- A. Objective
- B. Task
- C. Wireframe Requirement
- D. Site Requirements and Specifications
- 1. Responsive Design
- 2. Primary Site Tasks
- o All of your pages must have a consistent (within the responsive context) header that includes the organization’s logo (you may choose or edit from among the logos they have historically used), a site menu (links to the two or more pages you create),…
- o I’ve reached out to the organization leadership. If we get updated information in a timely manner, the sitemap defined below may evolve.
- o Build a home page that contains information about the organization AND a photo montage representing the organization. You may place additional content on this page if you like.
- o Build a second page that consists of a future event calendar including one “featured” event. [If XDRoundtable has not listed sufficient numberof future events–make some up!]
- o Build a third page that contains a summary of past events.
- 3. Requirements about webhost folder and file organization.
- o Your home page must be called index.html and placed in a /project folder on your webhost account.
- 4. Requirements about site content
- 5. Requirements about pages
- 6. HTML and CSS requirements.
- 7. Page Layout requirements
- o You must use Flexbox to manage page layout for your site. The expectation is that you will use Flexbox rather than normal flow or floats for page layout.
- 8. You must present your solution for at least two media sizes. You are welcome to present more than two media sizes, but two is the minimum.
- 9. Your site must employ a consistent navigation solution across all pages.
- 10. Your site must include a social media menu.
- 11. Your site must have a footer (though it does not have to be placed at bottom of page) that includes copyright and disclaimer information.
- 12. Below are the compulsory requirements, HTML elements, CSS selectors, and CSS properties that must be used in your solution to demonstrate proficiency in using them.
- E. Deliverable
- Your project is due on the dates designated in D2L. Your wireframes are due three days before your final site is due.
- o Your wireframes will be the document that creates your D2L submission, so no other document is required. However…
- Along with posting your site to the webhost account, you will submit as a comment to the D2L Submission box information that includes.
- o Statement on any major design decisions you made. Discuss any issues that emerged when you applied flexbox and/or media break to your site. Discuss how you chose your media breakpoints and what (if any) issues emerged from those decisions. Discuss…
- o Note whether your site passed HTML and CSS validation. This serves as a checklist item for you as I will validate your site myself. Discuss the issues if you failed to pass validation, and what you did to try to overcome these issues. Note that I…
- o Include in your comment a point by point description of how you met the [a to o] requirements listed in #12 above. Please use the lettering order provided. This will ensure I don’t overlook work you did to meet requirements when grading your work…
- Some General Hints
- F. Starter Content Provided
- G. More Stuff
XD Roundtable Project