New Office for Haywyre

New Office for Haywyre

New Office Address

We are pleased to announce that we have moved to a new office. The new address is

Room 1.48 Repton House
Bretby Business Park
Ashby Road East
Burton on Trent
DE15 0YZ

New Telephone Number

Our new telephone number 01283 222339. Give us a call we would love to hear from you.

 

Disaster Recovery Plan In Action

A fire in a key  British Telecom building in June caused major disruption to internet services affecting businesses, homes and public bodies. This included the Housing Executive which saw its website and a number of systems go down after the blaze.

One of our clients websites was also disrupted with customers unable to access these services.

Haywyre were quick to respond with a disaster recovery plan, creating emergency holding pages for key website areas to inform customers about issue and that normal service would resume as quickly as possible.  Staff worked through out the day and into the night to enable our client to keep customers up to date.

As soon as the services was available Haywyre reacted quickly to ensure that all the application processes were up and running and the regular customer service could be resumed.

Toyota Zip Wire Challenge Day

Toyota Zip Wire Challenge Day

This year one of our clients, Toyota has signed up to be a corporate partner of Comic Relief and Red Nose Day 2015.

Across the first quarter of the year the whole Toyota UK family are joining together to fundraise for this fantastic cause.  Every Toyota business, employee and retail partner in the UK will be breaking out into their local communities and doing a whole host of fun and challenging things for money, with the ambition of raising £1m for Red Nose Day 2015.

On Saturday 28th February Toyota is running a Zip Wire Challenge day at Derby County’s iPro Stadium and all proceeds are going to Comic Relief!  The slide will allow fans to sail down the wire at a length of more than 200 metres and at speeds of more than 40mph from the top of the North West corner to the bottom of the South East corner of the Stadium.

If your interested in taking part in this  challenge click here for more information or visit www.toyotauk.com to find out more about Toyota.

New Website Launched for the Burton Venture Trust

New Website Launched for the Burton Venture Trust

We are delighted to say that we have created a new website for the Burton Venture Trust.

The Burton Venture Trust is a voluntary organisation based in Burton on Trent. It has been running for over 40 years.  It works with families and young people of all ages to provide an exciting range of outdoor and recreational activities to broaden their experience and extend their potential.

We have created a website which will enable members of the Trust to access information about current activities and potential members to find out about all the great experiences the trust offers families.

The new website can be easily edited and updated by the Burton Venture Trust staff using the content management system which we have developed in house.  The CMS is called Emperor CMS.  It enables the users to to post news items both in the secure area for BVT members and on the front page for general website visitors.  A gallery of pictures of the Trust’s activities has been added which can also be maintained using the content management system.

Have a look at the  website you might want to join.

The text editor everyone is talking about…. Atom

The text editor everyone is talking about…. Atom

If you’ve been living under a rock for the last 6 months Atom is the open source text editor developed by the guys at GitHub.

I’ve been using it (www.atom.io) for about a month now and i’m loving every minute. There’s something so loveable about this quirky little text editor thats hard to put in words. The big selling points for me were the simplicity, the cost (it’s Free) and the fact it’s open source, it just seems cool.

Now Atom is not perfect, every so often when I close a project I get a error message and it can take a while to open the app, but it’s these bugs that make it so lovable.
There’s also something about the cool bright green syntax highlighter, it brings back memories of my favourite computer game Fallout 3.

Out of the box atom is pretty limited, but start looking around at the packages and there’s so much you can do to extend Atom. There’s packages that contain cool bootstrap autocompletion classes if Bootstraps your thing, this can save a ton of time. There’s also Linters for most languages our there, I use PHPLint and JSLint. I recently started using laravel and was pleased to see a laravel/blade syntax highlighter in the packages.

The important thing to remember is that Atom has only been out since the start of this year and it already has a massive community, it’s exciting to see what the future holds for this little text editor. If you’ve not yet gave Atom a try then you should definitely give it a go.

Less is More: The Fundamentals of Minimalism in web design

Less is More: The Fundamentals of Minimalism in web design

Minimalism with Depth in web design

Minimalism is about simplicity in web design, do not mistake this for plain or boring designs. A website can be minimalist but still eye-catching and beautiful. There are hundreds of ways to make a minimalist website more exciting, this includes splashes of colour, animations, transitions between pages, videos and high resolution photographs. With the right balance, you can keep a website simple and straightforward, but with an element of beauty.

Here are some great examples of designs that have minimalism with depth:

 

Screen Shot 2014-08-12 at 16.49.25 (2)

grimouville.francebleu.fr

 

Screen Shot 2014-08-12 at 16.49.31 (2)

genau-moebel.com

 

 

White Space

When we look upon white space, the eye is immediately drawn to the object/s within it. Therefore the rule stands: The more attention you want an object to get, the more white space it should have surrounding it. Never underestimate the power of negative space. It can be so easy to think that by adding more into an empty space, we are creating something more aesthetically pleasing. Or that this can be achieved by cramping together the objects already contained in the design. It’s fairly safe to say that this is usually not the case.

Here are two examples where white space has been used very effectively to create beautiful websites:

 

Screen Shot 2014-08-12 at 16.28.33 (2)

www.guillaumejuvenet.com/#home

Screen Shot 2014-08-12 at 16.22.48 (2)

www.agnes-cecile.tumblr.com/

“Less is More”

When we think of minimalism we think of this phrase. The key to minimalism is to create something simple, striking, appropriate and memorable. It is very easy to go overboard in the world of design, and adding several good ideas to one piece does not often lead to one great one.  It is often the most simple of designs that will achieve the desired affect, but this can be very difficult to pull off. Sometimes it seems almost impossible to have a design that is simple, but not plain and boring. This means we often feel the need to add more text, more graphics, and more colour – but we often tend to find that this is not always the best approach, and can leave designs looking tacky and aged.

If I were to show you this image, you immediately know the company without any text or colour needed. Apple are a great example of a company that has mastered the art of minimalism.

 

Apple-Logo-apple-41156_1024_768

 

 

 

Allignment and Balance

An important element within the minimalism movement is the balance and allignment of the design. It’s usually very clear when a design works and when it doesn’t, and balance plays a huge part in this. For example, nobody wants to look at a site with all of the graphics and information on the left hand side, and lots of white space on the right. It just doesn’t have a nice balance, and this is even more important when we look upon minimalist designs. Because there is often such a small amount of elements to the page, it’s really important to ensure the page is nicely balanced and the objects are appropriately alligned.

This site is a really nice exapmle of a well balanced page that does not contain a lot of elements or objects:

 

533c54111e6c5

 http://dieze-sixzero.com/

 

 

Illustrator and PhotoShop Tutorial: Draw yourself as a cartoon

Illustrator and PhotoShop Tutorial: Draw yourself as a cartoon

In this tutorial I will show you how to draw a cartoon version of yourself from a photograph in Illustrator and PhotoShop. The final image will be a vector illustration and I will demonstrate how to use the pen tool and several Calligraphic brushes to create your image. I think they make a nice avatar for social media.

1. Preparing the Image: Open Adobe Illustrator and create a new document with File > New. I have chosen the image dimensions 800px by 800px.

1

 

 

2. Drop and drag the photograph of your choice into your document, or use File > Place to place the image into the document. I’m using a picture of my purple-haired self.

2

 

 

3. Double click the layer and tick the “Template” box. The image will be locked and the opacity will be at 50%. This just makes the image easier to work with, and we can change the image back later if we need to.

3

 

 

4. Now we need to choose the brush we will use. I have downloaded this collection of hairbrushes from here: http://www.artjunks.com/exclusive-free-illustrator-hair-brushes/I have changed the colour to black and the thickness to 0.5px.

4

 

 

5.Create a new layer, and using the new brush, draw around the outlines of the photograph. This is very easy to do using a graphic tablet pen, but I have just used a mouse. The image isn’t going to look great at this point, but it gives you an idea of where to begin.

5

 

 

6. Hide the first layer to see the lines you have drawn, this makes it easy to see if you have missed anything.

6

 

 

7. View the first layer again, use the eyedropper tool to select an appropriate skin colour. Create a new layer in between the first layer and second layer. In this layer, use the Basic paint brush to fill in the face and neck. Avoid going over the lips, eyebrows and eyes. It doesn’t need to be neat for the time being.

7

 

 

8. Create a new layer above the last one you created. Use the eyedropper tool again and do the same for the hair. It’s still going to look quite messy for the time being.

8

 

 

9. Using the hair brush tools with about 4 or 5px thickness, choose lighter and darker versions of the colour you have already chosen. Going with the direction of growth, add some shadows and highlights to the hair.

9

 

 

10. Create a new layer, above the skin layer but under the hair layer and black lines layer. Start with the whites of the eyes, build with the iris, then the pupil, then the lashes, then the eyebrows, and finish with small white light reflections in the eyes. Make sure you’re careful with the order in which you paint sections of the eyes. Use the hair brush at about 0.5 thickness for the lashes and eyebrow hairs.

10

 

 

11. Remove any unnecessary black lines from the second layer we created. (Excess lines around the eye, black eyebrow lines).

11

 

 

12. For the lips, you may want to use a basic brush. Use the eyedropper tool to select different shades in the lip colour. Remove any black lines from around the lip line; the mouth line in the center is okay.

12

 

 

13. Select the black lines that outline the nose, by holding command/control as you click each line. Double click the color picker, and choose a darker shade of the skin colour you have used. This creates a softer shadow rather than harsh black lines.

13

 

 

14.At this point, you can remove the first layer (the photograph). Lock every layer, apart from the second layer we created with the black lines. Remove any excess lines that will now look out of place.

14

 

 

15.Export the file, by going to File > Export and select PNG as the file type.

15

 

 

16. The file will now be a transparent vector. Open the file in PhotoShop. Use the Crop tool to give the image some space.

16

 

 

17. You can now rotate the image, change the background colour, add text, anything you like!

17

Well done!

You have now created a cartoon-ish version of your image. Thanks for using this tutorial, I hope you enjoyed it and found some new skills.

 

collage