Tag: graphicdesign

How to get involved in Usability Testing

This is a really quick blog post, it’s been far too long since I posted last and I am sure you are hungry for some more content. Recently, I have been conducting a redevelopment of migsolv.com and to help us design a better website for our users we asked users to test what they liked and disliked about one of the most successful data centre companies in the UK. It was quite interesting watching the videos back and listening to what they had to say, the people are very frank and straightforward and make it clear what is well designed and what could be done better. In this post, we share how you can get involved in usability testing as someone testing websites.

Continue “How to get involved in Usability Testing”

Is it ever okay to use a template for design

When a lot of creatives read this blog title I imagine a combination of fear, disgust and anger will be running through their veins at the suggestion of such a thing but in all honesty, even though I am a designer and creator of branding there is a place to using templates. In this blog post, I discuss several places when and where it is okay to use a template for design of a new digital presence. Continue “Is it ever okay to use a template for design”

Create infographics easily without Graphic Design Knowledge

To create infographics takes time, fact. Anyone who has ever had the inclination to design an infographic will know they are not that simple to create, you first have to collect your data, then select how you want to represent that data, is there a particular theme you can adhere the information to? Next you need to create graphic elements that will communicate the date effectively and lastly is there a way you can create a sense of flow in the layout.

create infographic



Create Infographics faster

As you can tell that really does take time! Luckily for those without graphic design skills do have an answer to their prayers, easel.ly. This website allows you to create infographics from a basic template without the need to have spent time learning the mainstream vector creating programs. Below is a brief introduction into just what is possible with this fantastic infrographic tool.

Although this is a great tool for the novice graphic designer it can be quite limiting to what is possible and that is why an infographic created from scratch by a professional digital designer will always be slightly more professional and detailed than one created via a platform such as this. If you need an infographic quickly, maybe for a blog post and don’t have the funds to hire a designer at the moment this is a great option but otherwise I’d still recommend hiring a designer to communicate your data as professionally as possible.




Have you used easel.ly? How did you find it? Do you know of any other infographic programs? Please feel free to comment in the box below.

    Infographic CV

    It has been two years since I landed my current inhouse design job as a website and graphic designer and (without sounding like a big head, sorry if i do :s) my skills have improved a great deal in since when I. I recently discovered an old CV on an external HD and it was a simple word doc that didn’t really show what I am capable of so decided it was about time I updated it to reflect my advancement in design and to tell my personal story in a more visual way.




    I wasn’t sure whether a visual infographic CV is something that was going to impress people who view it or whether I should stick to a traditional written resume. My thinking was that by creating an infographic CV it shows that I am willing to take a design risk whilst trying to show my personality through visual forms.

    Digest information quickly

    Not only this but infographic CVs are usually easier to digest for the viewer because graphical information is quickly communicated and play a large part in the delivery of my work and educational history and as the saying goes, a picture speaks a 1000 words.

    Considering an employer will likely be flicking through hundreds of resumes if yours can communicate your work experience and background in a short space of time it is, in my opinion, a win for the person viewing it and an enjoyable experience for the designer who created it.

    Benefit of upgrading to an infographic CV

    By updating my resume to an infographic CV I have had to really study my past work, education and personal history in order to be able to communicate this visually and hopefully create a flow of information in the design I have created which makes me see areas I need to improve upon but also where I feel I have done well. Basically this a SWOT analysis of self, a really important thing to do periodically in order to improve your ability as an employee and to be able to give all you can to your employer.

    Downside of upgrading to an infographic CV

    There are two downsides to creating your CV into an infographic, one is that is a risk as the employer may not like the design or the fact you are breaking traditions and secondly it takes quite a lot of time to create an infographic and if it doesn’t impress your potential employer then the time you have spent creating it may have been for waste.

    Infographic CV in the flesh

    So here it is, the infographic CV I recently created, I hope you like it.




    John_A_Wilson_CV

    AIDA the process mind goes through in successful advertising

    Advertising has been around for a very long time, from some of the earliest forms in the Roman empire displaying Caesar’s head on a coin to modern website banners. Adverts are all vying for our attention and to influence us, the more businesses that are being founded the need to make successful advertising is growing even greater. Knowing how the human psyche works give advert designers a little head start in creating something that stands a chance of convincing the viewer that they need the product or service in question. This is where AIDA comes in.

    Continue “AIDA the process mind goes through in successful advertising”

    Twitter Profile size 2015 and some examples , NEW!

    Another new twitter profile size?! Really!?? Once again, one of the top social media channels has changed the way it looks trying to improve the user interface and I must say, they have done quite a nice job of it.

    I find it to be a much more minimalistic approach than with the interesting background and follows the same style of Google+ and Facebook with a large header and a small profile picture to one side which in turn makes it easier to design your branded images for and maintain consistency throughout. In this post I will discuss the new twitter profile size for 2014 and what to consider when creating yours.




    Twitter Profile Size 2014 – The header

    JAWilsonDesign Twitter profile, twitter profile size 2014

    What you will notice when you activate the new twitter profile is the header of your Twitter profile has now been made to expand the full width of the users screen. Although this a beautiful, simple idea if you have built and designed your Twitter profile in depth to exact measurements in the past it may result in your branded profile being blurred or pixelated…not good!

    The new measurements of the Twitter header is at least 1500px x 500px and I recommend using a large ppi ( ppi is an abbreviation for pixels per inch. A pixel is a dot on the screen that makes up your image, the more of them the more clear your image will be )  as this will improve the clarity of your image especially if a user is using a very large screen such as a 2560px x 1600px retina display. Also, after uploading a jpeg i discovered Twitter seems to render png files better with less loss to the actual quality of the image, so yep, you guessed it, save it as PNG.

    Twitter Profile Picture Size

    The profile picture for 2014 size has increased in size on desktops too now displaying at approx 210px square. I still recommend adding an image that is fairly high in ppi, larger than the 210px but ensure that the profile picture remains square for best display.

    Twitter Header peaks through

    jawilsondesign new twitter header with the new change to the twitter profile size 2014

    As you scroll through the Twitter news feed the header remains slightly in view by around 10px. I really like this feature as it add a decorative element to the new view. I’m really impressed with how nice the new interface feels on desktop, its so intuitive and pleasent to view, I get excited just looking at feeds on my laptop!! WOOP!

    Avoid text with the new Twitter Header

    I believe that avoiding text on your header is now compulsory. I would avoid it at all costs ( I know I have it at the moment ) as on smart phones it will not work well so try to be clever with images instead of having to include text. If people really want to find out more about you or your company they will visit your website and find out there.

    Background still has a use

    jawilsondesign main background - twitter profile size 2014

    Twitter backgrounds still have their place and what I have found is that it still displays the background when you log in. It is no longer customer facing so design it for your own benefit. Maybe consider adding a message to remind yourself what you use Twitter for and when to use it. For example, maybe you could have the days of the week on one side and then each day suggest a topic that you want to discuss on that particular day or maybe simply just use the same image as the header, it is just for people that use your Twitter account so don’t worry about it too much.

    Choosing your brand colour – Twitter Profile 2014

    Again the colour selection remains and does have a great personalising effect on your profile so ensure that it is selected and not just the standard blue. Colour has a huge effect on a users psychology and recently, i spoke about the effect of colour in this blog post about branding here .

    Responsive Twitter Profile Size 2014

    Keep in mind that end users will, a lot of the time, be using the social media platform on their smart phones rather than the desktop display. When I looked at my new header design on mobile I noticed that my main marketing message ,my website url and my specialities, is slightly covered. To rectify this problem I would probably put my main skills to the very top of the header in order to avoid this happening, but for the time being, I’m quite happy with the way it looks.

    Some 2014 Twitter Profile examples

    Seeing how others are designing their new Twitter profile under the newly designed user interface can inspire you to design your own. I have put three of the ones I have spotted that I think are great designs, the first of which is Smashing Magazine, a web designer/developer magazine.

    smashing magazine twitter header , twitter profile size 2014

     Smashing Magazine Twitter Header 2014

    I particularly like the flat and fun cartoon illustrations of the editor showing that they have a sense of humour but also mentioning the url of their company. It makes me want to visit their site simply because i feel I will have a smile put on my face.

    twitter profile size 2014 , thrive agency use a subtle pattern for their new design




     Thrive Twitter Header 2014

    The next one is Thrive, a branding agency based in the North East of the UK. They have created a repeated image of their logo as a pattern for their new twitter header and it works really well. Their profile is all about branding so showing their brand colour and logo is a great way to show a professional design to their visitors on desktop computers, likewise, it will look great on smartphones as no text will overlap their account profile.

    twitter profile size 2014 design of designboom

     

    Design Boom Twitter Header 2014

    Designboom are an excellent website all about design and they use their header to show some of the famous faces of design. I have always been a fan of their logo and I think their Twitter header compliments their brand message and content  effectively.

    Whether you are creating a new twitter account or updating your current site its important you reallt think through your graphics and whether the correct message is being portrayed. You may not think that a message is important when most people are focusing on what you tweet but any opportunity you have to either brand your business or self should not be missed and it shouldn’t be taken lightly and it would be wise to take at least some careful consideration of how you want to represent yourself to visitors of your Twitter account.

    Do you have any other suggestions about the new Twitter Profile display? Would you like your profile included in the gallery? Please add a comment below with your twitter profile, I love to seeing the creativity of others. Happy 2014 tweeting folks!



    6 things to consider when designing a Twitter Profile

    Designing a Twitter profile seems really really easy, upload a picture as your profile image, a background image, set your colour for links and bobs your uncle it is done. But alas, that was a story from the same place Cinderella comes from, creating perfected branded Twitter profiles really needs a Graphic Designer familiar with digital design and marketing, preferably social media marketing. In this blog post I will discuss what you need to consider when designing a Twitter Profile to perfection and why it is more important than you think.




    1. Designing a Twitter Profile with  exact Twitter Profile Measurements

    The exact measurements of the profile is really important, to the width of the timeline, to the width of the sidebar, to the header size and the profile picture. All these elements have an effect on designing your Twitter profile layout (This my Twitter Account). You then need to consider are you going to left align the background image, centre it or right align it. Once you have considered the layout of the design next you need to keep in mind that everyone will be viewing Twitter on different platforms.

    2. Screen resolutions vary

    designing a twitter profile a bad example

    Twitter is available to view on many different size screens from a small smart phone screen upwards to a very large Apple Desktop PC. Twitter is a responsive platform meaning that you need to consider how your background is going to look on screens with different resolutions. If you look at the above image you can see that the company has not considered that everyone will view their profile at larger screen sizes and forgot to set the default background colour as white to help fade in the image to its background. This is easy to change but important to get it right otherwise you will begin to look cheap and unprofessional.

    3. Branding

    So you have considered what to include in your layout when designing a Twitter profile and remembered that users will be viewing your profile with different size screens, next you need to consider your businesses brand.

    Branding is really important and if you are not consistent with your business message your audience will become confused if your identity looks different on Twitter so try to keep it looking similar to your website, collateral and overall brand. If you have one ( and professional brand designers should provide you with one ) use your style guide and adhere to it as close as possible.

    4. Communicate product or service when designing a Twitter Profile

    Next you will want to take the opportunity to advertise the product or service you are selling. Consider the images you are using as your background and header and do they put across the right marketing message? Does it communicate a story and/or have a call to action such as ‘download our free ebook’ or ‘sign up to our newsletter to find out when our new product is released’ etc. Although your users won’t always see your main profile background it is a marketing opportunity you should exploit and if someone should visit your Twitter Profile it should communicate something appropriate.

    5.Social Media Consistency

    designing a twitter profile should reflect all social media channels

    Do you have social media channels already? Make sure that they are consistent throughout. Another words, make sure they all look the same from the Twitter account, to Google+, to Facebook, they all need to have the same style. In this image above can you tell instantly that this account is connected to the Twitter account previously mentioned? Nope, I don’t think so either, to rectify their problem they simply need to use their logo and possibly more white in their cover photo design. They are also missing a marketing opportunity to communicate something with text not just pictures.

    6. Contact details

    design a twitter profile design with contact details on it

    Lastly, but not least, I think it is quite vital to place your contact details on the Twitter background. Consider putting  your business telephone number, address and other urls that maybe point to your website, social media channels and anything else that you think is relevant.




    All things considered you can’t be good at absolutely everything and although Twitter do make it fairly straightforward to create your own Twitter profile sometimes getting a professional designer to create your imagery is better so that you can focus on the important parts of running your business efficiently whilst a designer develops your profiles in the background. If you need help with your social media profile designs I can help you with it, simply contact me using the contact page here, alternatively if you are a fellow designer is there any other points you consider when creating social media profiles?

      How to choose a colour scheme for your brand

      Creating a colour scheme for your brand should not be taken lightly, colour has a huge psychological power over its viewer than has been with us in nature from the beginning of time. It’s not simply saying ‘I want it to be yellow’, you need to consider what shade of yellow as a vivid bright yellow has a different feel, mood and meaning than a dark mustard yellow. Here is some basic information about the meaning of the main shades of colour.

      Continue “How to choose a colour scheme for your brand”

      What is Exactly HTML5 & CSS3

      If you ask any web designer then they will tell you that they are currently programming websites while keeping HTML5 and CSS3 in mind. It really is the way to go in this day and age. Just what are they though? Let’s take a closer look, shall we?

      Now, every single website is constructed from HTML and CSS code. There may be a few more programming technologies behind the site (PHP for example), but it is only HTML and CSS which has the capability of displaying information in your browser. JavaScript can do this to an extent, but it will still need to be used in conjunction with one of the other technologies.




      HTML is the technology behind the layout of the page. CSS is the technology behind the aesthetics. There is a degree of overlap which you will see if you learn the languages. However, if you are employing a Phoenix Web Designer to carry out the programming for you, you will not need to know about this in too much depth.

      Now, just like any programming language, HTML and CSS are regularly updated. New pieces are added into the code to make it far easier for them to create certain features. HTML5 is the 5th incarnation and CSS3 is the third incarnation. The idea is that these are the new standard. If you want your website to display properly in modern browsers then you will need to use both of these technologies.

      HTML5 and CSS3 are modern standards. They have been designed in such a way to be much cleaner code. This ensures that sites that utilize them are very fast to load. Some of the features found in these new technologies, HTML5 especially, replaces items on websites where you would normally need a special plugin to display them. Take Flash for example. With HTML5 this has pretty much been ruled old technology. You can do everything that you want to do in flash with HTML5, and it does it much more effectively without the need to install any plugins.

      Amongst the many features, both HTML5 and CSS3 have made it far easier to create websites that look fantastic on mobile devices. In fact, if coded well, you will have responsive design built in as standard to your site design. As mentioned before, HTML5 and CSS3 have ensured that old technologies with needed installation of plugins are now defunct. As a result, almost every website that follows HTML5 and CSS3 protocols should look fantastic on mobile devices. You are going to most likely need to wait until the mobile browsers are fully updated though.

      As you can see, this is a very brief guide to HTML5 and CSS3. Sadly it would take up a whole book to go into depth on these. However, I do hope that the information here is more than enough to give you a nudge in the right direction and start to understand why your web developer is going to utilize them in your site design.

      Author Bio: Kory Chesier is a professional blog writer, writes for HireaWiz a leading Phoenix web design specializing in custom web design, PHP development, Pay Per Click Marketing and SEO services.

       



      How to create gradients in css the easy way

      How to create gradients was always the domain of photo editing software and vector creating programs, but now with modern technology and css3 you can create gradients with some coding that is fairly easy to learn. This is a brief guide on what you need to know on how to create gradients in css.

      Where might I use gradients?

      Gradient code is most likely to be used in buttons and backgrounds of websites or navigational system but don’t restrict yourself to  just the common places that they are found, if you have a good idea for use of a gradient then go ahead and try it out, there are no limits to experimenting with code and creativity, the only limits to design is your imagination and maybe a bit of technical understanding.

      Selecting colours in the Hex code for your gradient

      When creating gradients it is useful to know the hex codes of colours. A hex code is short for hexadecimal numbers which are as follows : –

      0 1 2 3 4 5 6 7 8 9 A B C D E F

      0 being obsolete of colour ( or we know it as black ) and F is white. Combining a set of these numbers together in how monitors display colour ( RGB, Red , Green & Blue ) we can create over 16 million colours. I have shown below how numbers choose the intensity of each colour, it does help if you have a little understanding of how colours mix.

      #ffff00

      I have shown above that two numbers given in a 6 digit hex code make up a screen colour, so for instance the first two digits, ff equals maximum intensity red followed by two more ff’s which equates to maximum intensity green but I have finished this code with 00 in the blue which means there will be no blue displayed in this code.

      Do you know what colour this makes? If you are a painter you will think brown but actually we are not mixing paints here, we are mixing light together so the colour returned is in fact yellow! Watch this video below of RGB to see how light mixes, it’s quite insightful.

      If you want to select colour easily then w3schools have a colour picker on their website here or if you want to understand computer colour theory further please visit this informative link from htmlgoodies.com.

      how to create gradients in css

      I’m more a visual person, I want to be able to see the gradient

      The difference between coding a gradient and visually creating one via editing tools is great and sometimes a few numbers on a screen is a little hard to understand for the novice css coder or simply for the general human being, but there is a solution! Colorzilla.

      Colorzilla this is how to create gradients in css

      Colorzilla allows you to play with gradients till you are blue in the face, pardon the pun, till you find the perfect visual combination. Just like major photo/illustration editing tools you have oodles of options like adding more colour stops, selecting preset designs, the orientation of the gradient, opacity and other things you can find in major applications for editing visual elements.

      What is even better about Colorzilla is that once you have created your gradient

      the code is also generated so you can easily copy and paste the gradient code into your css style sheet for the relevant element of your site, it even applies webkits for browser compatibility! It’s a great tool but it is also important to understand the code rather than simply cutting and pasting. You can find many reasonable tutorial websites and I recommend spending at least an hour a day on advancing your skills, the thing with our profession is that it is ALWAYS evolving so it’s important that you don’t decay when new technology comes about.

      To play with the gradient website please follow the link below and secondly, please leave a link in the comment box below on how you have used gradients in your designs. Happy digital colouring in!

      Create your gradients with Colorzilla today

      Here is an alternative with fewer options

      Linear Gradients

      And finally, a gradient animator!

      Gradient Animator