12/03/2018
After successfully creating a child theme for my WordPress site at the end of last week, I was excited to dig into coding the CSS. The entirety of my project so far has not included any code and has been very research based. This is to be expected in my profession as a UX designer, as opposed to a front-end developer, but it’s exciting to be able to code my ideas nonetheless. I spent the majority of my day concentrating on getting each element on par with my colour scheme and making it look as professional and friendly as possible. The theme’s underlying technical attributes are what attracted me to download it in the first place, however, I have a greater vision for it than the original black, purple and white colour scheme and simplistic use of images and text. I was not editing in any sort of order as I was open to seeing what looked best as I went along, but after getting to grips with using CSS again, after not using it for a few months, I thought back to my previous post regarding the white space feeling too empty. This was a great place to start so I referred to my colour scheme and chose the mid-tone brown as a background for all the pages. On my personal blog, I have a light grey background with a slighter darker grey design over the top. It gives the pages a sense of depth and is a simple way to make a monotonal background more exciting. I tried this with The Greenhouse Trust’s website and the results did not disappoint. I looked through a few royalty free vector images on Vecteezy and found a Celtic type tree design. I needed to use a vector image so I could scale it to any size required.
I downloaded it to edit in Abode Illustrator. Firstly, I took away the grainy overlay because I wanted it to be a full image. I did like the overlay to start with because it gave it a rustic feel, but for the purpose of a background, I didn’t want it to look too messy and visually confusing. Following this, I removed the background colour and cut the image to exclude the rays outside of the circle. Now I needed to consider what shade would best compliment the brown background from my colour scheme. Initially, I tried two shades of grey as per my personal blog.
I soon saw that the grey was not complimenting the light brown and I felt like it gave off a depressing feeling. The text became less legible with the lighter grey tones so I replaced it with the darker brown shown below. It aligns better with the overall colour scheme and does not distract from the black text. Luckily, my WordPress theme was able to align the image so it is fully responsive and fits horizontally on any size screen.
Following this, I wanted to further my exploration of a gradient background for the navigation bar. Seeing as this is my ‘pride and joy’ of my whole project, I want it to look neat, appealing and professional. Originally, I tried a vertical, linear, light green to white gradient but this looked tacky and distasteful. After this, I tried a fade-out to transparency, alas this looked even worse because the menu text was clear enough when the user scrolled down the page. I considered integrating keyframe animations with the help of this CSS Gradient Animator but I actually prefer the simplicity of a two-tone, soft, unanimated gradient. For the footer, I chose to keep white text on a black background so it doesn’t distract from content being displayed and compliments the darker tones in the colour scheme.
13/03/2018
From the beginning of the development stages, I have been struggling with how to showcase the top parallax on the front page. This will be the first thing users see when they connect to The Greenhouse Trust’s website so it must be warm and inviting as per the real-life café’s vibe. I have always been certain that I want to include an image that stretches across the full width of the screen with introductory text over the top. I looked through a few royalty free images on Unsplash relating to food and veg but all the images I came across distracted too much from the main body of text. I then started to think outside the box and go for a more naturalistic approach. This is when I found the image currently in use of a vine up a white wall. It adheres to the colour scheme, is simplistic and gives the user a gentle introduction to the atmosphere the charity is trying to create. The black text was showing up well against the white background, however, it was difficult to make out the smaller text underneath over the green from the vine. I needed to somehow lower the opacity of the image behind the text. My first thought was to directly edit the image in Illustrator, but with the way the page scrolls, the opacity would have to stretch quite far. In particular, if the website is opened on different size screens, the image would have a portion of lowered opacity in misalignment from the text. As a result of this, I chose to create an opaque white box to compliment both the black text and background image. Unfortunately, in the box I created with CSS, the opacity 0.6 setting effected everything inside that div, not just the box.
.col-md-8.col-md-offset-2.col-sm-10.col-sm-offset-1.text-center {
background-color: #ffffff;
opacity: 0.6;
border-radius: 50px 20px
}
I spent the rest of the afternoon trying to figure out where I was going wrong but I just couldn’t get my head around it. I settled to try again tomorrow.
14/03/2018
A new day provided a fresh insight into the previous day’s problem. The opacity filter was being applied to the whole element, whereas I only wanted it to be applied to the background. After some more light research online, it then became obvious to me that I needed to apply a rgba colour value which incorporates its own opacity setting. As a result, only the colour being applied to as the background is altered.
.col-md-8.col-md-offset-2.col-sm-10.col-sm-offset-1.text-center {
background: rgba(255, 255, 255, 0.7);
border-radius: 50px 20px }
Following this, I placed additional features into the footer to add convenience and make each page feel complete. Such features include opening times, contact details and linked social media icons. The contact details and social media icons were readily available from the Shapely theme so though time-consuming, it wasn’t a difficult task to enable them. I chose to incorporate these particular features because I believe these to be the most important pieces of general information and therefore are able to be displayed on all pages. For example, if a user is viewing information on the ‘Food’ page and they have a sudden thought to whether they are open now or not, they will easily be able to scroll to the bottom and find out as opposed to finding another page that includes this information.
To finish off the day I wanted to tackle an issue that had come up in my prototype test. When I asked my testers to perform tasks in the user persona of Deborah, one of the pages on my website I requested them to visit was the ‘Contact Us’ page. On this page they were greeted with a Google Maps API I had installed, displaying a map of a small area of Norwich where the café is located and a pinpoint on the café itself. This was effective to a certain extent and was able to adhere to the bare minimum requirements, such as just being able to see where it is in comparison to other nearby establishments. However, one of my testers quite rightly pointed out that they could not request directions to the café from anywhere else. As a result, this restricted usability of users travelling from outside the city centre and this case, this demographic must be catered for. The Greenhouse trust wants to unite people from many walks of life and a simple usability issue like this could have a knock-on effect on the ethos they are promoting. To solve this, I went to the Google Maps API website to see if I could find an alternative solution, better suited to my needs. Unfortunately, this endeavour was unfruitful as I wasn’t able to hack into my theme’s HTML or JavaScript to add the relevant code. I went back to basics and looked at the original Google Maps webpage for inspiration. It was then that I realised that the answer was a lot more obvious that I thought. All I had to do was input the destination I required, in this case, The Greenhouse Trust, click the ‘Share’ button and select ‘Embed a map’. This way, I had all the features of the regular Google Maps directions feature easily sized to 1140 x 300 pixels. One of my favourite things about using this embedded map is the ability to link it to the Google account already logged in on the device being used. The user is able to save the location for future convenience and even leave a review. Afterwards, I needed to complete some general housekeeping on my website. There were odd bits missing and I felt like I was in a good place to accomplish these little missions.
- Finalised the ‘Art’ page gallery and information – I completed the featured art gallery by ensuring all the names were correct and all images displayed correctly. Additionally, I played with the built-in plug-in features and made sure all the images were displayed in a tiled format on the page. Lastly, I typed up the information about the Climate Change Challenge and placed this underneath the gallery. This text states the logistics of the art competition they are putting on in conjunction with the Norfolk and Norwich festival.
- Developed the literature section – On this page of the website, users can find out about The Greenhouse’s bookstore and read featured poetry written by local writers. I added a small description and linked PDF file of their Gift Aid Form, as per their original website.
- Finalised the associated charities page and created links to all external websites – The ‘Associated Charities’ page was always going to be tedious and time-consuming. The list consists of 68 company names, all to be hyperlinked to their external web pages. It was a very satisfying feeling to complete this.
- Reduce loading time of homepage images – During general development testing, I realised the top parallax image took quite a while to load (with an empty cache). It took 36 seconds to load at 6000x4000pxs so I reduced the image to 2000x1250px and it loaded in 15s. This also made me realise that I needed to reduce the size of more images on my website and that I had been testing development with caching enabled.
My big task for the day, however, was to create a meet the team page. As is common practice using WordPress for this project, I accomplished this by using a plug-in called Teams. Due to a substantial usability issue on their original website, I needed to make this new page as intuitive and user-friendly as possible. On The Greenhouse Trust’s live website, the top section contains images of their staff members and volunteers with their names underneath each image. Underneath this section is the adjoining text for each member, consisting of a general description of themselves and their role within the charity. This presentation of information is extremely awkward and provides a great barrier between 2 relating pieces of information and should be available in one hit. The main reason as to why I chose this particular plug-in is because it fixes this problem entirely. I am able to have their image at the top, a description underneath and can add links to their individual social media or artist portfolio websites. and even has the added option to change the colour of the top bar of each team member. I chose green to go with my colour scheme.