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.
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.
So… Let’s make an easy-to-maintain bespoke brochure website using PHP. This post covers the principles of using PHP to be used on a brochure website. This is not a whole guide to making a website, only the PHP part.
Using PHP include will make maintaining a larger bespoke website much easier.
Maintaining a large bespoke brochure website can be very time-consuming as based on experience. Using PHP “include” can take the website to the next stage of modular design and streamline your workload.
Imagine writing one line of code into a ‘php’ file instead of copying and pasting the same piece of code across 70 or so pages? Now that is time-saving.
Imagine if you had to manually edit and retype code across all 70 pages with a typo! You would have to go back and amend all of the pages one by one, and it would be a costly waste of time!
This is especially useful on navbars and footers. Using PHP include can reduce the time-consuming method of copy and paste, shorten time, and take your website to the next stage of development (Or look at a CMS system, but that is a different topic).
Using the ‘php Include’, the information you amend in one file can change across multiple webpages with a simple save and upload.
To further illustrate this, 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 started with ‘PHP include’
Steps for making a bespoke, low-maintenance brochure website using PHP include – the first block.
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 file will be a footer.
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.
– 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.
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 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.
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
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
Simple techniques to reduce ‘banding’ ( Posterization ) in Photoshop ( *updated )
Posterization or ‘banding’ as it is known in Photoshop is a bane to many graphic design professionals or those working in print.
However, ‘banding’ is not limited to just print.
Banding, or posterization can also occur with screen-based imagery but it tends to be more pronounced and commonplace with print-based media in my experience. There is nothing more frustrating than seeing your lush and smooth gradient onscreen only when printed to see the same artwork with segmented bands across your gradient.
Over the years as a professional in-house designer, I have come across banding on more than one occasion. One of the worst culprits for showing banding is when working with greyscale or black. It was a challenge that used to drive me up the wall.
After much trial and error, here is a quick overview of some simple techniques I used to employ to reduce banding in Photoshop.
Some of the simplest techniques to reduce banding or posterization in Photoshop is by either applying ‘noise’ to your brush ( in your brush settings F5 ) or creating a separate ‘noise’ layer and overlaying this on top of a gradient layer to disguise the banding. This will give the illusion of smoother better blended artwork and remove the ‘stepping’ from your gradient. These techniques for handling banding can work especially well when working with mono-colour gradients such as black and white. There are also other tricks I have used in conjunction with this method written below.
“It often took various attempts to get it correct before sending it to print so don’t become too disheartened if your first try isn’t quite on par with what you expect.“
Simple techniques to reduce ‘banding’ | how I handled it
I often ran into banding situations when creating super smooth blends with colour.
It often took various attempts to get it correct before sending it to print so don’t become too disheartened if your first try isn’t quite on par with what you expect.
*Simple tip! If you have a local home printer or high-quality photographic inject printer, use this to test and measure your artwork.
I found these methods I have written below to make a world of difference when it came to creating a prototype or print production. All these methods I have actively used when working in Photoshop.
Some may call these hacks, others tricks but I like to regard them as ‘techniques’ for fixing a problem in print.
You may need to try various levels and settings, brushes and overlays to cure your banding problems. One solution may be enough, but you may wish to employ more than one if you are struggling to get the result you want.
Here is a detailed overview of some of the simple techniques I used to reduce banding.
Look in the top left of the brush, and notice how you can see the steps/rings on the outermost edge? This is much less obvious in the lower part of the black blob where I have switched the noise on. This is an example of where I have used noise! Take note of the speckly grainy edge of the soft-brush. This brush helps the ‘steps blend better!
Simple techniques to reduce ‘banding’ ( Posterization ) in Photoshop – tricks
Silkly smoote !!
Before jumping in with the simple tricks you can use. Let us start with the basics. Or if you can’t be bothered reading about banding and when it occurs, you can jump straight to the tricks and hacks for dealing with it.
Banding & Posterisation in Photoshop – When it occurs
If you don’t wish to read about when “banding” has occurred for me, feel free to jump to the next section.
The dreaded banding aka Posterization in Photoshop.
The methods above were used on this character – Copyright Satzuma LTD – Rufus Rat.
Trick 1 ) ‘RGB?’
Controversial, I know. But when waging a battle to reduce ‘banding’ in Photoshop, any tool at your disposal can help.
RGB ‘can’ offer a greater degree of flexibility in the beginning when trying to wrestle with artwork to remove banding such as playing with filters or seeing how the art works on screen.
But remember, that once you tinker with filters and have done what you need to do with trying editing your artwork remember to turn your artwork back to CMYK if this for print. CMYK is a common colour format preferred by most UK printers.
Sadly though, CMYK can… 1 ) Offer a more candid look at your colours at the end of the process. 2 ) Make your colours look like a sadder version of RGB.
‘tangent alert’ Using RGB in the early stages is my preferred method for some projects, not all. It depends on the project.
“Isn’t this madness? You won’t see the genuine colours of your artwork!”
Well unless, your screen is calibrated exactly and you’re 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, hence working with either CMYK or RGB ( digital )
Trick 2 ) Think of the ‘Bits’
I have tested this method in Adobe Photoshop CS5 and CC with similar results from version to version of Adobe Photoshop. There has been some improvement when working to problem-solve banding.
64-bit – 32-bit – 16-Bit RGB to CMYK
The difference has shown to be marginal but still of noteworthy impact when trying to reduce banding in Adobe Photoshop.
Although the steps are unnoticeable between 8-bit, and 16-bit at reducing banding, this can be enough to tame mild banding.
However, at 32-bit, the latter offered tighter rings and hues around the banding and showed to reduce some of the posterization in Photoshop – 32 bit helped the bands to better blend and higher still should only improve upon this further.
Below is a screenshot from the menu option in Photoshop, when with banding.
*Note : Also the colour profile listed below is on an iMac. This is by no means a significant contribution to the final outcome with reducing banding but may be worth noting in case you are reading this as a Windows PC. Although, I am of the opinion that this should make no difference whether on a Mac or PC. But your screen type might.
Caption of colour modes
Trick 3 : ‘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 throughout – press F5 to bring this window up)
With noise ticked in the ‘brush setting window’ this helps in the blending steps with greys as shown below.
Based on my experience, this improved the overall smoothness and graduation of the tones from light to dark regardless of bit mode or any other trick and hack for beating banding. Texture can help with the blending, and noise can help with texture. You can also dabble with the filters if you are using large radials (That would be a different article ).
Example As you can see below, the black brush at the top has rings that appear like tide marks, (banding). The blend below has far fewer rings as I had the ‘noise’ ticked on my brush. The speckled effect will be less obvious once you take your artwork to print. And shouldn’t look grainy.
But, be mindful not to be overzealous with noise. You may need some trial and error to get the balance right and run some text prints for good measure.
Example of Noise and brush in action
Trick 4 ) Big to small – experiment with scale
Another trick for tightening banding is by shrinking/scaling down your completed artwork, illustration, or photo.
This works well if you use some of the tricks above to blend and tighten any remaining bands before shrinking your work to hide evidence of banding.
Do this.
When you have applied the ‘noise’ to help blend your artwork, then shrink the image to hide some of the messier details.
This is method not only disguises banding when painting or retouching but also gives the appearance of tighter line work and detail in both photography and illustration. This is a principle I have adapted since being taught this trick in college.
In principle, all you need to do is the following.
Start with your artwork at 100%, and then scale the artwork down to 75%.
If you intend to use this technique, do remember to factor this into the sizing of your artwork with a 25% drop in size!
Eg, if you want your artwork to be 150 cm wide for argument’s sake, consider starting at 200 cm to scale down. Or if you want something to be 750mm wide, start at 1000 mm. Or if you want to 75 px wide start at 100 px.
In other words, knock a 1/4 quarter of the size but remember to factor in scale back at the end. If you don’t, you may end up with an image that is too small.
Step 1 piece of art = 100%
Step 2 scale art to = 75%
In theory, nothing is stopping you from playing with lesser scale-backs and scale-downs.
How can this work with hiding banding?
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 an added element of noise, you can combine this to scrub out the bands
Otherwise your hard could look like a dirty spill stain!
Simple techniques to reduce ‘banding’, the final tip
Using a combination of the above has helped me to kick banding into touch. My favourite by far is my experience with noise without going over the top with artwork to make it look fizzy.
Simple techniques to reduce ‘banding’ – Credentials
My name is Jimm ( Jim ) and I am designer with over 14 + years of experience. I have had to deal the banding. My old college course and grit and experience is what has helped me to deal with banding.
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.