Workshop 6: Wireframes & Sitemaps

08/03/17 – Wireframes & Sitemaps



Above is a wire-frame for a dating website made using Photoshop, alongside the post it note sitemaps of each group.


The aim of this workshop was to rotate around each group in the room, adding in pages and features you felt should be on the site. This rotation technique allowed us to build on others work to develop each stage of a the sitemap, complete with key features and layout suggestions. Once back at your respective work, you were left with the finished sitemap built on by others, and a general aim for the design. My group were given the task of developing a dating site. This process is similar to how a client would layout a sitemap and design in a company setting, and task you with fully designing the site.

The feedback left by others was incredibly useful, noting useful features to add and a general hierarchy of important elements the user would want to see first.

The wire-frame grew from this into its current stage. The primary navigation bar is easy to both find and access. Success story images take the front-line, followed by a brief about us paragraph, detailing the purpose and aspirations of the site. Additional images follow this, peaking above the fold to inform the user there is additional content below. Other details are in standard positions for continuity, such a the logo on the top left, login on the top right, and secondary content to the right of the page.

The use of the sitemap allows for the client to have an overview of how the site will function, the combination of a rough wire-frame also allows for a guide as to what it will look like before heavy design production kicks in. This is a crucial step, as designs can be changed at this stage without large development setbacks. Due to the nature of sitemaps, clients can also bring in their own pre-planned ideas to help explain to development teams what they desire, and even create a rough wire-frame using pencil and paper to get the site exactly how they want it.


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 )

Google+ photo

You are commenting using your Google+ 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