Category Archives: Graphic Design

Creating a Cut Out Text Effect

Before we start, there’s a couple of small caveats to this incredibly visually pleasing (and simple) CSS trick, but don’t let that put you off!

First of all, there’s only two colours that this trick correctly works with – white on black, and black on white. The second of these caveats is browser support, it’s not available on all browsers, but it’s natural fallback is actually a perfectly suitable mid-ground. The blend mode stops working and you’re left with either black text on a white background, or white text on a black background, still completely legible and not out of the ordinary to see on the web. Check here to see where it will and won’t work – https://caniuse.com/#feat=css-mixblendmode.

Now, on to the trick itself…

This trick relies on mix-blend-mode. Simply put, the mix-blend-mode style describes how an element’s content should blend with the content of the element’s direct parent and the element’s background. There’s many different mix-blend-mode options, but the two we are using today will be ‘multiply’ and ‘screen’.

As I’m sure you’ll already know the majority of the CSS used to create this set up I won’t bloat out the examples with unnecessary code, but there’s a CodePen you can view which holds all of the CSS used https://codepen.io/TidyDesign.

We will start with black text on a white background. So create a h1 element and let’s give this a background colour of white, and a colour of black.

h1.cutout {
	background: white;
	color: black;
}


With this set up we can add the magic…

h1.cutout {
	background: white;
	color: black;
	mix-blend-mode: screen;
}

How simple is that, 3 lines of code and we’ve got a great cut out text effect!

Now, if you want to switch the colours to be white on black all we have to do is change these three styles. Swap over the colour and background values and change ‘mix-blend-mode: screen;’ to ‘mix-blend-mode: multiply;’.

That’s all, who doesn’t like effects this striking which are so easy to create! CSS is full of little secrets like this, try playing around with the colours and blend modes in the Pen to see what other things you can create…

https://codepen.io/TidyDesign/pen/aamweL/

Thank you for reading

Luke

UX Design Hampshire

UX stands for User Experience, some refer to this as UXD also known as User Experience Design. This process is all about enhancing user satisfaction, be it lowering the bounce rate of a web page or increasing the chance of an online sale through subtle call to actions / offers.

The process of UX design includes reviewing elements of interaction, we’d ask questions such as (1) who is your target audience (2) who is the competition and (3) what is your primary goal for the website / application we develop for you?

Before starting any UX design work we’d need to review and understand above. Some experimentation (visual design work) would follow, these would be concepts only, an idea of how things could look and move forwards. Your feedback on these designs would be taken into consideration, working together (and performing further research) these designs would evolve.

A review of information architecture (the structural design), users / user research, current trends (be it technology or browsing habits) is also advised. A good question to ask is “who is currently doing it well and why?”

In terms of UX this forms part of everything we do as a business, from sales to site development. Reflecting back; some clients had their own UX visions, views, ideas or a direction for us to follow, others simply leave us to it… Sadly “visual candy” is subjective, what works for one individual may not work for another. So with this in mind, a sufficient time allocation (UX development budget) is recommended plus we have to factor in trends. Concept work, competitor analysis and a collaborative approach will work best.

So what should you be looking for in a UX designer? Should you be employing a graphic design agency or a web design agency? Is UX design the same as web design? How much can you learn from the competition? What is a UX deliverable? Who is responsible for usability testing? These are just a few questions that spring to mind what I think “UX designer”.

Personally I would look for the following;

Natural ability

As humans we can learn to do a lot of different things, a simple formula of “time + dedication + hard work”, however natural ability (our genetics) are with us from day one. Before entering this crazy pace world of web dev I studied art at school / college, this evolved into a University degree called “BA Communication Design”. My point is this; an eye for detail and creative flair has been with me since I was little, long before web design. Some folk are natural runners, others great swimmers, my talent has always been art. UX design requires a combination of both technical and creative thinking, I’d suggest you look for someone (or a company) that caters for both. A lot of UX design boils down to common sense and an eye for detail – this is important to remember.


Check out some of my artwork here

Understanding usability

Usability and UX design go hand in hand, an ability to use a system, application or an object correctly without weeks of training is very important (time is money). Personally I think Apple do this so well, you receive a new iPhone, there is no 300 page user manual, simply a card with two or three instructions – boom, job done!

Good usability (and also first impressions) is essential to a positive user experience, but this alone does not guarantee a successful product… Usability testing forms part of this process, we have been involved with many focus groups (MyBirthplace.org and a room full of midwives spring to mind), understanding and working with user feedback is important. When I think of usability and usability testing I think of an object (be it a web page or application) designed with an end-user in mind, however end-users will vary. A good UX designer will want to make an object effective, easy to use (or learn), satisfying and faultless – catering for all (or should I say most) end-users.

As a UX designer, our main goal will be to solve problems, making “the process” as pleasant as possible. UX designers will need to be a jack of all trades or have people around them that bring certain skills to the table. For example; A pretty user interface may look nice (visually pleasing) however if its code base is buggy then application performance (speed and stability) may result in a bad UX. So, it is more than just looking pretty.

Personally I’d suggest you avoid listing out unnecessary product features and think more like Apple, less is more! Simplify your designs and documentation, incorporate your business and its mission statements to build trust. Getting a grasp on the user’s needs and goals is a must, from here we can begin to map out unique selling points or interaction frameworks / wireframes.

Anyway, I hope you enjoyed this post on UX design. If you have any questions for Tidy Design then please do not hesitate to contact us, we’d be happy to help.

Mike

Art Doodles

They say that your biggest critic (apart from yourself) is your children. As an adult, we shy aware from confrontation, criticism and candidness. Our children however are blunt, brutal and bullish. Not that this is a bad thing. To hear both of my sons say that Mummy’s macaroni cheese is the best in the world, is a compliment like no other. To hear however, that they would prefer Daddy to draw them a picture because Mummy’s not very good at it, well its a good job that I’m thick skinned. At least they are honest!

alien sketch colour in

It is no surprise that Mike is a great illustrator. As well as doing doodles at home, he has also illustrated for clients including NHS MyMaternity, and illustrated his own childrens books. Not a day goes by without either of our children asking him to draw something for them. Latest themes include Ghostbusters, aliens and scary clowns. Mike refused to draw the latter! I am proud to say that my eldest son Isaac, is following in Mike’s footsteps and is great at drawing. Where at the age of 30, I still draw stick men, Isaac, aged 6, can draw hugely detailed sea creatures, rockets, monsters, aliens… the list goes on. He even won the schools colouring in competition for his year group at Christmas time.

isaac ward portsmouth

Drawing is a massive part of both our business and family life. Had Mike not have been so creative, I doubt Tidy Design would be where it is today. His creativeness has influenced most projects that we have been fortunate to have been involved in. And with Isaac following in his footsteps, we need not worry about his future either. A mini member, is just what Tidy is looking for!

Here are some recent examples of Mike’s sketches for the kids;

alien head sketch

cartoon frog sketch

ghostbuster logo sketch

monster head sketch

ghostbuster man sketch

zombie cartoon swketch

Gandalf the wizard sketch illustration

Rosie

My Maternity Website

Over the past few months Tidy Design has been working closely with NHS England to design and develop a web based portal for expecting mums. It was great to receive some glowing feedback from the project manager yesterday…

“We chose to work with Tidy Design as they had designed another local maternity app ‘mybirthplace.org’. We have been so impressed with the experience we have had; having regular updates and contact with the team. When we have wanted changes made these have been undertaken in a timely manner and we always experienced a very professional and dedicated team… Thank you so much for your amazing work!” – Donna Evans (NHS NORTH EAST HAMPSHIRE AND FARNHAM)

You can find out more about My Maternity at mymaternity.org.uk. Below I have uploaded a batch of illustrations I created for this project:

Have a great Feb and best wishes from us all here!

Mike

Albatross Paragliding

We are very proud to see the launch of one of our new websites… Albatross Paragliding! This website was commissioned by a client whom we manage a couple of sites for. These include ET Games, and MonkeyPuzzle.

The spec for Albatross Paragliding, was to have something simple and to include a paragliding video as a central element within the site. The video sees Dave (the instructor) paraglide over the stunning scenery of Hampshire.

Overall, the new site and logo took Mike a few days, and we feel the simplistic look gives the site a fun, fresh and exhilarating look. The pictures and video have also provided a great topic of interest within the office….would you or wouldn’t you?!?!

Rosie

Company Branding

Let’s face it, company branding is a pretty important part of business; we need to get it right! So many of us neglect it, not allocating time to that important question; what does my brand/business stand for?

When I think of branding and brand development I think of a company logo (or name), a website (its images and content), social media activity, the people behind the products or services on offer, company values and end-goals. Branding is combination of these important elements – add them all together and this is how a customer perceives you.

I believe a strong brand identity will provide a company value beyond physical assets. Its worth a time investment, something us business folk should step back & review every so often…

Our Mission

Here at Tidy Design our mission is simple; to deliver a return on investment, be it for our customers or the staff we employ, working together we will do better. Each day we set out to offer our customers a quality service, the goal being to leave a long lasting and positive impression. Happy customers result in repeat business.

Thanks for stopping by, if you have any questions or feedback then please post them below.

Mike

Olive Tree – Pen Sketch

Whilst on holiday in Italy this summer I did a lot of drawings, most of these doodles got given to my two boys who coloured them in, however a couple I kept for myself… Below is an olive tree, a quick pen sketch I did following a drive around Umbria, viewing its many olive gardens.

Olive Tree - Pen Sketch

Here are a few photographs I took of an olive garden, some pretty spectacular scenery;

Olive Trees 03

Olive Trees 02

Olive Trees 01

Following my olive tree sketch I started work on an olive tree branch, probably my favourite doodle of the holiday…

Olive Branch Sketch 01

Olives Sketch 02

Olive Branch Illustration

Personally I find illustration, fine art, painting etc a great escape… It really helps me to unwind and switch off from the busy World we live, a World heavily influenced by tech, social media and computer screens. So to conclude; I hope you liked my olive tree / olive branch sketches, please visit our illustration page for more tidy art, doodles and paintings…

Mike

Creating a Mobile Navigation

Today I’m going to give you a short tutorial on how to create a mobile navigation. This mobile navigation will slide in from the left side of the page. Here you will find everything you need to create the nav including how to animate the hamburger icon and the JavaScript needed to open and close the menu.

We will start with the html needed to create the menu:

The first step is to wrap the whole navigation in a ‘nav’ tag, this a new HTML5 tag which represents a section of code with the purpose of providing links. Next is the navigation toggle (the div which will be the trigger for opening and closing the nav), this will have a class of ‘nav-toggle’ and contain the hamburger icon to indicate where the user should click to open the menu. Three span elements will be placed into the ‘nav-toggle’ div, these will be used to create the hamburger bars. The main styling of these bars will be implemented using the ‘bar’ class and the positioning will be done through the ‘id’ assigned to them.

Finally we create a div with the class ‘nav’ that’ll hold the logo of the company as well as the ‘ul’ containing all the links needed. For now we will add a ‘#’ inside the ‘href’ as a placeholder, later this will be swapped for the url you’d like the link to direct to. This code will give you the very basic structure ready to be styled with CSS.

Moving on to the styling will start with the ‘nav toggle’. We want this to be set to ‘position: fixed’ so it follows us as we move down the page, if it wasn’t then the user would have to scroll up the page just to open the menu. Once the position is set to ‘fixed’ we can move the toggle to where we’d like it, I want mine to be sat at the top of the page to the left. Here is how:

If you’d like yours to sit to the right of the page swap ‘left: 10px’ for ‘right: 10px’.

Continuing the styling of the nav toggle we set a height and width of 40px along with a background colour. The colour we’re using in the tutorial is one which matches the clients colour scheme, but you can use any colour you choose. This will leave us with a small green square, we want our toggle to be a circle though so let’s add a border-radius of 50%. Add the following code to the previous block:

To finish of the main styles for the nav we will add a box-shadow to make it stand out from the page and a z-index so it stays above other elements on the page. Finally we need to set cursor to ‘pointer’, this changes the cursor on hover and without it iOS devices won’t trigger a JavaScript click event. Below is the complete css for ‘nav-toggle’ and how it should look in your browser:

Now we have the toggle styled we need to add the hamburger bars. This is a simple process as the ‘bar’ class has been added to all three necessary elements one block of code will style all three. The CSS is relatively straight forward. ‘Position’ needs to be set to ‘absolute’ so we can move them easily into place, and the ‘display’ set to ‘block’ so it can be given a height and width.

A nice trick here as they’re positioned absolute it to set the margin to auto and left and right to 0, this automatically centres them inside the nav toggle. Here are all the styles needed to make the hamburger bars.

If you were to refresh your page now you’d the nav toggle with one single bar at the very top, this is due to them currently set to the same position. All three bars are there they’re just sat on top of one another. This is where the ID’s come in, we need to target each bars ID and space them out evenly.

We can leave the nav toggle and return later when it comes to animating the hamburger ‘bars’.

Now for the navigation. We need the nav to stay on the side of page no matter how far the user has scrolled down, for this set the position of ‘.nav’ to fixed. Once the navigation is stuck to our scroll position it’s time to set the height and width. For the height a simple 100% is needed here for it to be the full height of the screen regardless of the device it’s viewed on. Width can be whatever you’d like, for the tutorial we’re going to use 230px. The starting code for the nav should look like this.

The final nav styles for now include a background colour which again is up to you what you choose, we will run with the colour scheme already in use and pick a lighter green that’s slightly transparent. The background colour style will be set to an rgba colour so we can specify the alpha, our is ‘rgba(126, 160, 97, .95)’. To make sure it always sits on top of the page elements a z-index of 5 needs to be set. The complete nav styles so far are:

Next is a very simple setup for the ul, only two styles needed here. First being ‘list-style: none’ this removes the the bullet points next the list items. The second style is for the padding, removing the default padding and adding a slight bit of padding to the right, we will use the shorthand here and set all 4 sides with one line ‘padding: 0 12px 0 0’.

For the list items themselves we only need another two styles, the font styling itself will be placed on the ‘a’ tag within the list items. Here we space out the list items with a margin bottom of .65em and align the text to the right.

On the ‘a’ tag we will set the font size, font colour and the remove the default underline an ‘a’ tag gives. You will see the sizes and colour we use below but you can pick your own to match the project you’re working on.

When it comes to nav logo depending on the size and content you may need to style this differently than us but for the logo the client uses to position it properly we use the following styles.

Now the nav is completely styled we can move on to making it functional. The first part of making it functional is to hide the nav from view, this is done with a transform style. We need to add ‘transform: translateX(-100%)’ to the ‘.nav’, this hides the nav off the page to the left.

We also need to create the class that we will add to the nav later with javascript. We add this class to the containing nav element in CSS and call this class open with the style ‘transform: translateX(0)’. When this class has been added the nav will sit where it did before we added the previous ‘transform: translateX(-100%)’.

The javascript is actually a very simple piece of code which once ‘.nav-toggle’ has been clicked toggles the class ‘open’ on the nav element. It’s the only piece of code needed and looks like this: (Make sure you have jQuery added to your project)

If you test this now you will notice two things, first being that when the nav shows it just jumps into place rather that sliding smoothly. Second, the nav toggle doesn’t indicate in anyway that it’s been clicked. We will change these two things now.

Starting with the animation side of things we will add a transition to a few elements to make sure that the nav slides in and the nav toggle bars will animate properly.

Another quick test and you will see the nav now slides in and out smoothly, you can either speed or slow down this transition by changing the .3s for whatever you’d like.

The very last part of this is to animate to nav toggle and hamburger bars on click. We need to add a few styles to the ‘.nav-toggle’ container, these being the position, background colour and box-shadow colour. We add a transform set to ‘transform: translateX(167px)’, if you changed the width of the nav you may need to adjust this. The background colour change is just to make it slightly more transparent and the box shadow is to change it to completely transparent. The styles for these changes are:

The styles for the hamburger bars are simple but effective, we start by adding a transition delay to ‘.bars’ which applies to all 3 and then move to individually styling each bar. The first bar takes a transform which moves it down 7px and rotates it 45 degrees. The second bar gets hidden by an opacity set to 0. And last but not least the third bar gives given the same styles applied as the first but swapped to negative, it’s moved up by -7px and rotated -45 degrees. All 4 style declarations are below for you to see.

If you’ve followed this tutorial through you should now have a fully functional nav bar that’ll work and look great on both mobile and desktops. We will shortly be adding a demo page where you can interact and dissect it if you curious about anything… Enjoy!

Luke

New Southern HR Website

“A big thankyou to Mike and the team for giving me a brand new website www.southernhr.co.uk with a minimum of fuss but great care and attention to detail. From a very vague and short brief they have more than met my needs. Thanks David Miles”

southern-hr-website-portsmouth

As part of the package we included a free logo design and some branding, all in all this was a fun site to develop – thanks for choosing Tidy Design.

New Solent Fire Website

A few weeks ago Solent Fire contact us to discuss their website, it was pretty dated and required a complete re-design. Working with Solent Fire we put together a couple of design concepts, these soon evolved into the new website, please see below:

solent-fire-services

solent-fire-services-02

We hope you like the look and feel of SolentFire.co.uk, Tidy Design is delighted with the end result. We are now discussing the next phase of website development, please stay tuned…

solent-fire-services-03

Finally, it was great to receive such positive feedback from Solent Fire on this project, thank you so much for choosing Tidy Design.