Website – Production Process

Here is the technical production of the website, step-by-step (almost).

Initial Wireframe

The first ever concept for the site was a basic wireframe I created with balsamic;

Screen Shot 2016-05-10 at 12.30.02

This illustrateds the most basic layout for a possible website.

I  designed the website to be very easy to navigate, with the homepage only presenting 3 main buttons to each of the pages. The white boxes are featured images representing each page, with a large image banner at the top with a logo. The homepage also contains quick and easy links to any relevant social media sites.

The website was designed with large images and easy navigation in mind, 2 qualities that client expressed she wanted for her site.

Essentially, this represents what we ideally would have created, were we not restricted by WordPress.

Photoshop Concepts 

Me and Sunny went about creating some more fleshed-out concepts for the site, which would later dictate the final look/theme.

screen-shot-2016-05-23-at-10-25-071

screen-shot-2016-05-23-at-10-25-212

A more finalised concept, bearing a remarkable resemblance to the finished product. Using the same layout I created in Balsamic, we added media and a placeholder logo, until I could finish the one we designed. The colour and theme reflect what the client wanted, and we were happy with the overall look.

screen-shot-2016-05-23-at-10-25-551

Animation

One of the more technical aspects the client requested was an animation. More specifically, an animation of a boat sailing across the screen.  With my knowledge of Adobe After Effects, I set out to create a simple .gif animation.

These are the simple assets I created in Paint.NET

screen-shot-2016-05-17-at-12-14-27

The animation was going well until I found that my time was best used elsewhere. There is a surprising amount of complications to consider when making a .gif for a website, and even more to get the animation to loop indefinitely and seamlessly. In the end it never happened.

Actual Website Production 

Finally, we started the actual site. It was at this point Sunny decided to really contribute with the project.

screen-shot-2016-05-23-at-10-59-171screen-shot-2016-05-23-at-10-59-321screen-shot-2016-05-23-at-11-00-271screen-shot-2016-05-23-at-11-03-01screen-shot-2016-05-23-at-11-06-051screen-shot-2016-05-23-at-11-12-301screen-shot-2016-05-23-at-11-18-47screen-shot-2016-05-23-at-11-33-041screen-shot-2016-05-23-at-12-05-35screen-shot-2016-05-23-at-12-17-351screen-shot-2016-05-23-at-14-31-53screen-shot-2016-05-23-at-15-28-541

The steps:

Me and Yasmin created a WordPress account, and 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” Yasmin and I decided on as we both understood that it would have to image orientated and this theme’s main focus was the images, and the theme more closely resembled our photoshop concepts.

Picked a colour scheme, 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.

Me and Sunny created a banner in Photoshop

Fixed an issue with the banner being slightly transparent with the theme by changing some settings.

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 Yasmin and Gail had written.

 

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