Wireframes and UI Screen Interface Compositions For Assessment 2



Image: N, A. (2014). Wireframe Example [Image]. Retrieved
from http://www.conceptdraw.com/solution-park/software-website-wireframe


In today’s studio session, we continued with our assessment task 2 and were asked to quickly and roughly sketch out our individual wireframes for our project.

Below are my rough wireframe sketches for my interactive assessment task 2.

Week 6 Studio- Wireframe 1 Activity Roughs.jpeg

We then went into adobe illustrator and used a 1200 grid system, to refine and to allow users to better understand the sketched wireframes we drew.

Below are examples of  wireframes that I produced in adobe illustrator for my project idea.

Home Page
Week 6 Studio Activity- Wireframe 1 Homepage.png


Recycled DIY Page

Week 6 Studio Activity- Wireframe 2 Recycled DIY.png


DIY Craft Example 1 Page

Week 6 Studio Activity- Wireframe 3 DIY Craft Example 1.png


Connect Page

Week 6 Studio Activity- Wireframe 4 Connect.png


About Page

Week 6 Studio Activity- Wireframe 5 About.png


Organisation on Recycling

Week 6 Studio Activity- Wireframe 6 Organisation on Recycling.png

After completing the wireframes, we were then asked to pick 1 screen interface (or page) from our project and design 3 possible versions with alternative layouts.

Using the 1200 grid system in adobe illustrator, below are the 3 different composition designs of the home page of my project idea.

As well as, after creating 3 versions of the home page, we were then asked to discuss the graphic approaches taken in the screen designs, list the best features and design decisions and list 3 improvements that could be done.

Version 1


Week 6 Studio Activity- Composition V1.png


Design Approaches:

For version 1 of my composition design for my home page, I have decided to go with a standard and simple layout. I started off with a header, my logo in the centre and in the top right corner a register and login button. The logo will also act as a home button, so that users can click on it to send them back to the home page. Following header, is the main navigation, where I divided my information into 4 categories and as well used the drop down menu design pattern.  After I designed a home page picture, placing the image on the left hand side. I also included a description of an introduction to the website on the right hand side, so that users are introduced to the content and information available on the website. Lastly I included a big footer at the bottom, where it has a copyright mark, to avoid any other users from copyright issues. As well as in the footer I included social media icons which will act as a link as well, to allow users to connect with their social media and post or share.

Best Features/Design Decisions:

  • The placement of the log and register and log in
  • Colour Scheme
  • Simplistic Layout
  • Symmetrically aligned, making the website look clean and professional


  • Make the header smaller, taking up too much space of the screen interface.
  • Add more social media links to make it a universal website for everyone to use in most common social media websites.
  • Show drop down menu in composition for assessment 2 submission


Version 2


Week 6 Studio Activity- Composition V2.png


Design Approaches:

For version 2 of my composition design for my homepage, I have decided to change the layout with another standard design pattern. I started off again with the header, but the logo is now in the left hand corner, although will still act as a home button to allow users to come back to the home page. In the header I have decided to include the main navigation next to it. The 4 categories will still remain its drop down menu design pattern, as well as the register and login buttons are kept the same. After I continued with having an introductory image and description, although this time I swapped the text to the left hand side this time and the image on the right to see what looked best. Lastly  I remained with using big footer at the bottom, where again my copyright mark will be along side social media buttons.

Best Features/Design Decisions:

  • Colour Scheme
  • Introduction Image
  • Font is clear and readable
  • Graphics are eye-catching and not intimidating


  • Make logo smaller
  • Spread out main Nav on the side, looks tight and squished
  • In the space above the main Nav bar, maybe add a search bar



Version 3


Week 6 Studio Activity- Composition V3.png


Design Approaches:

For version 3 of my composition design for my  homepage, I went back to the first version design and used the standard simple layout. The layout is the same  as version 1, although the only aspect I changed was I decided to remove the introduction text and place the introductory image instead by itself in the middle. I decided to this because users maybe turned off by large amounts of text and would rather like to see a picture. The logo is again the middle, acting as a home page link, and the register and login buttons still remain in the top right corner. The main Nav bar again follows after, separating my information into 4 categories, all acting as a drop down menu. Following the image, I again used the big footer were copyright mark is placed along with social media links on the right bottom corner.

Best Features/Design Decisions:

  • The site is inviting
  • It is clearly spaced out so components of the website won’t be missed
  • The logo clearly represent the project idea


  • The home page looks bare and plain without text
  • Can look incomplete with the large amounts of white space
  • Need to add little text or other components

Through this studio activity, we were able to complete some of our wireframes and final screen compositions for our assessment. As well as, the evaluation of our sample screen compositions we were beneficial for they allowed us to access which design patterns worked or not, allowing us to further improve our compositions for the final submission.


Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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