Month: June 2016

Website – Team Collaboration

Main Roles 

Our group tended to drift from role-to-role depending on what was immediately important/available, but loosely we stuck to these roles;

Planning/Client Consultation/Writer – Yasmin

Coordinator – Damian

Graphics Design/Website Development – Myself

Concept Design/Web Development – Sunny

Personally, I developed the website graphics. This includes logo, headers, product image editing and general look/theme coordination.

Communication

Team communication was achieved mainly through emails and social media. Damian was in charge of delivering updates to the three of us via email, whilst myself and Sunny mostly used Facebook.

This is a conversation me and Sunny had regarding the design of the logo. Sunny suggested it looked more like a header image than a logo, which in many ways is true, but we both ended up agreeing that it looked fine on the site.

Communication Issues 

The only issue that occurred was between Sunny and Yasmin, who outright refused to communicate at all for the most part of the course. Her dislike of Sunny didn’t come out of nowhere, though- as Sunny chose to be absent for at least half of the module, choosing only to get involved when the actual site construction started. Though I originally had prejudices against Sunny for just not cooperating, I found him to be very useful concerning both photoshop and getting around WordPress.

I had general issues communicating through email, as I wasn’t particularly familiar with outlook, and often forgot of found I was unable to reply to any of Damian’s frequent updates.

Communication Positives 

From the start, me and Yasmin had very similar ideas as to what to do in terms of design for the website, and I found that to be very helpful when finishing the overall look and designing the logo. Damian’s updates were frequent and informative as to what was currently happening/what needs to be done, and Yasmin’s feedback from Gail helped the team polish the website to the client’s specific requests.

 

Advertisements

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.

 

Website – Logo Design

For the website, our client had requested we create a logo. She wasn’t specific in hat she wanted, just something nautical-themed with her name in it. Both me and Yasmin thought we’d have a go about getting some rough sketches down.

Yasmin’s designs:

screen-shot-2016-05-11-at-10-32-34

My designs:

screen-shot-2016-05-11-at-10-33-23

We presented them to the client and she liked both aspects of the design, so we merged them together to create the final design.

screen-shot-2016-05-11-at-10-32-23

logo-preview

The client was happy with the logo, and so we included it in the site.

 

 

 

Website – Final Evaluation

This module was tough going, to say the least. The lack of general organisation, creative freedom and the shackles of WordPress had left me with a sour taste for web design. Aside from the clients not completely understanding what our limitations were and demanding certain aspects/modifications that were impossible with WordPress, I found the group work to be a slightly difficult.

I’m normally very well working with a team, but up until the last half of the module Sunny almost refused to cooperate at all, and Yasmin wanted nearly nothing to do with him, due to some bad run-ins they’ve had in the past.

We were however fortunate enough to have an agreeable (for the most part) client, Gail Trezise. Gail owned a small ceramics studio, and was very transparent about what she wanted the site to include. The main things she requested were:

  • A Blue-White, clean colour scheme
  • Good photos displaying her work
  • A custom logo with her name
  • An animation of some description

We tried our best to achieve what she asked of us, and here are the results.

screen-shot-2016-05-24-at-20-39-00

screen-shot-2016-05-24-at-20-56-01

screen-shot-2016-05-24-at-20-56-26

screen-shot-2016-05-24-at-20-56-47

logo-preview

The production of the website was smooth enough for the most part. We initially tried to allocate specific jobs, but found we tended to just drift to whatever needed doing at the time, and collaborated on most aspects of site. Communication was somewhat lacking at first, but we generally warmed up slightly nearer the end, and we managed to complete the project.

I personally handled most design aspects of the website, designing the logo, layout, and photoshopping the imagery.

Yasmin was in almost constant communication with the client, handling feedback, records (in the form of day-to-day production diaries), and also assisted me greatly with design.

Damian produced the pre-production schedule, contributed to almost every other aspect of the website, and provided the imagery we needed for the products and headers.

Sunny didn’t do anything up until the actual website creation, on which he proved very helpful to me ironing out the website and getting around WordPress’s infuriatingly limiting editing tools.

On the topic of WordPress, we found it to be frustrating and borderline impossible to get our desired results, to which our client was most unimpressed. Honestly we ended up with something what only slightly resembled what we had in mind, and the worst part is that we had absolutely no power to change that with a free WordPress account.

On-top of that, the client started to contradict what she had mentioned she wanted at out first interview, which forced us to rethink and re-design the site a few times to ensure she got what she wanted. This didn’t help matters much as we had already established the website’s design and we had to cut corners here and there.

In the end, the client seemed to like the like the website well enough, although I don’t think its what she expected. Unfortunately due to her being busy, we didn’t get any relevant feedback back quickly enough to really act on it, as we were nearing the hand-in date.

 

 

Website – Site Map

Yasmin had kindly created a Site-map for our website. It was created in order to show how the website will navigate, as part of our preparation and pre-production.

Key:
Straight line – on another page
Doted line – on the same   page but  requires scrolling

screen-shot-2016-06-14-at-10-30-10