Final Project
In this assignment you will synthesize your knowledge of web design into a new, professionally-oriented website. Potential topics include a portfolio, a social cause, a small business, and an expanded résumé.
Research & Wireframing
Once you’ve decided what your professionally-oriented website will be about, write a paragraph of at least 100 words describing your topic and how it will be presented on the web.
Create a mood board using online tools such as Miro, Pinterest or desktop applications like Photoshop or Keynote. The mood board should be used with your website description to dictate the visual direction of your website. Consider things like color, type treatments, photographic style and design themes that you feel will be applicable to the website you will make.
In addition to the mood board, choose three other websites that you will use as inspiration for this project. These websites can be in a similar topic or aesthetic. Please explain why you’ve chosen them and what aspects of these sites you aim to emulate with this project.
Next, using pencil and paper or collage, create a page layout that represents the design of your next website. This is an opportunity for you to make design decisions before applying them with code. The layout should include text, images, and navigation. You need not concern yourself with specific content at this stage; instead, focus on the arrangement of compositional elements on the page. You’re welcome to use the same general layout for every page of the site; if you choose to vary the layout for different pages, create a separate wireframe for each. When you have completed your handmade wireframe, take a picture of it or scan it so that you have a digital image of your work.
Content
Begin building your website by creating a new project directory for its files. Using your wireframe as a guide, code your website with semantic HTML to describe page content. Your website should consist primarily of original content; any images or text that you use from other sources should be credited accordingly.
There should be semantic text elements on each page, including but not limited to paragraph (
) and heading (
,
, etc.) text.
There should be semantic section elements on each page, including but not limited to
,
, and
.
Pages should link to each other with “relative” URLs; longer pages should incorporate anchor links.
Each page should include properly formatted JPG, PNG, GIF, or SVG images.
All elements should include src, width, height, and alt attributes with appropriate values
Higher-resolution (2x) versions of all raster graphics should be offered in conjunction with the srcset attribute
At least one page should include web-formatted audio or video using the HTML
Pay close attention to your HTML tags as you code them. You can also check your HTML code using the W3C Markup Validation Service.
Form
Create one external style sheet and link it to all of your HTML pages. Code a responsive layout for your website with CSS.
Your style rules should specify font family and font size for paragraph and heading text, and link states including link, visited, hover, and active.
Add a web font to your pages with the CSS @font-face rule.
Use the CSS Flexible Box Layout Module (Flexbox) for arranging items along one axis and/or the CSS Grid Layout Module for the overall page structure.
The viewport should be set on all HTML pages and the CSS should include at least one @media query with a breakpoint to optimize the layout for different browser widths.
Mobile-optimized layout should be limited to one column; desktop layout should include two or more columns.
Allow the content of your website to guide decisions you make about its design.
Accessibility
Keep in mind that people access the web in many different ways. Build your pages in a way that creates as few barriers as possible to experiencing your site, regardless of the user’s ability or the device used to access the web. One way to test the accessibility of your site is with the browser’s accessibility inspector. These tools do not necessarily catch all accessibility issues but an audit of your site should not indicate any serious issues. If it does, try to resolve them before submitting your assignment.
Submitting Your Assignment
Publish your project on the i6 web server and submit the following via NYU Classes.
The text description of your topic, website and inspirational websites—copied and pasted in the assignment text box
A digital image and/or link to your mood board
A digital image of your handmade wireframe
The URL to your website on i6
A compressed archive containing all the files (HTML, CSS, JavaScript, images, and media) of your web page
Please note that you are required to submit files along with URLs in order to receive credit for your work.
Grading
This assignment is worth 15 points.
Research & Wireframing
A paragraph of at least 100 words describing a professionally-oriented website topic (1 point)
A mood board showing colors, textures and images that are the inspiration for the site design. (1.5 point)
A list of at least three other websites that are used for inspiration and why. (1 point)
Website wireframe of the page layout (2 points)
Content
Semantic text elements on each page (0.5 point)
There should be semantic section elements on each page (1 point)
Pages should link to each other with “relative” URLs; longer pages should incorporate anchor links (1 point)
Each page should include properly formatted JPG, PNG, GIF, or SVG images; img elements should include src, width, height, and alt attributes with appropriate values (1 point)
Higher-resolution (2x) versions of all raster graphics should be offered in conjunction with the srcset attribute (0.5 point)
Web-formatted audio or video, under 10 MB, using the HTML
Form
Style rules should specify font family and font size for paragraph and heading text, and link states (1 point)
A web font applied with the CSS @font-face rule (0.5 point)
The CSS Flexible Box Layout Module (Flexbox) for arranging items along one axis and/or the CSS Grid Layout Module for the overall page structure (1.5 points)
The viewport should be set on all HTML pages and the CSS should include at least one @media query with a breakpoint to optimize the layout for different browser widths (1 point)
Mobile-optimized layout should be limited to one column; desktop layout should include two or more columns (1 point)
Points may be deducted for improperly formed HTML elements, CSS style rules, or JavaScript, as well as serious accessibility issues.