“Sam made it very easy to bring my original idea to life as well as add some of his own creativity to elevate the final product. I would most certainly work with him again.”

Jamie – Musician

Summary

On this project, the client was a musician with lots of social pages. They were looking for a link-tree style site that they could use to manage the links for their multiple pages. They also wanted something that was more visually appealing and could be expanding into a full site if necessary.

jwa logo design thumbnail
Logo Design

To start with, I had a look at the clients social pages and saw that they had multiple logos / images used across several different platforms. Since this website was meant to streamline the client’s online presence, I felt this was a good opportunity to help unify their brand across all platforms.

Taking inspiration from their existing content, I used Xd to create some branding that helped bring their content together. I designed a new logo, inspired by an existing one but updated to go for cleaner, bolder look.

jwa wireframe
Wireframe

I selected a Heading and Body font to compliment the logo and created a consistent feel. For the colour scheme I created a palette that matched the hero image; tying the image to the site. (The client had already selected a hero image as the main visual element so I tried to build the site around this element).

After making some decisions with the client we managed to agree on the final design for the page. I feel this design works at creating a unified and stylish look for attracting visitors.

 
Image Editing

When starting out with the design I was having trouble arranging the hero image properly so I decided to edit it in Photoshop. First I cut the subject out of the background (since the background was interfering too much). I was able to remove most of the background with the magic wand tool (since most of it was the same colour).

But to clean up the edges, I traced around the image a with a solid colour to create a border and then used the magic wand again to remove the last bits. To replace the background I create a radial–gradient using colours from the original image. And lastly, I did some colour correction / saturation on the subject to add in more colour since the original was quite grey.

blank theme creative
Weebly Elements

This project was built using Weebly so I started with a blank theme I had made from a previous project (Weebly-Theme). This was originally based on a default Weebly theme, which meant it contained all the css needed for the basic Weebly elements. I then loaded my own stylesheet on top of the blank theme to allow me to edit the Weebly elements further.

One of the aims of this project was to integrate with the Weebly editor more. This was to allow the client to continue editing and managing the site in the future without needing to change any code. I started by building the site with only Weebly editor elements and used the properties inside the editor. Then when I needed to customise thing further to fit the design, I added my own extra css.

jwa font awesome integration
Font Integration

Additionally, I wanted to integrate the fonts and colours I was using into the editor. For the fonts, I did this by adding the font files as theme files and then assigning them with css. This meant they could be selected inside the editor’s font options and managed from there.

jwa colour options integration
Site Colour Integration

For colours, I needed to add colour variables to the manifest.json. This adds the colours to the theme options menu inside the editor. They then can changed via a colour picker and the associated elements will change e.g. all the headings, all the links etc.

jwa custom bg layers
Background Image

Background Image To get the background image effect I wanted, I had to create some custom image layers in html for the header.html template. In total I ended up using 5x background layers:

  • – The body-layer, which was set to dark blue to use as the footer colour
  • – Two layers of solid colour. These were placed on top to fill any gaps with the gradient-layer
  • – The gradient image, which was placed on top of the colour layers
  • – The jumping hero-image, which was placed on top of the gradient layer

The result of this, was that I could re-arrange each layer as the page changes on different screen sizes. This ensures that there are no gaps in the background and the site looks good on all screen sizes. Additionally, the layers allow the page to expand downwards as more link boxes are added. I achieved this by expanding the solid-colour layer without stretching the gradient image; creating a smooth transition between layers.

Lastly, there was an issue where the layers ‘popped’ in when loading the page. This was due to the fact that I was handling lots of layers and they would load-in sequentially. To help smooth this out I used JQuery to add my own custom Fade-in animation on the foreground elements. This helped the page load in a much less jarring way.

link wrapper
Link Boxes

The link-boxes are another element that required some customisation to function properly. The boxes mainly consist of Weebly elements and built-in options from the editor. However, to load in the icons I had to assign Font Awesome 5 icons as a font in css. I then assigned the solid and regular FA5-icons as bold and italic variations in css. This allows me to have access to all three icon packs from within the editor.

Secondly, I was unable to assign a link to the whole link-box since Weebly only allows links on text or images. So to get around this, I wrote a small javascript file which adds the link for me. The script looks for a html class that is assigned to the coloured box and then wraps an anchor tag around it. It then gets the link destination from the link text inside the box and adds this to the tag. This means that the whole box functions as a link and enabled me to create a hover effect on the whole link box. This really highlights the links on the site and makes a much bigger visual impact.

jwa custom form
Web Form

Lastly, the client asked me to add a contact page with a web form. This was easily achieved by adding a new page and using the Weebly form element. However, I did customise it further with css to create something a bit more visually interesting than the standard form. I also added a pink hover effect to tie it in with the rest of the site.

To use the form, the client can use information in the notification emails from Weebly. These notification contain details from submitted messages and include a contact email, which the client can use for replies via email. This is a fairly basic set-up so I may upgrade this feature in the future.

Animations / Effects

  • -Link hover effects
  • -Fade-in animation

Resources