Production of Website

Here is the evolution of our website from the wire frame, to the photoshopping, onto the finished product, mostly done by Ben and Sunny.

Wire Frame

Screen Shot 2016-05-23 at 16.07.12
Ben’s Wire Frame

The wireframe was to think about what the website should look like if we had complete creative control, though we figured out quickly that we wouldn’t have that much freedom with using WordPress.

Photoshopping Mock-up Websites

Screen Shot 2016-05-23 at 10.25.07



Screen Shot 2016-05-23 at 10.25.21.png

Above is what Ben and I did together, changing the banner to not go across the screen complete and instead end with the a photo.

Screen Shot 2016-05-23 at 10.25.55.png

We decided to change the banner again by using a place holder logo as an example of what it could look like with our client’s and using a colour fill behind. I also played with the photo lighting for the hyper link images at the bottom and also cropped them to fit.

Starting The Animation

Above are the images that Ben created in Photoshop for the animation.


Here is Ben trying to start the animation that Gail requested for – perhaps – a border.

Production Of Actual Website

Below are the steps we applied:

  • Created a WordPress account; Ben and I kept in mind that our client (Gail) wanted it to be her business name “Art-Ceramics”.
  • Added the members of our group as admin.
  • Chose a theme; “The Affinity Theme” Ben and I decided on as we both understood that it would have to image orientated and this theme’s main focus was the images.
  • Picked a colour scheme; needed to include blue and white.
  • Add pages (Main, About, Gallery, Contact); we had already discussed what pages Gail wanted/ needed so it was easy to get them done.
  • Photoshop a banner for the website.
  • Fixed some issues with the banner; such as a filter being automatically and the page titles – also – being automatically added to the banner.
  • Put a widget onto the gallery page to display the product photos.
  • Change font to something more appropriate to the client’s wishes.
  • Content text replaced Lorem Ipsum to what I had written





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