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 assemble 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). 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 refer to 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. Specify which layout grid system you have chosen to use (number of columns). 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 conttent 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.