Web Site Design Tools Site Maps Graphic representation of how each page (of a website) or screen...
-
Upload
magdalene-chase -
Category
Documents
-
view
214 -
download
0
Transcript of Web Site Design Tools Site Maps Graphic representation of how each page (of a website) or screen...
![Page 1: Web Site Design Tools Site Maps Graphic representation of how each page (of a website) or screen (slideshow, animation, database) link together. It’s like.](https://reader036.fdocuments.in/reader036/viewer/2022070410/56649f1d5503460f94c337f2/html5/thumbnails/1.jpg)
Web Site Design Tools
• Site Maps
• Graphic representation of how each page (of a website) or screen (slideshow, animation, database) link together.
• It’s like an atlas of the entire site
![Page 2: Web Site Design Tools Site Maps Graphic representation of how each page (of a website) or screen (slideshow, animation, database) link together. It’s like.](https://reader036.fdocuments.in/reader036/viewer/2022070410/56649f1d5503460f94c337f2/html5/thumbnails/2.jpg)
A sample sitemap by a student
![Page 3: Web Site Design Tools Site Maps Graphic representation of how each page (of a website) or screen (slideshow, animation, database) link together. It’s like.](https://reader036.fdocuments.in/reader036/viewer/2022070410/56649f1d5503460f94c337f2/html5/thumbnails/3.jpg)
Storyboard• Explains the mechanics of a site – how it’s built.• Designs how components on individual pages or
screens link to other pages. • Should identify the purpose, contents and design
elements of each page.• Areas used for input, output and navigation should
be clearly identified and labelled. • Leave detailed formatting information for the page
mockup.
![Page 4: Web Site Design Tools Site Maps Graphic representation of how each page (of a website) or screen (slideshow, animation, database) link together. It’s like.](https://reader036.fdocuments.in/reader036/viewer/2022070410/56649f1d5503460f94c337f2/html5/thumbnails/4.jpg)
Storyboard
May also include:• Page title, filename• Page number• Background images/colours• Screen dimensions• List of image filenames• List of links required
![Page 5: Web Site Design Tools Site Maps Graphic representation of how each page (of a website) or screen (slideshow, animation, database) link together. It’s like.](https://reader036.fdocuments.in/reader036/viewer/2022070410/56649f1d5503460f94c337f2/html5/thumbnails/5.jpg)
![Page 6: Web Site Design Tools Site Maps Graphic representation of how each page (of a website) or screen (slideshow, animation, database) link together. It’s like.](https://reader036.fdocuments.in/reader036/viewer/2022070410/56649f1d5503460f94c337f2/html5/thumbnails/6.jpg)
Mockups (annotated diagrams)• A sort of “photographic” representation of
what a printed page or a screen will look like• A bit like a prototype or demonstration model• Can be produced with software for extra
realism• May have faked text
![Page 7: Web Site Design Tools Site Maps Graphic representation of how each page (of a website) or screen (slideshow, animation, database) link together. It’s like.](https://reader036.fdocuments.in/reader036/viewer/2022070410/56649f1d5503460f94c337f2/html5/thumbnails/7.jpg)
Mockups – another interpretation
Another view of mockups is a hand-drawn representation of a page or screen with detailed formatting information.
![Page 8: Web Site Design Tools Site Maps Graphic representation of how each page (of a website) or screen (slideshow, animation, database) link together. It’s like.](https://reader036.fdocuments.in/reader036/viewer/2022070410/56649f1d5503460f94c337f2/html5/thumbnails/8.jpg)
This mockup plans out content, layout and formatting.
![Page 9: Web Site Design Tools Site Maps Graphic representation of how each page (of a website) or screen (slideshow, animation, database) link together. It’s like.](https://reader036.fdocuments.in/reader036/viewer/2022070410/56649f1d5503460f94c337f2/html5/thumbnails/9.jpg)
Mockups• Give enough detail so that the design could be
given to someone else to accurately produce the page or screen.
• E.g. “Arial, 14pt, bold, dark blue” • Don’t repeat yourself endlessly: summarise.
E.g. “All body text 12pt Arial. All links are blue. All tables have invisible borders except for the pets table” etc
![Page 10: Web Site Design Tools Site Maps Graphic representation of how each page (of a website) or screen (slideshow, animation, database) link together. It’s like.](https://reader036.fdocuments.in/reader036/viewer/2022070410/56649f1d5503460f94c337f2/html5/thumbnails/10.jpg)
Mockups
• Does not need to be 100% specific. E.g. can specify a “fancy font, big, blue” or “picture of a cat”.
• Include content information (what a text block is talking about; what a picture should show)
![Page 11: Web Site Design Tools Site Maps Graphic representation of how each page (of a website) or screen (slideshow, animation, database) link together. It’s like.](https://reader036.fdocuments.in/reader036/viewer/2022070410/56649f1d5503460f94c337f2/html5/thumbnails/11.jpg)
Mockups• Exact wording of text not needed. Include
headings to identify contents of the text (e.g. Why dogs are good pets”)
• Do not produce a uselessly vague mockup…
heading
picture
text
text
This sort of design is a waste of time. No-one could work out what needs to go on this page.