Category Archives: Design

Can your site pass the responsive test?

We’re rolling out the new HotelsAfloat.com website, and we are really very happy about the result. Built using the CakePHP  (MCV) , framework, fine tunning the display to the owner’s requirements for more and more quality UX is a dream. The backend office is easily modified so that we can simply add more functions for managing the site.

One of the most important requests from our client concerns the responsive quality of the design and layout for mobile, tablet and desktops. We’ve used  Boostrap CSS3 to the design and had no problems.

 

Continue reading Can your site pass the responsive test?

Colour flower gradients for Illustrator

With the arrival of Spring you may be working on design and print work which needs a bit of colour to cheer things up after the long dark winter.

This is a step by step guide to help you create your own gradients in Illustrator of natural colours and then build a swatch for your own purposes.

My wife and I are very luck to live in the countryside .  She’s an excellent gardener who adores flowers. Over the years we’ve built a good library of photos of our garden flowers, taken through the seasons.

Natural colour gradients from flowers

flower gradients
Real colour gradients from flowers.

Creating your own colour gradient swatches

 

Photo of the flower
Photo of the flower

Take a good, outdoor,  close-up photo of the whole flower with your digital camera. You don’t need to use an expensive camera.

Flower petal
Flower petal

In your image editing software, load the photograph and then crop the flower from the center to the edge of a petal. This allows you to grab colour variations from the flower. Same this image at a good size (1200px wide 72dpi will do).

Now you’ll need to open Illustrator.

Create a document, bring in the cropped image of the flower into one layer and lock it. Make another layer and  add a rectangle of the same width as the bitmap image and with a simple grey gradient, lock it. You should have something similar to what I have in the next image.

illustrator-gradient

Now we can begin to select the important zones to build the gradient. Add another layer and call it “rulers”. Make sure  your options for rulers and markers are  on.

illustrator-gradient-2

Working from the left to the right, add vertical markers to divide the zones of colours that you can see in the flower. These markers will then be used to pick and add colour to a swatch.

illustrator-gradient-4

Add a new group of colours to the swatch.
Bring up the colour picker and your screen should be similar to the one above. illustrator-gradient-3

Again working from left to right using the picker, select the colour under the marker and add it your swatch.

illustrator-gradient-5

After a few clicks your colour group should resemble the different zones of the petal.

Now we’re ready to change the boring grey scaled gradient into the final result.

illustrator-gradient-6

Set your screen up as above, make sure the rectangle which will receive the gradient is active.

Begin selecting the colours

From left to right, add a step in the gradient  which correspondes to the marker, then drag and drop the colour from you swatch to the gradient step.

Add the colours to the gradient

Your gradient will build and can of course be adjusted.
Remember this is not an exact science and the result is about “appreciation”.  Add or save the gradient in a swatch so that it is easy to use on other objects. Remember you can change the aspect of the gradient, the angle, the spread…

Colour gradients

It is beyond the scope of this website to display all the gradient swatches that we’ve made.

If you need advice or specific colours please contact us, e’re very happy to help.

Spelling & grammar

Using an automatic spell checker on web site pages seems to be very useful and I’ve always been proud when there are no words underlined in red.

I’m always typing in a hurry and give little time to proof reading and correcting what I’ve written.

I’ve now learned to not trust such tools at 100%.

I’ve just asked a professional to check over some of the pages on this site and was badly surprised at the very poor quality of text content. Some of the sentences just did not make any sense.

Since the corrections have been made, there is an improvement in visitor stats and contacts coming through the site, so it’s money well spent in my opinion.

Here is a link to the site correct-english.com which I highly recommend to you.

What languages do websites use?

A website such as this one, which is similar to millions of other websites, requires  different “languages” to display a web page on a user’s screen.

For this to happen, there are a few different computer “languages” which will be used and understood by the website and then your computer.

3 and a half language names

PHP (PHP Hypertext Preprocessor), this is a scripting language that is used on the server side of the the website before the information arrives on your computer. For example displaying products and prices and preparing your shopping cart.

HTML (Hypertext markup language),  the HTML contains the basic page format with the initial content and layout.

MySql (My Structured Query Language) is used to manipulate and query  databases where information is stored. For example it will be able to save your login details and your shopping cart contents on a server for future use.

Javascript, is derived from the Java programming language developed by Sun. Javascript is an on page scripting language used for many tasks such as validating email addresses before sending them to the server, changing  the display and content on the fly, sending and receiving information to the server without reloading the web page. Since the introduction of jQuery, using javascript on web pages has become so much easier.

CSS (Cascading Style Sheet), although not a language,  the syntax is slowly growing in complexity and offering more and more functionality. It’s purpose is to control the design and layout of a page.

This is not an exclusive list of languages and other sites do use different technologies methodes.

If you are interested in learning more about building websites contact us and also check out the following links:

jQuery, MySQL, PHP