Assignment 6 – Website

Task 1 – Produce a Website

http://dcsndesign.tk/

Task 2 – Evaluation

Technical Qualities / Testing Your Website

Upon completion of the website I checked that the site worked as intended for both computers and mobile devices. I used Chrome’s built in developer tools to view the site as it would be seen on a smartphone and tablet.

screen-shot-2016-12-12-at-21-39-54 screen-shot-2016-12-12-at-21-40-00

It was important to check that the content was clear when viewed on mobile devices as it was not something I had actively developed, rather I had used a responsive WordPress theme that would adjust content dependant on screen size. I feel that even on a smaller screen, the site works well.

Some aspects of the site didn’t function on mobile devices. The hover effect on buttons didn’t work although this is to be expected as you can’t hover over content with a touchscreen.

Button Hover
Button Hover
screen-shot-2016-12-12-at-22-23-14
Button No Hover

 

Additionally, the parallax effect I had set up on the background images didn’t work on mobile devices. The lack of it didn’t impact the experience of the site however.

Parallax - Image location is static, content scrolls above it.
Parallax – Image location is static, content scrolls above it.
Parallax - Adds layered depth to the page
Parallax – Adds layered depth to the page

Aesthetic Qualities

I had a good idea from the start on how I wanted my site to look, I feel that my moodboard reflected the general style I was aiming for and the wireframes reinforced this idea. I am confident the website has a clean, clear aesthetic and the use of white space and a mainly monochromatic colour scheme achieve this. The limited use of colours makes it clear to the user what aspect of the site they are viewing, for example using orange for page titles and active links in menus.

screen-shot-2016-12-12-at-21-53-15

The use of large background images with the content backed by a translucent white gives a very clean appearance.

screen-shot-2016-12-12-at-22-13-27

Overall I am very pleased with the aesthetic of the site and feel that I acheived the look I was intending.

Page Content

I am fairly happy with the content on the pages. I could perhaps have included some more text though I feel that too much would have subtracted from the aesthetic of the site. Similarly, I used images sparingly, only for relevant logos and backgrounds on pages, adding more images would have been hard to achieve if I were to maintain the clean aesthetic. I possibly could have added more as small thumbnails which when clicked would open a larger view in a lightbox, however I think that in the context of this website more images aren’t necessary. The images aren’t included to show specific things, rather as backdrops to the content which fit the theme and feel of the site.

screen-shot-2016-12-12-at-22-23-14 screen-shot-2016-12-12-at-22-23-24

It would have been nice to include some of my own photographs on the website but due to some time constraints I wasn’t able to. I was able to include a video I had produced and edited.

screen-shot-2016-12-12-at-23-06-34

This was produced prior to the design concept of the site being established. Generally it holds a similar aesthetic to the site, if time permitted I would have made some changes to the typography to connect it to the website more.

Planning; Preparation

I can definitely see the benefit of all the preproduction planning, particularly the creation of a Gantt chart to schedule the progress of the project.

screen-shot-2016-12-12-at-22-45-33

It was a really helpful resource to keep track of what tasks needed doing and by when, and building in a contingency plan was very beneficial as I did need to use it and it meant that I could still finish within the set timescale.

I can see the benefit of creating an asset log, as it allows you to document the images required and where they are needed. I didn’t have time to gather all the assets I needed prior to developing the website, plus the requirements changed due to a redesign. I had indicated on the asset log the types of assets I would need (e.g large background, small logo etc) and this made it quicker sourcing them as I knew what I was looking for.

screen-shot-2016-12-12-at-22-55-15

It is likely I would use a Gantt Chart (or similar concept) and Asset Log for future projects as I found it to be extremely beneficial in planning and organising the project.

Time Management

The production schedule was very useful in helping me keep the project moving on time. Even with delays, like the redesign of some pages from the initial wireframes, I could still complete the project on time due to including contingency in my timescale.

Technical Competence

I have built a couple of websites, as well as maintained others, using WordPress before so was familiar with the process. Some of the key constraints with using WordPress is as it is template based it can make sites looks generic, additionally, due to WordPress being open source software it can pose security issues. However, this also means that there is a lot of freedom in developing additional tools to use on the platform. In terms of distribution, a domain name and hosting space were required to make the site accessible, but beyond that WordPress allows you to create and publish a site very easily and quickly.  I hadn’t been involved in setting up a domain name and hosting before but was confident I could learn how to do this quickly. I use CSS regularly and am competent in using HTML so these aspects of the development weren’t an issue.

I have limited experience in producing videos but do have experience using cameras and image editing software so producing the video wasn’t too much of a challenge, as the concepts and processes were fairly familiar. Additionally, I use image editing software and deal with assets regularly so managing, editing and creating assets for the site wasn’t an issue.

Testing

I tested my site as I progressed through its development. Initially I was mainly testing it on a computer based browser as pages were completed. When I had completed the site I tested it on mobile devices, at first using Chrome’s Dev Tools mainly to check the layout and then on actual devices to check functionality.

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