Wimbledon Brewery UI – This project was carried out through a local agency based in Wimbledon. After some initial meetings and discussions with the agency Director, I was commissioned to come up with an early proof of concept for a new website idea for Wimbledon Brewery. It was to pitch a new idea.
I was commissioned for only the ideas and visualisation stages of the project. My part was to come up with a new UI ( user interface ).
In this post, I wanted to share both my involvement, and some of the processes to create for this project.
Gathering Research | Working With The Brief
At first, I went over the brief with my client and discussed the limitations or any important criteria that would affect the project.
After collecting together all of the information for the project, I then set about gathering some additional research and ideas. This could range anything from looking at recommended drinks companies, looking at competitor websites to seeing what we could learn. And browsing Pinterest to name a few.
What was important – was that the brand image of the company was sustained. The UI design needs to stand on its own two feet with the brand being seamlessly integrated.
Roughing Out Ideas
Once some of the initial research was collected together, I then set about putting together the low-fidelity visuals and ideas to share and discuss.
Initial Design & UI Kit Pieces
Bit by bit, I started to put together some initial designs for the various components on the page. For example boilerplates, brand accents, information cards, and the main navigation amongst other important pieces of content.
The design process and the idea generation were created modularly. Key components were examined in close detail before committing them to a polished design and compiled into pages in their entirety.
Proof Of Concept | ( POC )
After the various stages of discussion and mutual brainstorming with the client. I then started to put together some complete and polished visuals for the early proof of concept for a new website.
*This was put together for illustration purposes only
This is an example of a User Interface and website revamp project for a large community centre based in King’s Cross London.
My role in the project involved brainstorming ideas, drawing the new content and banners, considering the user experience and seeking ways in which to make the website design more user friendly, functional and useful for users of the Living Centre.
The brief
After a couple of conversations and a Zoom call with the team at the Living Centre, I was commissioned to design and revamp the website to ‘look less boring’, represent the institution and add some more practical functionality.
I took this a step further. Although digital design is a faucet of my skills like many designers of 2020’s. I wanted to add more than just a simple “yes man” approach to this project. With my commercial experience and creative direction skills. I didn’t want to just say ‘bam’ take their money and go. There is a website and leave. I wanted this website to work not only as part of the brand but as a website and tool for their business.
Without barraging my client saying ‘do this better, because I think so.’ I wanted to know what needed to work. What questions do customers ask – I wanted to do my homework.
These were the starting blocks, and – it should be noted that these were not all of the questions and rounds of discussions.
The home page needed a lot of TLC
After communicating and carrying out research, I had both inspiration and the key criteria in order to create a new look and feel for the website.
I started exploring the ideas with the homepage first.
The home page, as is the case with most websites, was one of the busiest pages in regards to content and information. The Living Centre’s page was loaded with information but in no particular order and without many calls to action either. I tried to turn the home page into a lobby with well-labelled doors and opportunities to funnel users into either making contact or leading to a making money lead enquiry.
I tried my best to capitalize on this page while trying to keep it to the client’s brief. Very accessible, on-brand, interesting, informative and structured. Some of these changes and updates would appear subtle to the outside reader. But many, even the smallest changes were generally very deliberate and considered.
When recreating this page, I tried to break it down into structured manageable and relevant chunks for the web user.
Design The Hire Page
This page actually was a follow-up project after I have revamped the core look of the website and rebuilt it with Divi. Their website and this page had a lot of untapped value.
Upon spotting the hire section needed some more content and juice, and I got to it.
This page covered both coming up with additional UI designs ( although the guides were now already set due to the first project ) and creating more content too.
Website Design mock ups
Some examples of this are illustrating a top-down view of a floorplan for all the rooms to hire, prices, 3D drawings / oblique drawings of the areas, bolder use of area photography amount other various things.
I tried to make this page a silent ‘Hire Space!’ salesman for the Living Centre.
The illustration I created was used on the website
Experimentation & Design
The brief from Living Centre was nothing quite like what I have worked on before. Creating websites and UI’s, I have worked on plenty of these. Creating plan drawings and landing pages. I have worked on these too. But having all these combined into one single project was an interesting challenge.
Below are some samples of the design, such as the banners and some f the early works in progress.
Website Design | Putting the website together
The website was already made using WordPress and Divi. After working on the design stage for the project I was also commissioned put it all together based on my visuals.
Being an existing licence holder of Divi it was not too much of a stretch for me to build these new pages and add the content I had illustrated and designed. I worked in a non-destructive way for the home page. Behind the scenes, I created a ‘master template’ which I switched with the existing home page when it was ready to go!
Testimonial From the Living Centre
“We worked with Jimm to redesign our website. The brief was simple to bring our website, which was static, had little character and was boring alive, fun and informative. We were not disappointed with the outcome.
From start to finish, my interaction with Jimm was professional, stress-free and I had complete trust in his ability to deliver. Jimm took the time to listen to what I wanted but also brought his own ideas, experience and creativity so that the end design was more rounded. He understood that I needed to see things in a visual context and have some flexibility to ‘play’ around with a few ideas. The challenge was we had to do all this via zoom but Jimm made it very easy; being patient when I had technical difficulties making the whole process enjoyable, stress-free and highly personal. “
Hobbyist’s,
businesses and potential clients… this post is for you!
This post covers 3 simple ways for you to build a website for free, or almost free. This article is ideal for start-ups, hobbyist’s and individuals looking to start small and work their way up with their online presence. All you need is a computer and access to the internet.
This post will cover the pros and cons of each system based on tried and tested experience.
It
should be noted I am not affiliated with these companies
How to get your free website up and running | Start building your website!
1 ) Use Blogger
Not
heard of Blogger? Blogger (blogspot) has been around for years and is
part of Google. With Blogger, you can create your website
or blog completely free
– today, right now! And yes, it’s pretty easy to use.
Blogger is fine if you are looking to create a simple blog as a hobbyist or put something together quickly for a friend or relative. I have used Blogger as part of my ‘hobby and general stuff’ website which I treated as a creative / personal dumping ground. You can see my personal blog here.
Blogger
isn’t solely for amateurs. I have seen great examples of Blogger
being used by professional and semi-professionals, despite
it being a free platform.
Generally speaking, Blogger is used more by hobbyists than
professionals.
Due to Blogger’s low point of entry, it is a magnet for homemade, freebie and hobbyist blog creators. Few websites buck this trend with this platform by offering tremendous value and great content.
Thiswebsite is great example of what can be achieved with some dedication and will power. The website – Print & Pattern – comes with a jobsboard, products and other pieces of information centred around graphic and surface pattern design.
I doff my cap… If I had one!
It
might also be worth mentioning that you can also monetise your
Blogger very easy using Adsense if you
are considering earning some money
on the side. You will need a lot of traffic to come to your website
before you see anything from Adsense.
Blogger Pros :
– FREE – Blogger is free. You can set up an account today and start writing about your hobby pretty much right away.
– It’s reasonably easy to use – Blogger is relatively straight forward to use. Buttons in the left hand navigation show what is what. All you need to do is Create a “new post” and type away – as easy as that although it is not without flaws.
– Can be polished – with a bit of thought and a lot of application you can make your Blogger look quite professional.
– No fuss – You can set up a Blogger website quickly, you don’t need a coding guru to help.
Blogger Cons :
–
Typically regarded as unprofessional –
if you are using a Blogger for a business website it can be regarded
as being amateurish. Blogger websites tend to have a dated appearance
and people can more often than not tell something looks a bit ‘Home
made’. In business, making a good impression is important and you
want avoid ‘Homemade’. Not all ‘Bloggers’ are created by amateurs but
many do use this platform as it is free. If you must use Blogger,
dress it well – very well – I would go as far as trying to
disguise it otherwise your blog may say : “business run from a
shed”. If you don’t expect to make money or use it for business
carry on.
Awkward
code –
know how I said to try and ‘dress it’? Now imagine trying to dress an
excited squirrel! Well It certainly won’t put it’s arms into the
sleeves and neither will Blogger when it comes to making a pretty
post! The code and interface can be very awkward to use if you are
trying tweak the alignment, paragraph, bold lettering etc it can
reduce you to tears, and crash. It also adds a lot of junk HTML to
your article making it needlessly difficult to tailor in code view.
Many hours have been wasted trying to make it play fair.
You don’t really own it – Although it is free to use and as a free tool it is pretty good, it’s not your intellectual property. Should your Blogger be closed for some reason you will loose all of your content with it. For ‘free’ you will relinquish control and imagine loosing 5 years worth of posts. Back up your content if you decide use Blogger.
SEO – although it’s not bad, I’m not convinced about it’s friendliness towards being seen by the search engines.
Blogger Verdict :
It’s
good for hobbyists, it’s free
but there are other options which I would consider over Blogger.
Generally, if you want a professional presence I would use better
platform.
Rating
out of 5 : 1 = Poor 5 = Excellent
Cost = 5 Ease of use = 2 Creation Efficiency = 1 Set Up = 4 Quality Of Websites = 3 Value = 2
Total = 17
———————————————
USE WIX
Wix
gets some unjust stick. Developers scoff at it because it is a
website builder
which can be used my non-coders – listen other Developers, WIX
isn’t too bad! And if you are strapped for money and just starting
out then maybe consider this as possible option in the beginning. WIX
allows you to visually drag and drop your website together to create
a design that you may not vomit over!
You can even add the odd bit of code here and there to extend to
track analytics.
That’s
well and good but why use it?
WIX
can allow you layout items on a webpage how you want them! Imagine
using something like Microsoft publisher, Photoshop or a graphics
program to create a website. If your online presence or website is in
it’s early stages, you may just need something very simple to chuck
online
or perhaps you want to get a website live for a friend or a relative.
WIX can suit both! And you don’t need to be Developer.
For cheap, (not free) WIX is possible option. Here are my shared experiences of the WIX website builder.
Wix Pros :
Neat – It all comes in one tight little package with many design options. Design with it – It’s great for non-techies or developers. *You can use the drag and drop interface to create a website the way you want it – a big although
Cheap – WIX comes with a range of pricing plans to suit many budgets, it also comes with it’s own hosting packages.
Cool features – It comes with some nice little integrated features such a mail-list manager and an easy to use image library, you can also create a basic shop with it.
Visual Designer – It’s great if you like to create websites visually, but please note – not for creating graphic design and banners. These elements will should to be created by a Designer or somebody with access to design tools.
*Although – Websites are not ‘as is’ static items anymore, you can’t treat them as you would a drawing or a piece print. It’s best to regard website as a piece or informational water when it comes to the layout. This information fluid or titles, boxes and elements which should move to fill the screen size. The launch of the smartphone essentially has pushed your static website design to near extinction.
Wix
Cons :
The responsive design is sub-par – arguably worse than Blogger. As a non-dev you may be wowed initially by how easy it is to use, but what you see, isn’t what you get. Inside WIX there is a button in the navigation menu which allows you to set up a mobile version of the website… (Yes, you have to construct 2 versions of your website) the mobile version isn’t as standard so you have to create 2 static versions of your website. It isn’t very good at handling ‘fluid’ layouts when I last used it.
Build twice, takes twice as long – Further to the point, you have to build twice or suffer a website that will not work properly on a smartphone. Eg can’t read text without zooming with fingers etc. This bad user-experience will be passed onto your customers.
Clumsy fluid layout – As a designer this would be something I would pick up on. The default desktop website can have some somewhat awkward behaviour when it comes to viewing the website in different browsers. Fluid and responsive websites are not easy to build, and WIX certainly hasn’t mastered this yet.
Slow Down – If you have a large webpage with lots of elements and content this can overwhelm the WIX builder. You will find as you are dragging (pushing) elements around they start to lag and stick. This can become very frustrating if you are trying to work toward a tight deadline in a busy or demanding environment.
limited control with deeper development issues – With using a website builder such as WIX you surrender building more accessible a technically proficient website. It’s also trickier to get into the real nuts and bolts to solve somewhat basic issues.
Wix Verdict – Jack of all
Cheap
and cheerful and great for non-techies. This user-friendly website
builder is good if your are starting out. I have seen WIX used for
straight up brochure and small scale websites with great results and
if you are on shoe string it could be something to consider. WIX is
nice to use, quite slick and an intuitive piece of online software!
Not the cheapest, but ok.
//====================== *
– just to the stress this from the previous point. Sometimes,
people think websites are static and they adopt their thinking to an
archaic approach to website design. Websites are no longer static and
it is best to avoid a website design in this way. If you would like
to know more about this feel free to send an
enquiry. //======================
Rating
out of 5 : : 1 = Poor 5 = Excellent
Cost
= 3 Ease of use = 5 Creation Efficiency = 3 Set Up =
4 Quality Of Websites = 2 Value = 3
Total
= 20
———————————————
WordPress is Free
WordPress
has been available for years! It has grown a very large and loyal
following that are building better product everyday. WordPress
is completely free to use,
its open source and has a large community of developers and agencies
available to help. If you have your own domain and hosting, using WP
is as simple as downloading and implementing it yourself. Certain
hosting companies come with one Click
installer
which can make installing very straight forward but this isn’t the
case for all hosting companies.
If
you don’t have hosting or a domain you can also set up your WP
hosting complete free
– WordPress > don’t panic!
You
can create very powerful website using
WP and
comes with a very large library of resources to build different types
of websites; stores, blogs, brochure sites, downloads sites, ticket
software etc etc – it’s vast and WordPress has gone way beyond
being just a blogging tool!
WordPress
is integrated with many 3rd
party companies which range from over automated email systems to
analytics. There is also themes which turn WP into a visual website
builder. All this plus the features mentioned before.
WordPress Cons
Hackers like it – being a victim of it’s own success and a large proportion of websites being made using WordPress, it’s a hackers paradise. If you have a very large scale website perhaps other options are better to consider.
Plugin’s can break – Although there are 1000’s of plugins on the WP market place some of them can fail over time if they are not maintained.
Needs to be maintained – WordPress needs TLC occasionally. Pay attention to your dashboard or email notifications if you need to update you current version of WP or its plugins.
Set up – WordPress can be a challenge from time to time when trying to install it on your own host. This can range from obscure incompatibilities or ‘access’ not being configured properly
Tricky to change – The default version of WP can be tricky to tailor without knowing your way around CSS or downloading a plugin. This is where using a developer could come in use if you decide to use WordPress.
Used a lot – due to a lot of websites using WordPress website can start to feel the same.
WordPress Pros
Progressive
& Powerful
– WordPress is always pushing forward with it’s technology and it’s
developer community are always improving the platform.
Community
– WordPress comes with large pool of knowledgeable developers
creating new functions and extending the function of the default
software through plugins and themes which can either be purchased or
downloaded for free.
Powerful
for no or low budget (FREE) –
you can create a professional and functional website with default
Wordpress software.
Do what
you like with it, more or less
– create your website today on your
own domain
and hosting you and can do what you choose with it – isn’t that
great!
Simple to use – It comes with a reasonably easy to use ‘dashboard’ – not too dissimilar to Blogger.
–
Plugins and Themes
– Just too much awesome to list. Also a lot of dross but there is
essentially a candy store of added functions to select from.
Rating out of 5 : : 1 = Poor 5 = Excellent Cost = 5 / (*1 ) Ease of use = 4 Creation Efficiency = 4 Set Up = 3 Quality Of Websites = 5 Value = 5
Total = 26 / (*22)
*Cost
variable due to free VS paid. As this article is about free and low
budget website solutions the score jumps from free to expensive
depending on whether you need a dev to help you.
WordPress Verdict : Great Value, Great quality
WordPress
is a good platform and worth considering if you want some flexibility
in what functions come with your website and whether you want to
change it at a later date. You may require developer to help you in
the beginning but after that, your WP site is yours to do with as you
choose.
That’s all! 3 Simple ways for getting a website online – in detail.
I hope this will offer some insight! If you are needing a Graphic Website Designer to help out with creating your business send me a message or if you have any queries about the listing above – also get in touch and will try my best to answer!
This article was written to give some guidance as how to go about creating a free website. This is based on my skills and experience. The opinions, based on my experience, are ‘my opinions’ and not that of others. Please bare in mind when making your business decisions on you website that you have considered what has been written and do your research thoroughly.
The scores were created for a bit of fun.
The platforms listed are tools. It’s down to you to offer great experience and value to the person reading it.
Feeling stuck, confused, unmotivated by your design brief? You have been sat at your computer for hours on end unable to produce the work and the time is ticking?
Here it is – where to find creative design inspiration (well… some) – 10 websites for creative inspiration
In this post, I have collected together 10 links to websites that I hope will inspire you to nailing that deadline. Hey whilst you are reading this why not put the kettle on, sit back and think… don’t panic
– Trust me there is a difference.
Don’t rely on a blank Illustrator document to inspire you
If you have been sat for a long period of time staring at a blank document you need to give your mind an idea injection. And for this, your mind needs creative fuel. I believe it is a rare thing that something comes from nothing. All ideas, products, and designs will have something to trigger that initial spark.
Aimlessly Pushing Pixels – Not very inspiring
You may be stuck because you have put the cart before the horse. There is no harm in discussing a brief with a client or boss to help you gauge and progress a project. Conversations with the right people can be a great motivator and bring a different angle to a project that you wouldn’t have otherwise considered.
There is no harm in coming away from your screen and stretching your legs and getting some blood and oxygen flowing around your body! A study here, shows how walking can stimulate thinking – if someone questions your seemingly random urges to push yourself away from the screen and go for a walk it could be worth mentioning the information in this study.
When going for a walk at lunchtime, I see it as ‘non-working’ working. It’s generally more progressive for me to do this than sit then in a brain haze.
Wish you were here! I find the outdoors very inspiring, but each to there own.
10 websites for creative inspiration
Did you go for a walk? Maybe you cant go for a walk for whatever reason. I have pulled together some posts from an older personal blog post and placed them here.
Did you make yourself that drink? Okay creatives…. here we go.
Social Media Websites such as Pinterest and Twitter can be a great source to get the old creative juices flowing – remember not to get carried away… you have a deadline after all!
Youtube can also be a great place to get some ideas also.
Thank you for reading this post on 10 websites for creative inspiration. I hope if you didn’t manage to stretch your legs some of these websites may point you in the right direction.
With over 10 years commercial experience in creative design and front-end web development I have been given some brilliant opportunities to work on products which have been fun, engaging and challenging. A large proportion of my experience has come from Satzuma, a gifting and tech company based in London.
A collection if interface elements for a section of a flash memory sub domain
Projects have ranged from a tangible products to a new website which were created for promoting the product that was designed. ‘Branding’ and appearance was key, so the visual design for the website would have to work well for the packaging, the branding, the promotional material and all else in between, The design needed considered how it would be implemented across the board from start to finish.
Snap shot of early icons for the flash application –
Icon design for the applicationThe drag and drop application – in action! Shows how the product worked. Doesn’t work by magic. In order to make the application work, it needed code! the life blood. So getting my coding hat on this was app was developed in Action Script 3. Once it was finished and released, the app could be played either in your browser or downloaded. The application, also had a dedicated page on the website so you could download the play the game / application from your computer.
What was the point in this website and application?
A product was designed so you could decorate your own smartphone and headphones with an all encompassing DIY kit. It was for the gifting and tech market. And for this, the website look and feel needed meet the criteria:
Needed to be eye-catching and appealing to large retail stores on the high street
The product was geared toward slighty ‘edgy’ young female teens – students
The app needed to show the product in action from the ‘buyers’ browser. It was also used for the B2C market so ‘end-users’ could see what the product was about.
Creating An E-shop
It was discussed that it would be a good idea to create an online shop so business to business retailers could buy the products in wholesale. So a 1000 units, 50 units, etc and the platform would maintain the stock. After research and looking into core requirements, maintenance, ease of use and cost and stability OpenCart was the go ahead.
This is an example of the of the OpenCart theme with the core Satzuma branding applied to it.
The website needed to look engaging and in keeping with the brand as a whole. Packaging like one business and a website that looked like another would potentially put off customers and larger retail brands.
This is the UI design based around the Nexus Theme. This is the design stage before the artwork was broken down and applied to the online store.
A Piece UI Design
This is a piece of UI design that was applied to one of the earlier original Satzuma brochure site designs. These buttons and elements were broken down and written into the HTML and CSS. This website gave a punchy brand experience whilst offering information on the product.
On closer inspection you will see the various elements that made up the functionality and aesthetic of the original Satzuma website.
This design encompasses some of the core elements of the website. Such as :
The user interface design – buttons, backgrounds, quotes, decorations, navigation, logo, social media and other ad-hoc parts that constructed the general interface of the website
Buttons – Its not a coincidence that buttons are orange. Based on a seminar by a ecommerce consultancy. People clicked more often on the colour orange. Which was fortunate as so was the core branding of Satzuma. This allow for clear areas of Calls To Action on the web page.
Dark Elements – The core branding of Satzuma was orange a black – fun and tech. Using these core principles of the brand, I created a look that was both functional and respectful to the branding of the business. This also plays into something called ‘semiotics’ you can read more on semiotic examples here. The main purpose of the black, in addition to be part of the black/dark branding was to act as a neutral bed of colour to emphasise the CTA’s and the content.
Charm & Character – following the charming elements and the character of the brand you will see (or used to) the Satzuma Man drawing attention to promotions and core messages. He was a face / mascot which captured fun elements of the brand
Thank you for reading
If you need help with your website be it basic consultation, design, growing online, design the look and feel, helping to set up a WP website so you can manage your own website – feel free to say hello.
This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Cookie settingsACCEPT
Privacy & Cookies Policy
Privacy Overview
This website uses cookies to improve your experience while you navigate through the website. Out of these cookies, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may have an effect on your browsing experience.
Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.
Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.
