Category Archives: Branding

2019 Marketing Budgets

Are you thinking about your marketing budget for 2019? A general rule of thumb is to invest 5% of your revenue, this would go towards developing your website, employing someone to maintain (or contribute towards) a blog or social media account, attending events and more…

Investing 5% should retain your position, company awareness and visibility online. Investing 10% or more is suggested for growth and gaining a bigger market share. Economists and business owners will debate over the exact percentage to invest, so lets say most small businesses will allocate between 5 to 10 percent to marketing in 2019.

Sample Marketing Plan

Planning ahead in life (and business) is difficult, we don’t know what is around the corner. That said; planning ahead and having a goal is super important. I recently allocated some time Tidy Design, mapping out the next five years and how I’d like things to pan out – it was a worthwhile exercise, offering much value. A marketing budget will need similar thought and planning applied; if we invest too much then we may break the bank, if we invest too little then we may disappear.

When I think of the term “marketing budget” I think ROI (return on investment). As business owners we all seek a ROI but this is not always easy. ROI’s require a mix of research, insights, planning and data analysis – this takes time and small businesses rarely have free time! It is easy to fall into a trap, too busy to plan!

Expectations…

You will need to know your marketing budget and set a clear plan within that budget (keeping realistic exceptions). Whether your budget is based on a fixed amount per annum or a percentage of revenue per month, knowing these figures is important.

So to conclude; when mapping out your 2019 marketing budget do your research and find out what type of campaign will have the best impact (ROI) for you / your business. It is a good idea to work backwards, identifying what you hope to accomplish at the end of it.

Rest assured that Tidy Design is on hand to help, we’d be more than happy to review your website (its design, performance and bounce rates), putting forward suggestions and ideas on how to improve it. Building a bigger customer base next year will require an upfront investment, we too are looking to develop and grow as a business in 2019, so lets do this together!

Thank you for reading, have a tidy week!

Mike

Elegant CSS Borders

This weeks Tidy tutorial is going to look at borders. Adding a little flair to a border can really add something extra to the feel of a website.

We’ve recently started working with a client with whose target audience is middle aged and older women, we wanted to give this website an elegant feeling, and we think we’ve achieved just that with additions such as these borders we’re going to talk about today.

This is a nice and quick tutorial, and we know you like that, you don’t always need to write lines upon lines of CSS to get great effects. So let’s jump in! We’ll start with the HTML markup needed:

That’s all we need, a simple div with the class of ‘border’ wrapped in a container. We’re placing it a container so we can make this box responsive and add some padding to stop it hitting the sides of the page. The initial styling will look a little something like this:

.container {
	padding: 2em;
}
.border {
	position: relative;
	width: 100%;
	max-width: 550px;
	height: 340px;
	/* We're picking out a colour from the background image we're using but you can pick any colour */
	background-color: #ccaeb9;
}

Here’s what you should be seeing, bear in mind we’ve got a couple of extra generic styles here but the fundamentals will be the same:

We’ll make the start on the borders themselves now, to get this effect we’re going to make use of the before and after pseudo elements. Targeting both before and after first for the generic styles this is what we’ll need:

.border::before,
.border::after {
	content: '';
	position: absolute;
	border: solid 2px #ccaeb9;
}

After this change we aren’t going to see a difference, it’ll look exactly the same until we target the pseudo elements separately to do the positioning of each border. Before we get to the next step make sure the ‘.border’ is set to position relative and that you’ve got some box-sizing styles set up like this:

*, ::after, ::before {
    box-sizing: border-box;
}

Now moving back to the borders, let’s start with the before:

.border::before {
	left: -20px;
	width: calc(100% + 40px);
	height: 100%;
}

Before we break it down, here’s what you should be seeing:

Right, now let’s look at that CSS block. Starting with the height, this is clear, we want the height of the border to be exactly that of the box. The width, we want 20px each side of the box for the overlapping border style, we do this in a way which can stay responsive. Using calc we add the overflow of the box to the 100% width. Now to finish the before section off we use left to move the border left, giving each side an equal space around the box. Another way this can be visualised is like this:

.border::before {
	height: 100%;
	width: calc(100% + (space on the left side desired + space on the right side desired));
	left: - space on the left side desired;
}

The after is going to look similar to above, but the width and height is going to be reversed:

.border::after {
	top: -20px;
	width: 100%;
	height: calc(100% + 40px);
}

The opposite effect should be given here, looking like this:

And that’s it, nice and simple here. Playing with pixels added to the 100% in the calc and also the left we can make the spacing of the borders around the box smaller and larger. I’m sure you can also think of ways to make this look even better with hover animations too! Have a play around on the Pen and share what you make.

codepen.io/TidyDesign/pen/qMMBoL/

Thanks for reading, catch you again soon.

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

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

Twitter & SEO

Twitter is an incredibly useful tool which can be used to help boost your business to higher levels, but if you aren’t aware of the best practices then you won’t be able to unlock the full marketing potential available to you.

Twitter Marketing

As with anything that’s as lucrative as Twitter is, people like to figure out the way it works and how to gain the most benefit from using the platform. This leads to research which you can take advantage of to help your numbers soar, using the Twitter machine correctly to increase the amount of interaction on your posts. It’s all about boxing clever – if there’s statistics out there which identify the best times for you to send out your tweets doing the opposite isn’t going to help you get the level of interaction that you’d like to see in return for you efforts.

So let’s crack into the numbers and find out how you can be efficient in the way you tweet.

Hashtags

Twitter Hashtag

When it comes to hashtags the most important aspect is research, there isn’t any point in using a hashtag that’s had no traction over the past 12 months. Make sure people will see it and it’s worth your time placing it into your tweet. On top of making your own searches to find out information there are tools such as http://hashtagify.me/ which gives data on specific hashtags and those relating to it.

If you’re creating your own hashtags there are a few must do’s to make sure they work. Make you hashtag short and concise, being straight to the point is a necessity here. It should also be recognisable and easy to follow.

Hashtags can either work for or against you. They’re great for getting your tweets found through searches and hook you into conversation topics but becoming hashtag happy can actually have an adverse effect to your tweet. One or two hashtags can significantly boost your user tweet, tweets with hashtags see twice the amount of engagement than those without but engagement in tweets that use more than two hashtags actually drop by 17%. #dontgetgreedy

Timing

Twitter Timing

Time can play a big factor in the engagement your tweets see. “Busy times” are the best times for you to put out your content, between 8AM and 7PM is where the largest engagement of tweets is to be found. This time period sees an increase of 30% than between 8PM and 7AM. Statistics show that the weekend is also a good time to send tweets, people are obviously using their downtime to browse Twitter as a spike in engagement of 17% is found over weekdays.

Another timing factor is frequency, over tweeting can become harmful to your brand. Putting out too many tweets in a short period of time can turn off users from your feed and even lose you followers. To make sure you keep on top of this it may be use for you to create a schedule for your tweets, knowing when to send out a tweet and what content it’ll include in advance can be a great time saver and make sure you don’t fall into the traps of over or under tweeting.

Wording

Twitter Wording

Keep your tweets conversational, the best type of tweet is one which is professional but not overly formal, making sure to exclude business jargon from you posts. This kind of tweet is something a user would be more likely to interactive with by replying, retweeting or favouriting.

The type of words used can also have a large impact on the viewer of the tweet, for instance imperative words telling the user to do something like ‘look’, ‘see’ or ‘make’ work very well. Including superlatives is also a good way of ‘bigging up’ your content and drawing eyes towards your tweet and helping push people towards clicking the containing links, try adding phrases like ‘the best’, ‘the most’ or ‘blow your mind’.

When it comes to the amount of words you may have 140 characters to use but it’s been found that using 100 characters is actually the optimal number for a tweet. As with your hashtags, keep your tweets direct, concise and to the point.

Content

Twitter Content

Images are extremely useful in boosting engagement on your tweets, including an image to a tweet can draw in 2 times the amount of engagement than those without. In a sample of 100 tweets the tweets with images saw 18% more click-throughs, 89% more favourites, and 150% more retweets. Those numbers speak for themselves.

It’s also worth directly asking for retweet, it may go against you initial thought but the numbers show that asking a user for a retweet does in fact work. Asking for a ‘RT’ can see your retweets increase 12 times, if you spell out ‘retweet’ you could reach up to a mammoth 23 times your normal retweets! For such a large boost this tactic is only used by 1% of Twitter users. Give it a shot and see how much on a increase you see.

Connections

Twitter Connections

If you’ve got a large Twitter following you can use this to help create connections with bloggers, if you see a blogger writing articles about the field you are in you can create a partnership where in return for solid backlinks from a reputable blog you can share their feature with your twitter base. It’s also a well you can return to because both parties are happy with the results they see, more exposure for them, better SEO rankings from the backlinks for you! A real win-win scenario.

Here is a base for you to work on for making tweets that are well received and return great engagement. Test these initial pointers on your upcoming tweets and see what improvements you can gain, add in your own research down the line and you can become a tweeting great.

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.

4 Modern Website Layout Examples

Layouts have not changed an awful lot since the release of CSS3 and HTML5. The days of using tables to layout a website are long gone yet websites still feel table like. There are benefits of having an unorthodox layout. No matter your trade you will always have competitors and I bet a lot of those competitors have similar websites (table like). Will a user remember one hundred similar layouts or the one that was different?

Diamonds

CSS3 has really changed the way we can style elements on a page. Using transform we can alter the appearance of nearly any element. Giving us the power to create some really unique layouts. Rotating squares into diamonds is one of the more basic examples; nonetheless very unique compared to its square cousin.

diamond-layout

The layout I have created can be used in a number of ways. An e-commerce store may use the two side diamonds as links for either men or women. They could be used as image placeholders to accompany the text in the centre. Whatever you choose this is a sure fired way to ensure a memorable site.

Box Overlay

Overlaying boxes on a traditional looking website can really impact its appearance and break the mould. Using shadows you can effectively turn the content inside into high priority areas for your call to actions (cta). Users are more likely to scan those areas of the page before anywhere else. Overlapping the boundaries of the layout beneath can also add to the effect.

overlaying-blocks

This layout would be great for a personal blog, the longer box to the left can act as an effective side bar while the posts can be placed to the right. The featured post can occupy the top of the page, its image being inside of the overlaying square.

Masonry

There are a couple of ways to achieving this effect. The easiest is to use a Javascript grid layout library called Masonry, it sorts all of the boxes into optimal positions to prevent huge vertical spaces. As quoted from their website “sort of like a mason fitting stones into a wall”. This means you can have many different shapes and sizes all fitting nicely next to and beneath one another.

The sidebar is also a less common feature and takes up a fraction of the space compared to more traditional versions. Using icons and single words allows the sidebar to become less of a prominent feature but remaining just as useful.

masonry-layout

This layout again can be used for blogs but also for dashboards. The boxes can contain important information for the website owner such as statistics or quick actions etc.

Marginless

This final concept is the most traditional looking of them all but it still has its unique qualities. The majority of websites use CSS to include margin between their sections. A marginless layout throws that out of the window and uses padding instead to create its white space. If you can get the correct colours and images then these layouts can look amazing.

no-margin-layout

These types of sites are great if your trying to sell a single product or advertise your business online.

Hopefully by now you have a few ideas you can take away with you to start building some truly unique looking layouts. It does however take more then just a great layout to build a memorable website but its the foundation on which everything else will be placed. Have a favourite layout? let us know in the comments.

Blayne Phillips

A Surprisingly Busy Summer!

Summer is generally a quiet time for us all. The kids are off for the holidays, most of us are holidaying abroad somewhere to catch some sun, and for those people who did see the sun in the UK, were making the most of it sitting in their garden or trying desperately to top up their tans on Southsea beach. But for those in the vicinity of the Royal Naval Club in Old Portsmouth, they would have heard the faint but fast tapping of keyboards from within Tidy Design HQ.

Throughout the summer, Tidy Design has been busy with a handful of new and exciting projects. As well as the Royal Beach Hotel mentioned in another blog post, the summer months also saw the launch of local opticians Cameron Davies and saw the development of total helicopter solutions company, Heli Operations.

cameron-davies

Cameron Davies brief was simple, to develop a modern, fresh and simple website to showcase their services and glasses. We were provided with some brilliant photos of glasses that had been taken in front of Portsmouth landmarks, and it was without hesitation that we put these straight onto the homepage. A lot of website tennis was going on, with us and Cameron Davies going back and forth with ideas and edits to make this website as best as it could be. The result being exactly what they had asked for, modern, fresh and simple!

heli-operations-2015

Although Heli Operations was not launched till September, for the last couple of months Team Tidy have been exceptionally busy with the development of this site. The finish result was always in our mind, to build a site that was slick, corporate and exciting. With the team of Heli Operations exhibiting at the Monaco Yacht Show later this month, it was extremely important to get this site launched on time and looking first class. We say it each time we launch a new site that ‘it’s the best site we have done’, and with this site we feel no different and are truly very proud of it!

Rosie Ward