IDA - Department of Computer and Information Science

# Project overview Your project assignment in this course is to plan, design and implement the landing page of a web site using a layout that is capable of dealing with both dynamic content and different display sizes. The project has two parts: - [Preparation](preparation.en.shtml): collect precedent design exemplars, plan layout - [Implementation](implementation.en.shtml): implemenation of the web site based on your preparations **Note**: The focus of this course is on the layout of web sites. This means that assessment will take minimal account to other design aspects. This being said, keep the typography and the colors used at a readable standard so that they do not work against your layout. ## Deadlines See Deadlines on [Examination page](../exam/index.en.shtml#deadlines). ## Sign-up As with the lab assignments, you will be working in pairs for the project assignment. Please sign up for both lab and project assignments: - [Project sign-up (PRA2)](https://www.ida.liu.se/webreg3/TDDE42-2025-1/PRA2) Please sign up to the same group in PRA2 as you signed up to in PRA1, i.e. if you signed up as A4 in PRA1, also sign up as A4 in PRA2. # Project requirements **Note: You only have to implement the landing page of your project. Links to other sections etc. of the website do not have to work.** ## Content requirements You are free to choose the content of your landing page. You must however use some kind of "real" content and topic. Only using pure placeholder text/images is not allowed. Fictional content is ok, as long as it makes some kind of sense and is topical. The reason behind this requirement is that that it is that in most cases, the content of a website serves as an anchorpoint for its design. Without actual content, it far to easy to create a nonsensical design. Examples of topics/content of previous course projects: - restaurant/café website - recipe website - personal portfolio - company web site - front page of online store - magazine website ## Required content components The following content components must be present in the landing page: 1. **Header section** 2. **Navigation menu**: see requirement below 3. **Hero section** 4. **Featured articles**: Each featured article should be made up of a short text paragraph and an image. 5. **Secondary articles**: Each secondary article may be made up of a short text paragraph and/or an image. 6. **Footer**: The footer should contain information about the web site. The information can be in one or more of these formats: - links to other pages (e.g. various about pages) - links to social media pages - one or more paragraphs of text with information about the website ### Navigation The navigation menu should be hidden in at least one device layout as a hamburger menu. ### Hero section, featured articles and secondary articles The landing page should contain three article tiers: - **The hero section** is the most important tier in the visual hierarchy and is the equivalent of the cover story of a newspaper. The hero could also be a product that the company wants to put in the spotlight, or a specific dish that a restaurant wants to promote etc. - The next tier in the visual hierachy are the **featured articles**. Featured article have both an image and a short paragraph of text. Featured articles may e.g. be of the same category as the content of the hero section, but less important. **Both the number of featured articles and the amount of text in the featured articles should be able vary**. - The final tier in the visual content hierarchy are the **secondary articles**. The secondary articles may consist of both an image and text, or just text or an image. In either case, they must be less visually prominant then the featured articles. The secondary articles may be short links to e.g. "most recent articles", or a link to separate section of the web site. **Both the number of secondary articles and the amount of text in the secondary articles should be able vary**. - The variation in amount of text in featured and secondary articles can be chosen with consideration to the kind of website you are making, but you must have variation in your content. #### Inspiration - [58 Best Blog WordPress Themes For Corporate, Personal, Fashion, Travel, Photoblogging & More - 2021](https://colorlib.com/wp/best-personal-blog-wordpress-themes/) - [Exploring the Hero Section](https://www.sitepoint.com/exploring-hero-section/) - [Hero Image Website Design: 21 Best Examples & Templates for Your Inspiration](https://uxplanet.org/hero-image-website-design-21-best-examples-templates-for-your-inspiration-56cd3d79c688) - [Magazine websites (SiteInspire)](https://www.siteinspire.com/websites?categories=42) - [Website Design Inspiration (awwwards.)](https://www.awwwards.com/websites/) ## Grading requirements Your implementation must fullfill the following requirements for **grade 3**: - **fixed width layout** - different layouts for **three device sizes** (device widths) - layouts support dynamic size of content components (e.g. amount of text, number of articles) - navigation menu is hidden in at least one device layout as a hamburger menu Your implementation must fullfill the following requirements for **grade 4**: - **fluid layout** (use of max-sizes is OK, elastic/fluid typography is not required) - different layouts for **three device sizes** (device widths) - layouts support dynamic size of content components (e.g. amount of text, number of articles) - navigation menu is hidden in at least one device layout as a hamburger menu Your implementation must fullfill the following requirements for **grade 5**: - requirements for **grade 4** - a 1-2 page long written report with advice to yourself for future projects. The report is to be submitted individually. See the description of the report below. **Submit a zip-file with the files for your project implementation via Lisam.** Please use your correct group name when submitting (i.e. A1, B3 etc). Deadline on [Examination page](../exam/index.en.shtml#deadlines). ### Individual report for grade 5 Submit a 1-2 page report via its Lisam Submission where you provide advice to your future self with regard to designing for a web page with dynamic layout. The report should contain two main sections: 1. A set of guidelines and/or tips regarding what to keep in mind when designing a dynamic layout based on what you have read and experienced during the course. 2. Motivation and discussion of your guidelines/tips. Provide examples of potential negative consequenses that may happen if your guidelines are not followed and/or benefits from following the guidelines/tips that you wrote about in the previous section. **When motivating and discussing your guidelines/tips, provide example cases either from your own project, or e.g. from another website.** Make sure that the report contains the following in its header: - Your name and LiU-ID - Name and course code of this course - Date Deadline information on [Examination page](../exam/index.en.shtml#deadlines).