Category Archives: 3rd Party

Francis James Jewellers website re-design: Update #2

Revision

As I said in Update #1 of this project, I needed to fix the lack of adherence to the colour scheme already followed by the brand – as well as being recognisable by the local community, and used in various places from the current website to the Facebook page. I decided that, being a shop, the site also needed a better way to showcase new products or promotions, as well as a style that encouraged browsing by the user.

Form and Function

The traditional layout I had chosen previously had issues in that it was more suited to an informational type of website – with facts to show or passages to read and potentially sink time into doing so. For this website, it could be argued it would make better sense to allow users a way to quickly browse and find what they wanted, or even further so due to the nature of a Jewellery business, perhaps let something catch their eye above the other products – perhaps as a personal taste or for a gift.

sketch

I sketched out plans for a new layout allowing an image slider or promotional banner at the top of the site, as well as larger buttons underneath the header for recent promotions, and finally a section for information on the business and its history/context. I also planned to move away from the traditional structure for the reasons mentioned, and use a fullscreen layout, albeit not a one-page design due to the amount of content that would be hosted, making any system without categories difficult for the user.

mock4

 

Summary

I feel the concept I produced meets the needs of the site suitably. I adjusted the font weight on the bottom of the title in order to differentiate between the two main parts of it, and images for the slider would have to be processed beforehand in order to achieve the gradient fading into the header. Main links would be on the header as well as social media/contact icons, while incidental/contextual links would be in the larger buttons underneath, intended for promotional use at varying times of year or dependent on the stock cycle of the business. A minor improvement would be to change the font in the body text as it does not match very well with the two fonts already used – and more than two fonts on a page can begin to make the composition uncomfortable and inconsistent. A subtitle on the body would also create a cleaner and more informed layout.

Francis James Jewellers website re-design: Update #1

As part of my employment at Francis James Jewellers in Minehead (Francis James Jewellers – Ebay, 2014), I created some mock website designs as a contribution towards an eventual website re-design for the company.

Unlike tasks I have been carrying out at university and for personal projects, Francis James has a strong visual language already established – since the company was started before the web even really existed. Therefore I had a visual code to abide by in terms of colour scheme and general aesthetic.

Bearing in mind the traditional theme of the brand overall and the amount of heritage associated with it I did not want to design the site in such a way as to erase this – I wanted to retain the heritage associated with the company and the surrounding area of Minehead both for the sake of the company as well as the customers, who are typically loyal to this one shop and were generally repeat customers due to the location; touting a challenge in the context of digital design of not only working to an established visual style, but keeping the general aesthetic of the site relevant to a particular portion of a local market.

Image

I sketched out some initial ideas for the website and made a basic framework consisting of a banner/header section, a navigation bar and then a content wrapper. I spent time adjusting colours, fonts, and type parameters in order to achieve an appropriate outcome. I chose a wood background as not only did it compliment the colour palette of the company already, but it offered a traditional aesthetic alongside a modern website – which I feel serves nicely the criteria for this design in particular.

However, criticism for this design in particular would be the lack of adherence to the colour scheme – while it does offer the overall feel it uses the wood texture in place of a solid colour background which results in the brand palette not being fully utilised. I set about fixing in this in the next design.

Sources:

Francis James Jewellers – Ebay. 2014. Francis James Jewellers eBay Shop. [online] Available at: http://members.ebay.co.uk/ws/eBayISAPI.dll?ViewUserPage&userid=t6car [Accessed: 25 Mar 2014].

Fresh Tangerines – Logo Design

Image

 

So having spent 3 months here in sunny Bournemouth now, it only seemed fateful I might meet a group of like-minded creative souls and wind up in a Youtube gaming channel collaboration. Having volunteered to do a logo and set of channel art assets, I realised I needed to create something less serious, more light-hearted yet in no way ambiguous in its representation of the channel ethos as a whole.

I began by thinking of what the logo needed to represent, obviously the logo and assets that will stem from it in the future will be the face of the group in essence, and I made some consideration for what the channel was all about in order to devise a mental design brief I could follow through the design process. I thought it needed to have the personality of being “fresh” and/or “new” – thinking of the concept of routine user-created content delivery as a likeness of fresh fruit and vegetables being delivered to a market stall every morning. In light of this I ensured adhesion of the design to bright colours, positive and uplifting type and graphics with minimal noise in the communication to give a sense of honesty and minimise the ideas of obstruction and obscurity.

I ran into some pragmatic issues with the design itself during its conceptualisation – as you can see from the earlier incarnations of the idea it was difficult getting the text to fit into the composition without looking out of place, or having it contribute to awkward empty space. As you might also see from the design stages, I continued to experiment with the use of colour and the potential for gradients alongside this, which had the benefit of allowing me to see if the subtraction and addition of  colour and background features like the gradient and splat offered any leeway with the text. Alas, it did not.

A friend and fellow channel member suggested the idea of a headset instead of headphones during the process in which I was getting feedback from the other members; it was here that I realised not only would it reinforce what the logo represents (a gaming channel), but it would also free up some space in the most important part of the composition, allowing the text to fit in a more aesthetically pleasing way, balancing the composition with the direction in which the stalk pointed as well as shifting the text from being dead centre in a division of thirds.

Having solved most major issues with the design, I finalised the colour scheme and how background features would be used, and was able to concentrate on making the text readable, whilst remaining in line with the composition of colour in the design. I decided on using a white stroke for the text in the final rendition of the logo as I felt it balanced out the space around the text nicely considering the logo would most likely be often used on a white background, as well as adding a third small colour accent to the scheme without becoming too busy in doing so. 

The logo affords itself well to replication for the use of other art assets which me and another channel member have already briefly explored, due to a lack of gradients that fade out completely to the background, the possibility to restrict the design to just a shape and text for legibility, or even just to text – still being recognisable in and out of context. For example, expansion into a banner, header, small icon, or animated splash screen/video would be easy to achieve in the majority of cases with nothing more than the simple movement and resizing of layers.

Thanks a bunch for reading, as usual let me know how I did if you fancy, or leave a comment!

 

Image