IDA - Department of Computer and Information Science

# Project: Preparations The project preparations consist of the following two assignments: 1. Precedent design analysis - Case studies 2. Layout planning - wireframes for your project You will present your preparation on the preparation seminar ([schedule](../timetable/index.en.shtml)) and later submit a PDF with your preparations via Lisam (see Deadlines on the [Examination page](../exam/index.en.shtml#deadlines)). ## Precedent design analysis - Case studies The first preparation task is to assemble and study two case studies of responsive web site **landing pages that look like they use a column grid based layout**. Each case must show and document at least **three disctinctly different layouts** (i.e. the landing page has different layouts for at least three device sizes). This means that you **cannot use a web page that only has two layouts** for your case study (e.g. it looks the same when viewed on a mobile phone and a tablet). A layout is different only if there are distinct layout changes, such as change in position or number of columns used. **A layout is considered the same if the elements do not move around but only change size.** (i.e. if a page looks the same on a tablet as on a phone, just that the elements are smaller, it is the same layout). There are web pages that do not use a colum grid based layout but avoid using these pages for your case studies. Also note that column grid based layout must not necessarily be *implemented* using a CSS grid or column layout. For each case provide the following: - **breakpoints** used by the web site (at what widths does the layout change?) - **screenshots** of each of the layouts with annotations that show a grid system that might have been used - documentation of changes between layouts: lists/annotated images that show/highlight the changes If you do not annotate your screenshots with text and arrows to point out changes that occur between layouts, you need to place numbers on the different parts of the screenshots that you can reference in your text/tables/lists. **Tip** If you use the Firefox web browser, you can take screenshots of the whole page (not just the visible part). See [Take screenshots on Firefox](https://support.mozilla.org/en-US/kb/take-screenshots-firefox). ## Layout planning The second preparation task is to put together wireframes sketches for your landing page. The layout of the wireframes must be done using a layout grid system, which should be visible in your sketches. Specify which layout grid system you have chosen to use (number of columns) for each screen size. Make sure that your wireframes show how your layout adapts to the following: - a varying number of featured articles and secondary articles - varying size of the content of featured articles and secondary articles (appropriate for your content) - layout for three device sizes Add annotations to your wireframes that which content elements correspond to the required project content. **See layout and content requirements of the project on the [project overview page](index.en.shtml)** ## Preparation seminar You will present your preparations during preparation seminar (see [schedule](../timetable/index.en.shtml)). Information on which of the seminar sessions you should attend will be added to the schedule in TimeEdit. The group names refer to the project signup groups in Webreg. During the seminar, each of the four participating groups are to to present their case studies and their wireframes/wireflow diagrams. In order to allow for a brief discussion after the presentations, **you need to keep your presentations under 10 minutes**. After the seminar, update your preparation materials as needed and submit the final version via Lisam (see below). ### Making up for not attending the preparation seminar If you were not able to attend the preparation seminar for some reason, submit **one** of the following via Lisam together with your preparation work: 1. a written report of your preparation work (around 1 page, maximum 2 pages) 2. a recorded screencast/video where you present your preparations (around 10 minutes long) ## Submission of project preparations Upload a PDF containing both preparation assignments via Lisam. See the [Examination page](../exam/index.en.shtml#deadlines) for deadline.