Design Tools

[iamscott]

Hey guys,
What are the essential differences between a Layout Diagram, Storyboard and a Mock-up diagram. To me, they all seem very similiar.
Cheers

[abzzzz]

Layout diagrams are are the solution is going to look like, once it's annotated. It shows all the links, validations, fonts, sizes, colours and all that
a storyboard is for websites, it's like individual page analysis and it goes through everything thats on that page like photos, links etc
mockup is for websites too, but fromm the top of my head im blank

Wait for Laseredd to reply, he'll give you a better answer

[iamscott]

Thanks for the quick answer.

Yeah, from what I've ready Storyboards and Mock-up diagrams seem to be very similiar. I think one of the main differences is that the Storyboard are a design tool for each individual  page whereas a Mock-up diagram is used to show the actual website at completion (inc. layout, graphics, fonts, colours).

[Lasercookie]

Mockup diagrams are for individual pages. It plans out where and what type of content will go, the layout and the formatting. It also gives a decent amount of detail - e.g exact fonts and sizes. You might also see them called annotated diagrams.

Layout diagrams are similar, but they focus more on the layout (self-explanatory... ). You look more at where stuff goes and formatting type stuff (e.g. headings etc.). Also a fair amount of detail when it comes to formatting (you'd include the exact image sizes and if text is bold).

A storyboard is used to show the structure of each page, how each page links together, background colours, screen dimensions, filenames etc. Visual overview of the entire website I guess. Think of film storyboards, they cover a lot of different shots - for websites they cover a lot of different pages.

Obviously with the similarity between mock-up and layout diagrams, if you're using both then you wouldn't use it to communicate the same information.

[iamscott]

Ahh okay. I guess the mockup diagrams are just more visual as well. Thanks for the reply.

[Lasercookie]

Ahh okay. I guess the mockup diagrams are just more visual as well. Thanks for the reply.

They are all visual tools?

[iamscott]

Ahh okay. I guess the mockup diagrams are just more visual as well. Thanks for the reply.

They are all visual tools?

Sorry for the ambiguity, visual meaning closer resemblance to the final product. You're right, they're all visual tools

[xtremeownage]

so pretty much mockup,layout and story board are the same lol.

[MJRomeo81]

Layout = Shows the common features of pages

Storyboard = Each individual page in great detail

That's the only big difference you need to know. I wouldn't be too concerned with all of the intricate details. As long as you know when structure charts, ERDs and IPO charts are used, you should be all good.

Another one is the difference between data structure TABLE and data structure DIAGRAM. Massive difference that stuffs a lot of people up. The 'table' is referring to all of the properties of the fields (names, size, data type, validation rule & text, etc.) whereas 'diagram' refers to the relationships between tables in a database.

[Lasercookie]

so pretty much mockup,layout and story board are the same lol.

No, there's significant differences which I outlined in my post and MJRomeo has also outlined.

[xtremeownage]

ye - i think the main one they ask though is a layout diagram (websites usually in the vcaa past exams.)