Fireworks – Wireframing A Screenshot

stage one

The first stage of this exercise was to find three websites I liked the design of and take screenshots of them. The websites I selected were websites I was interested in as a designer but also just the layout of the site. So I then opened up fireworks along with my chosen screen shot and selected show guides and rulers. Then I dragged the guides to identify where different parts of the site had been structured to help with my design process.


stage two

After I had selected all areas of the sites structure I then began to fill in these areas I had split up. Filling these blocks allowed me to further more understand the structure and layout of the website as well as the design. This will also help me when considering my choice of layout for my sitemap.


stage three

When all areas are selected and coloured in the guides can now be removed showing just the coloured blocks. After I began to show which areas of the website gave information or imagery by including text within the boxes. Doing this allowed me to understand where certain aspects of the layout should be placed.


stage four

Finally I changed the colours from imagery to blue to show where furthermore where the images were. After showing which block meant what I hid the background of the website so all I could see was the layout. This helped me in a few ways such as considering layout and what type of information I would need to include in my own structure and design.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: