Website & Interface Projects – 2019

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.

User interface
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.

Initial icon design created on illustrator and photoshop
Snap shot of early icons for the flash application –
Website application icons
Icon design for the application
A drag and drop application used to promote a product online
The drag and drop application – in action! Shows how the product worked.
Actionscript in action! used to create an APP
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.
Landing page design for website
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.

Snapshot of shopping cart of  website.





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.

Full length opencart UI design
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.

User interface design for brochure website
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.

Tips For Creative Brief : suggestions on writing a simple brief | Client to Designer

Vector icon for writing a simple design brief.
No fuss, suggestions for writing a brief.

Designer to Client

Hey, maybe you are looking for some ideas on writing a creative brief and dont know where to start? Maybe you need ideas for writing the details for the next website some early pointers for a rebrand? This post has been written to give you, ‘the client’ some rough guidelines for setting a brief. Imagine answering the following…

Purpose & Plan

What is the purpose of the project? Is it to expand the business, launch a new product range or to promote something that you are already offering?

You will need to have some sort of a plan and end goal in mind for the project. If you don’t know what it is that you business needs, that’s OK… maybe you would prefer an initial chat first? Do take into account, without a plan or and end goal, even a loose one, you will end up going around in circles and costing yourself time. Maybe ask yourself some of these questions :-

  • What do I want to get out of it? Profits, more followers, leads etc
  • What will my return on investment be? (RIO)
  • Can this be achieved for the budget?
  • Should I do this now or should work on something else first?
  • What is the competition doing? 
  • How can do it differently/better?

Listed a above are some general open ended questions. If you are stuck and would like some initial design consultation and help with project planning get in touch.

Budget

The budget is important to consider as this will affect the amount of time that will be allocated to your project – factoring in deployment, build/design, concept and whether anything else needs to be considered. Below, are 2 methods to factor in – there are many others but for the sake of the article and to give you and idea I have picked 2.

Cascading, fluid, rolling. This method, is far more open-ended financially but allows for plenty of creative and innovative freedom, a designers dream more often than not as this can offer up great results. A draw back with this free flowing approach is that money can keep on going into a project, regular checks on the amount spent so far are a good approach and ball park figure should be offered in the beginning, especially with smaller business with tighter purse strings. So the pros and cons of this.
Pros :
– Offers great results, project continues until a project is at its best
– You dont pay for surplus time in case the project was over estimated on a fixed rate.

Cons
– Can be scary for start ups or businesses that have a very tight budget

Fixed price, this method usually suits both parties, or so I have found, a draw back with this is that sometime contracts and prices need to sometimes be re-evaluated should there be substantial changes to a project specification. In the beginning, a ‘fixed estimate’ will be discussed. beginning, factoring in changes (or tweaks) additional requests will increase the price as more time will be required. But you will also need to have an idea of what you need for a project for a budget.
Pros :
– Allows for more careful budgeting and price conscious projects
– Avoids ‘surprises’ when the bill comes.
– Stipulates clear objectives.

Cons :
– Projects can be underestimated and will need to be reevaluated for the time required.
– If additional features (feature packing) are added part way through it will can unsettle expectations on both parties.

Time Frame

Take into account when you need a project to be completed, things can take time to finish, the designer may be working on several projects at once and they may not all be yours. Also, waiting to hand over all relevant information at the last minute will end in disappointment eg, sending all the photo’s over for flyer an hour before a production deadline or as the designer needs to leave will not make the best of it… Get the relevant information such as, text, photo’s, FTP details etc over in decent time. It is neither fair and shouldn’t be expected that designer will drop everything including free time, family life and other projects to do your work. The earlier, the better! Besides, doing everything last minute just increases risk of failure for a projects.

Target Market

If this is a design project that is yet to have a brand established have you considered who the target market will be? Is this for children, adults, professionals, tourist, artists, trade and so on.

Branding

Do you have an existing brand guidelines for your company? If you have any existing logo, colours, fonts, do’s and don’ts this may be required for the project to be completed.

Deployment

Depending on the desired project, how do you intend to deploy the project? Will this be a small web banner, a flyer, will you be using a printer, will this be a for screen, will it be for print? It is worth considering how this may evolve in the future be it for print or screen. It is easier to scale a large file down or resize a vector than it is to resize a 60 px 60 px logo onto a bricks and mortar shop.

Limitations

Is there anything in the that the designer can’t do? Will it be for a certain target demographic, politically sensitive, have to fit on some something small, needs fit x y z etc etc

I hope this gives some food for thought, if this all looks a bit scary. It isn’t! Its fun and can be a great journey. If you would like to ask a question please feel free to do so.

Easy to follow steps for making a bespoke low-maintenance website using PHP include

So… Lets make a easy to maintain bespoke website.

Test tube graphic vector.
Using PHP include will make maintaining a larger bespoke website much easier.

Maintaining a large bespoke website can be very time consuming.  Using “include” can take the website to the next stage of modular design.

Imagine having to write 1 line of code into a ‘php’ file instead of having to copy & paste the same piece of code across 70 or so pages, worse still… imagine that piece of code had a typo – across all 70 pages! You would have to go back and amend all of the pages and it would be a costly waste of time!.

Using PHP include can reduce the time consuming method of copy and paste, shorten time and take your website to that next stage of design (Or look at a CMS system but that is a different topic). With the php Include method, the information you amend in one file can change across multiple webpages with a simple save and upload. To name a couple of ideas, you can use this method for navigation, footers, banner adverts and much more. I cannot emphasise how much easier this will make your life when working on larger projects if you must take the bespoke method. Change once to update many!

It will save hours!!!

Getting start with PHP include

As a basic example we are going to make a footer. We will have a master or ‘main’ document that will  “include” – pull in, integrate, import a file from your website.

This tutorial/experiment will assume you already have prior knowledge of setting your website up with root folders etc, if you need some more help with this please follow these tutorials.

https://helpx.adobe.com/dreamweaver/how-to/first-website-part1.html 

Or PHP

http://php.net/manual/en/tutorial.php

You Will Need: 

– The main file (The parent/master)
– An external footer file (why not add some styling to your html?)
– one line of code, which you will embed into the parent folder.
– A space to upload/test your experiment. (domain and hosting)

Stage 1 – Parent File (Master)

The ‘Parent’ (master) will pull in the external files to construct the page. in this example. The master will have some code in the bottom of the pagethat will say ‘Hey footer, you included down here’.

Why not call your parent file ‘master.php’

This image shows (with straying CSS, bleurgh! sorry an old image ) the master.php and Product-footer-test.html working together… or popping out of the bottom. 

PHP include shown in image - demo of a PHP include
This is a master file and a and external footer.html / or PHP working in conjunction.

Stage 2 – Footer File

I have used the footer in the example. This area of the website at my previous company used to have frequent updates, with new products being added constantly. As you can see, all styling is added to this queasy example with the accursed table by using CSS – the image below is the bare bones of the footer file – no bells, no whistles! ( Why did I use the horrible table back in the day… I groan).

If completed correctly, changes or modifications to the footer file, will be included in the master file once you add the “include” piece of code to the master file. So what you change here (the footer file) will be visible once you come to uploading all of the files and testing the file.

How you treat you footer is down to you, this tut is here to show you the principle.

A very simple PHP footer include image. Show how it can work for your project.
A bare example of a footer files – you can write and external CSS file for this to give it some magic or use inline CSS styling!

Stage 3 – The Simple Piece of Code to Paste Into Your Master PHP file

The image below shows in red where the piece of “include” code sits. So, imagine you have made a hollow space on your webpage, in the hollow space you are going to add this code to the bottom. As shown. 

1 line that could potentially save you hours!
Its just 1 line of code… 1 line that could potentially save you hours!

Product-footer-test.html”); ?>

The line of code above which has been inserted into the bottom of your master file will call on the footer module and all of its elements.  Once you upload your files you can see whether the footer has worked! Oh and check you have saved everything!

The visual diagram below will visually show how the principle works – leaving aside how the coding works for the PHP include.

Summary of PHP include in action

Parent, Child, Footer... How PHP include works for designers
This is a image of what is happening with you PHP include!

In a nutshell. You have a the parent (the main page) and a child, in this example it was the footer. 2 elements talking to each other. Thank you for reading.

Hey, need a hand with your website?

There’s other methods to get the results you want which may be even more effective if you are a non-coder. You can use a web builder, a CMS or something else. If you would like help you can find out more on the design website

Easy Techniques For Reducing Banding / Posterization in Photoshop

Posterization – Effective Techniques For Reducing Banding! 3 simple tactics

Are you look for a way reduce the rings in your artwork in Photoshop?
Are you look for a way reduce the rings in your artwork in Photoshop?

Banding in PS – What is it?

If like me you work as illustrator/designer, I’m sure you will have run into the dreaded banding aka Posterization If so, I will go into detail shortly. Please note; this is told from an illustration and design bias.

Illustration in Photoshop has been a blessing for me. Edit, undo, save as, copy, paste, re-colour artwork the list goes on. This issue comes when working with radial and linear gradients and tones of black and grey. Working with a lot of black and orange as part of the colour palette, I have had to figure out ways for dealing with or working around banding. For example, when I’m rendering characters like Rufus the rat, he has grey body with even darker creases in the body, getting the shading and highlights to blend hasn’t always been easy – banding has been a big issue. As it stands, I’m still uncertain as to how to get a completely smooth finish when rendering by work with a grey and black tones. I can offer some methods for reducing this so called ‘banding’ effect and the bane of drawing Rufus. 

My Setup 1 : New Document ‘I like RGB’

From the off, I have tested this on Photoshop CS5 and CC with similar results from version to version. 64 bit – 32 bit RGB to CMYK I’m not entirely sure if this has an influence aside from whether you are working with 8 bit, 16 bit and 32 bit; the later offering marginally tighter rings and hues. For this example I have worked with A 300 DPI document, in RGB using 8 bit (this can be changed later) also with the colour profile listed below on an iMac. This is by no means a significant contribution to the final out come but maybe worth noting.

Setting your photoshop file to 32 bit
Caption of colour modes

‘tangent alert’ Using RGB in the early stages is my preferred method, not everybody’s. “Isn’t this madness? You won’t see the genuine colours of your artwork!” Well unless, your screen is calibrated exactly and your using pantones, guaranteeing what you see on the screen to print can be tricky anyway. Besides, I work across both mediums of screen and print. 

Method 2 :  Ultimate Trick – Brush & Noise

Assuming that you are running into this issue whilst using a soft-edged brush tool in Photoshop, I would advise turning the noise’ on under the brush panel (as shown – press F5 bring this window up) this helps in the blending of steps with greys as shown below. As far as I can tell, based on my work, this improved the overall smoothness and graduation of the tones from light to dark regardless of bit mode or any other. You can also dabble with the filters if you are using large radials (That would be a different article). 

As you can see below, the black brush at the top has rings (banding) and the one below has far fewer the brush used on the lowest part of the blob has noise switched on. The speckled effect will be less obvious once you take your artwork to print

Blending colour steps in Photoshop
Look in the top left the brush, notice how you can see the steps / rings. This is much less obvious in the lower part of the black blob with where I have switched noise on

Method 3 : Big to small, playing with scale


Another trick for tightening this banding is by shrinking/scaling down your completed artwork. When you have applied the ‘noise’ and finished the process you can physically shrink the image to hide some of the messier details – an illusion essentially.

This is a method that I have used not only to disguise banding when digitally painting but also to give the appearance of tighter line work and detail in photography and illustration

Step 1 piece of art = 100%
Step 2 scale art to = 75%


When you print the document some of the details and blemishes are hidden away from the naked eye. This approach can also hide some of the rings in banding with added element of noise! Combine all 3 steps really scrub out the bands if you are having trouble on the screen or when you print.

Otherwise your hard could look like a dirty spill stain.

Conclusion
You will see the benefits for this when you come to printing your work, especially if you are working with shades of grey.

To summarise – Add noise to your brush mode.

The methods above were used on this character – Copyright Satzuma LTD

If you need help with your latest design project or need some tips free to find me on twitter!

This was originally written and part of my personal blog. 2015

How to get the black you want in print! Some tips and tricks to help

Working In Black In RGB & CMYK

The Great Black

Black can be a trouble to work with when it comes to print, especially with all of the varying print processes, paper finishes and general variations with commercial printing machines, inks, screen calibrations and so on – working with a black is a headache and I’m sure many others would agree! So, I have put together some tips and tricks to assist with your projects – it can be a dark and treacherous path. This post will mostly focus on creative approach rather than the pure technical aspects of Black ( K ). Working with 4 colour printing and spot colours is a detailed topic in its own right which is worthy of a post.

Illustrators, painters, artists and photographers

If you are a designer / work in print skip this paragraph!

Firstly, does it really need to be BLACK? When I say does it need to be ‘Black’ are there many things in the real world that are completely black? Aside from an all light absorbing, all-life-drinking black hole that absorbs all light and colour? Besides… that’s something that;s not of our world as far as I’m aware. Looking at the world around you, you will see come to see how lighting, surface, atmosphere and texture will absorb surrounding colours, including what you would what you would call a black surface. For example, someone is wearing a black t-shirt, more often that not if, even if it is new, light will catch on the folds, the creases and the contours of the fabric giving the black fabric a slight hue or tint depending on the light source and ambience.

Study things! I like to look at surfaces and objects that have an interesting finish for example : gloss surfaces, bottles, matte paint, skin, fur, hair, shadows, animals, sunglasses, cloth, etc. Another good source of reference of how to use light and dark with dramatic effect is Chiaroscuro – do some research online – research Caravaggio (one of many artist’s using this approach) and see what comes back. Caravaggio used light and dark with excellent dramatic effect framing the narrative in light and shadows. This is potentially subjective but hopefully… it will be food for thought – if its jet-black you’re after then please read on! ( I have attached a little image below with some dark but not black shading )

This image shows how tints shades can show some almost black can work. Most things are not strictly jet black

RGB BLACK… A HACK

A Preference

Typically, I like to work in RGB first and then convert my files to CMYK afterwards, especially if I’m working on a bitmap illustration or digital painting. Why? Because working in RGB generally gives me more creative freedom in the beginning and it also allows me to move between digital and print at a later date anyway. This is a my preferred method when working on an illustration and by no means a rule, just a preference. I’m not the only one working this way. By doing a Google search I stumbled upon a commercial artist who also likes to work this way – this writer and artist goes into much greater detail about the in’s and outs of color channels on their blog. I recommend having a read at some stage – perhaps after you have read my post.

(http://muddycolors.blogspot.co.uk/2011/08/printing-your-work.html)

Unexpected Results – Designers a pleasant accident

I was always taught to work in CMYK for print and RGB for digital. I still champion this for working with professional printers as trying to print from RGB file may produce some erratic results, be it for leaflets printing, flyers, and other mediums. I accidentally ran a test print from Photoshop in RGB (Thinking it was CMYK) and the results were far more superior than the CMYK version. Both were printed on the same satin finish paper, on a Canon Pixma A3 with an impressive result. Despite my efforts and tinkering with the levels in the CMYK version to replicate what had happened In the RGB Version, I couldn’t produce the same results. I will make an assumption that my Inject printer translated the RGB to CMYK and just knew what I was after. I can’t complain too much as this project was sent to print and retained all the vivid colours and strong black colours.  Saying this, I still recommend trying to stick with the CMYK for design and print despite this result as this is typically what is asked – best to be safe, but something worth exploring for the future.

Digital Black Colour in Photoshop – Add a Hue

Unless your are working in RGB and your artwork will remain for screen (digital) only. Then may be best to work with ‘Designer Black’ check the numbers. Although the computer says it black (or you’ve had it calibrated) it is best to drop a bit of colour into the mix – and do test print it.

Photoshop Colour Palette
And Example of using the black in the colour palette

Last Round Up Hacks!

  • Take Notice of the colour warnings when you are in the colour picker window. This could save a lot of headache later on. (Yellow Triangle)
  • Let the printer do the leg work. Send your artwork to the printer and try to let them help you. A printer worth their salt will want to help you and have your return custom. To reinforce your expectations, send them a physical sample from your home printer – assuming you have a good quality home printer.
  • A HUE, if you are working on an image with a lot of dark areas why not add a little hue / tint of colour? 20% cyan for example or some magenta/red for a warmer image.
  • Avoid working with 0, 0, 0, 100 K, as this best reserved for font/text printing and can your work charcoal appearance. Use a ‘Rich black’ or ‘designers black’ instead. 20, 20, 20, 100 k for example.
  • Avoid 100, 100, 100, 100, CMYK as this is reserved for crop marks and using this colour can drown the paper – no one wants drowned paper!
  • Don’t be fooled. Your screen can be way out of the sync with your printer. Do some test’s first and see what results come from your printer (even printing on your home printer cannot guarantee the finish you require when you send your work to print) So take note.

    Yes… black can be painful to work with! And can be tricky colour to tame!

Thank you for reading how to work with black in print!