Experimenting With Web Design

Web design is the focus for our new module and very important to interactive media as presentation is key to audiences, for both professionalism and communication. Websites need to be able to confey what they are about and who they are for quickly to keep the viewer from clicking away, or going elsewhere.

A successful website must have:

  • Layout (which abides by the “Z-pattern” eye tracking),
  • Content (that is relevant and which is owned by the site creator),
  • Theme (which is continued throughout, such as “artistic“),
  • Colour (typically sticking to three),
  • And functionality (features which work).

Websites and software that could later be used:

  • Wirify – a website which transforms nearly any website into its wireframe, good to see if there are problems in the layout or the colour/ images,
  • Photoshop – for editing and visual representation,
  • Lorem Ipsum Generator – it creates filler text for content, allowing the design to add articles of writing as an example.

Putting This Into Practice

Screen Shot 2016-04-26 at 1.59.11 pm

Screen Shot 2016-04-26 at 1.59.49 pm
Snapfish UK Online Website

Snapfish is an online store for “photo printing and personalised gifts”. My group and I (Joe and Josh) looked at it to analysis it and see what we thought about it. Here is what Josh and I came up with:

Layout

Pros

  • It is very clean,
  • Easy to identifier where everything is,

Cons

  • Logo doesn’t stand out; bad for branding

Contents

Pros

  • The offers are the first thing seen without scrolling
  • Products are highlighted

Cons

  • Seems a bit highlighted

Theme

  • Minimalistic

Colour(s)

Main

  • White (background/ text/ parts of logo),
  • Blue (banner/ buttons),
  • Black (banner/ text),

Secondary

  • beige (Bottom of the screen; background to terms and conditions/ contacts)

Functionality

Pros

  • Concise,
  • Simple/ not complicated for user to find menu/ or any other feature,
  • Able to import photos from other websites and devices,
  • User is able to change to certain regions; will convert sterling to dollars etc

Cons

  • A sign-in is needed to use the features which may make some user’s uncomfortable by having to give their details

Rationale 

Ater complying the facts, Josh and I figured out that while the site works very well and there is little to be done, there could be improvements such as:

  • Changing the layout to better the eye-catch for the z-pattern,
  • losing some of the unnecessary white space by bringing some of the sections closer together

Editing Snapfish

SnapFIsh Website Edit
Snapfish Website After Edit

The Process

  1. Josh and I screenshot the website in sections and opened them (in different layers) on a new canvas in Adobe Photoshop, with the dimensions of 1920X5000 and the 300 resolution
  2. (On a new layer) I used the Eyedropper Tool to select the blue from the banner along the top, and with Brush tool and the Select Brush (keeps the colour inside the lines) Josh coloured the logo, the top black banner and the taps out.
  3. Going back to the website, I took the logo (which lucky already had an alpha channel) and opened onto Photoshop, dragging it onto our canvas and using cmd+T, scaling and moving the image and until Josh and I were happy.
  4. I go back to the original website and  -taking another screenshot of the hyperlinks on the left-hand side – pull that into Photoshop and move it to the right side with the remaining hyperlinks.
  5. There was then a lot of space in the middle of the banner, Josh and decide to move the drop-down menu to fill it despite worries that it make it cluttered. Josh uses the Select Tool to move it up but there is white colour around it from the background, he undoes the action and I take over to screenshot the menu from the original website. Opening it into Photoshop, I give the computer back to Josh as he uses the Magic Select Tool to delete the white from the image. We then drag it onto our canvas and use cmd+T to move and morph until we are satisfied.
  6. I go on to use cmd+T on the interactive banner, making it smaller and thinner. We then shrink the “Products” button, enlarge the “Feedback” button and move both the products, photos and technicalities to remove unneeded space.
  7. Afterwards, when there is nothing left Josh and I want to do, I do a few touchups on the banner by going over some wholes with the Brush Tool in the correct colour.
  8. I crop the unused, extra canvas space at the bottom and go on to Save as a png. for optimal quality.

I feel like this process was easier with Josh to help, whom I communicated with and worked with well. I feel like we did equal shares of the work and contributed by being compromising in terms of what we both wanted, enabling us to reach a successful result.

 

Advertisements

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s