| A | B | C | D | E | F | G | H | I | J | K | L | M | ||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
1 | OneLine: Swisskrono | |||||||||||||
2 | Feature Name | Feature Description | Time, h | |||||||||||
3 | Description | Comments | Animation | Animation | PM | Front-end | Back end with main content entering | QA | ||||||
4 | Desktop | Mobile | Min | Optimal | Min | Optimal | Min | Optimal | Min | Optimal | ||||
5 | examples https://mdbootstrap.com/docs/standard/content-styles/animations/ | |||||||||||||
6 | multisite with 1 language | General animation for the text and images: Fade in up = appear smoothly after you reached the scroll position examples: https://cooksvanilla.com https://bluecare.ch/blueconnect/ - like this text and image https://jmp.sh/hwp7YTf7 | ||||||||||||
7 | ||||||||||||||
8 | Project setup | 1 | 2 | 1 | 3 | |||||||||
9 | ||||||||||||||
10 | 1. Home page | |||||||||||||
11 | 1.1. Menu (svg with lines) | 8 | 10 | 4 | 6 | 2 | 3 | |||||||
15 | 1.2. Hero block (unique block) | 8 | 10 | 6 | 7 | 1 | 1,5 | |||||||
19 | 1.3. Text block top D156 M115 (below Hero) (with logo as checkbox option for desktop) (unique block) | 4 | 4 | 4 | 6 | 0,5 | 1 | |||||||
25 | 1.4. Slider 1 (image overlay type 1) (unique block) | - mobile - change slides on swipe | 6 | 9 | 8 | 10 | 1 | 2 | ||||||
34 | 1.5. Slider 2 (full image and number) (unique block) | - animation of the arrows - on click (it triggers the image change with fade-in/ fade out) - on swipe the same animation of arrows and images - left circles change | 8 | 10 | 8 | 9 | 2 | 3 | ||||||
38 | 1.6. Text block top 206 + 1.7. Before - after block (unique block) | 6 | 8 | 4 | 5 | 1 | 2 | |||||||
41 | ||||||||||||||
42 | 1.8. Wood samples preview block (unique block) | 10 | 12 | 7 | 9 | 1 | 2 | |||||||
44 | 1.9. Slider (Full image and link) (same as ...) | same as Slider "1.5. Slider 2 (full image and number)" but without numbers | 1 | 2 | 3 | 4 | 0,5 | 1 | ||||||
46 | 1.10. Text block (not unique block, use 1.6. Text block top 206) | same as 1.6. Text block top 206 | 1 | 2 | 0,5 | 1 | 0,5 | 1 | ||||||
47 | ||||||||||||||
48 | 1.11. Slider 1 same as 1.4. | The same sizes and positioning as for the 1.4. Slider 1 (image overlay type 1), the only difference is: - title width desktop = 390 instead of 318, mobile stays the same 251. Huge deisgn mistake on mobile https://jmp.sh/ynQSecYV should be fixed before development - paragraph width the same 274 desktop, 251 mobile - image padding left 238 https://jmp.sh/EQqHP9lD instead of 418. (Mobile the same) | same as for the 1.4. Slider 1 (image overlay type 1) | same as for the 1.4. Slider 1 (image overlay type 1) | 3 | 4 | 3 | 4 | 0,5 | 1 | ||||
49 | ||||||||||||||
50 | 1.12.1. Footer (images1) (unique block) | - only for home page - Use the content from home page design but use sizes from second frame because the home page has too many mistakes https://jmp.sh/ddY98NmU - title width 760, https://jmp.sh/73qzq0Io , (grows to the top). - big and small image position https://jmp.sh/kvx0SGeo , https://jmp.sh/9R2Iog1H - black form width 998 https://jmp.sh/OPbC8PqG . - Unsere Geschichte -> Link to Uber uns page. - mobile use spacing from Home or | 8 | 9 | 8 | 10 | 1 | 2 | ||||||
51 | 1.12.2. Footer (images2) (unique block) | - for collections and some products - different images, title and button https://jmp.sh/J77jqWM5 | 3 | 4 | 3 | 4 | 0,5 | 1 | ||||||
52 | 1.12.3. Footer (no images) (unique block) | - for other pages - without text and images https://jmp.sh/v8b6a3UE | 5 | 6 | 1 | 2 | 0,5 | 1 | ||||||
53 | ||||||||||||||
54 | 2. Kollektionen_Authentic Kollektion (No separate page) These pages will be created by the client: Kollektionen_Origin, Kollektionen_Evolution, Kollektionen_Liberty Sync, Kollektionen_Liberty | |||||||||||||
55 | 2.1. Slider (same as hero) | Hero - gradient on desktop and mobile https://jmp.sh/EBhSJ6p7 (design mistake - should be fixed before the development) - positioning of these elements use from 1.2. Hero block https://jmp.sh/jYLE7a1h - | 1,5 | 2 | 0,5 | 1 | 1 | 1,5 | ||||||
56 | ||||||||||||||
57 | 2.2. text block same as 1.3. Text block top D156 M115 | 1,5 | 2 | 0,5 | 1 | 0,5 | 1 | |||||||
58 | ||||||||||||||
59 | 2.3. Many images block (unique block) | - images for each page on separate artboard: Bildkomposings_Moodboards https://jmp.sh/MwE7tIlx - mobile - use the images from desktop-version. - this image only appears in desktop version. Rule for all colletions. https://jmp.sh/wVmE8rul - background desktop and mobile - only lines https://jmp.sh/ICUGHHoZ | hover to see animation on design. When the user hovers over image, the image moves in front of all the other pictures and scales from the center to 115% of its size ("Zoom-in"). In mobile we dont use this effect. | 6 | 8 | 4 | 5 | 1 | 1,5 | |||||
60 | ||||||||||||||
61 | 2.4. Decor options block (unique block) | - all this elements in 1 block https://jmp.sh/8kw7ZU66 with background 1.) - title - left/right 150 2.) - circles - the first one is set by default. ( https://jmp.sh/AEsH3mND ) 3.) - Slider - https://jmp.sh/Txzh4RDX - information for slider - names and images on a separate Artboard: Bilder_Kollektionen_Authentic --- (use Text and Naming from Desktop Version in all Sliders for Mobile as well.) 4.) - Description and image https://jmp.sh/cPC698tp - dynamic 5.) - Text, button image https://jmp.sh/2xx5oAYd - static 6.) - Logos, button https://jmp.sh/5EXh300I - ... check other comments on the design to see the requirements | - Once the user clicks on another circle -> 1.) half circle - text and image changes https://jmp.sh/km3iSwwz (fade out - fade in) 2.) the images in the slider below will change. https://jmp.sh/L062s4mm (fade out - fade in) 3.) some text below the slider will change. - Click on half circle - open/closes list https://jmp.sh/TQSXUhpk | - Once the user clicks on another circle -> same as desktop - Click on half circle - open/closes list (fade-in) https://jmp.sh/VFIyFQ8S | 8 | 11 | 12 | 16 | 2 | 3 | ||||
62 | ||||||||||||||
63 | 2.5. Advantages circles block (unique block) | hover over button | - button - show the same styles on click - slider on swipe move image from right to left (no fade-in) | 4 | 5 | 3 | 4 | 0,5 | 1 | |||||
65 | 2.6. Other collections preview block (unique block) | hover over button | - button - show the same styles on click - slider on swipe move image from right to left (no fade-in) | 4 | 5 | 4 | 5 | 1 | 2 | |||||
67 | 2.7. Footer with images2 Same as 1.12.2. | |||||||||||||
68 | ||||||||||||||
69 | Product pages: | |||||||||||||
70 | ||||||||||||||
71 | 3. Produkt_Herkunft | 1,5 | 2 | |||||||||||
72 | 3.1. Hero same as 1.2. Hero block | 1 | 2 | 1 | 2 | |||||||||
73 | 3.2. Text same as 1.3. Text block top D156 M115 | 1 | 2 | 0,5 | 1 | |||||||||
74 | ||||||||||||||
75 | 3.3. Full width video block unique | - title (optional), video https://jmp.sh/n9jCfs3G - Video: SwissKrono_Imagefilm_1080p_Flat_h264_MST-20220404.mp4 in a separate folder. - start to play automatically, loop. - use the same video for mobile? Cut the sides, show center? | 2 | 3 | 1 | 2 | ||||||||
77 | 3.4. unique | https://jmp.sh/RJPHXoqo | 2 | 3 | 3 | 4 | ||||||||
79 | 3.5. same as 2.3. | https://jmp.sh/RJPHXoqo | 1 | 2 | 0,5 | 0,5 | ||||||||
80 | 3.6. same as 3.4. but with title, other background | https://jmp.sh/7kkpivZM add some options from the list https://jmp.sh/rvzTSo9v (not all just the once that we have on the design https://jmp.sh/KwBVJeIZ | 1 | 2 | 1 | 2 | ||||||||
81 | 3.7. same as 2.6. | https://jmp.sh/p4VheQIe | 1 | 2 | 0,5 | 0,5 | ||||||||
82 | 3.8. Footer with images2 Same as 1.12.2." | 1 | 2 | 0,5 | 0,5 | |||||||||
83 | ||||||||||||||
84 | 4. Produkt_Vorteile | 9 | 12 | 8 | 13 | 2 | 3 | |||||||
95 | ||||||||||||||
96 | 5. Produkt_Umwelt | 8 | 10 | 10 | 15 | 1 | 2 | |||||||
107 | ||||||||||||||
108 | 6. Produkt_Zubehör | 4 | 6 | 4 | 6 | 1 | 2 | |||||||
115 | ||||||||||||||
116 | 7. Produkt_Zubehör_Trittschallunterlage */ | more pages like this will be created by the client | 4 | 6 | 4 | 6 | 1 | 2 | ||||||
123 | 8. Produkt_Aufbau-360 | 6 | 8 | 3 | 5 | 1 | 2 | |||||||
124 | 8.1. Text same as 1.3. Text block top D156 M115 | |||||||||||||
125 | 8.2. 360 block (can't estimate now) | https://jmp.sh/aJ0WY3Ty | ||||||||||||
126 | 8.3. same as 5.2. | https://jmp.sh/ZGIMwX5g | ||||||||||||
127 | 8.4. Text same as 1.3. Text block top D156 M115 | |||||||||||||
128 | 8.5. same as 2.6. | |||||||||||||
129 | 8.6. Footer Same as 1.12.3." | |||||||||||||
130 | ||||||||||||||
131 | Service pages: | |||||||||||||
132 | ||||||||||||||
133 | 9. Service_VordemKauf | 6 | 8 | 3 | 5 | 1 | 2 | |||||||
140 | ||||||||||||||
141 | 10. Service_Verlegung | 6 | 8 | 3 | 5 | 1 | 2 | |||||||
149 | ||||||||||||||
150 | 11. Service_Pflege | 6 | 8 | 3 | 5 | 1 | 2 | |||||||
157 | ||||||||||||||
158 | 12. Service_Downloads | 5 | 7 | 3 | 5 | 1 | 2 | |||||||
165 | ||||||||||||||
166 | 13. Service_FAQs | 5 | 7 | 3 | 5 | 1 | 2 | |||||||
171 | ||||||||||||||
172 | Uber Uns pages: | |||||||||||||
173 | ||||||||||||||
174 | 14. UeberUns_Standort | 4 | 6 | 2 | 4 | 1 | 2 | |||||||
181 | ||||||||||||||
182 | 15. UeberUns_Zertifizierungen | 4 | 6 | 2 | 3 | 1 | 2 | |||||||
189 | ||||||||||||||
190 | 16. Kontakt-Haendlersuche | 20 | 30 | 8 | 12 | 1 | 2 | |||||||
198 | 16.3 Map block (can't estimate properly until we have final design) unique | |||||||||||||
199 | 17. Floor_Simulator | 2 | 3 | 2 | 4 | 1 | 2 | |||||||
206 | ||||||||||||||
207 | 18. Impressum | 18.1. Text same as 1.3. Text block top D156 M115" | Only text | 2 | 3 | 2 | 3 | 1 | 2 | |||||
208 | ||||||||||||||
209 | 19. Page 404 | 19.1. 404 block | 1 | 2 | 1 | 1 | 1 | 2 | ||||||
210 | ||||||||||||||
211 | 20. Cookie_Message | https://jmp.sh/1xR1mmi1 | 1 | 2 | 2 | 4 | 1 | 2 | ||||||
212 | ||||||||||||||
213 | 21. Datenschutz | 21.1. Text same as 1.3. Text block top D156 M115" | Only text | 1 | 2 | |||||||||
214 | ||||||||||||||
215 | 22. AGBs | 21.1. Text same as 1.3. Text block top D156 M115" | Only text | 1 | 2 | |||||||||
216 | ||||||||||||||