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.
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”
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 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.
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.
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.
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.
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
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
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 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.
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.
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!
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
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
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
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?
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.
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 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.
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!
We use cookies on our website to give you the most relevant experience by remembering your preferences and repeat visits. By clicking “Accept All”, you consent to the use of ALL the cookies. However, you may visit "Cookie Settings" to provide a controlled consent.
This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necessary cookies are absolutely essential for the website to function properly. These cookies ensure basic functionalities and security features of the website, anonymously.
Cookie
Duration
Description
cookielawinfo-checkbox-analytics
11 months
This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
cookielawinfo-checkbox-functional
11 months
The cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checkbox-necessary
11 months
This cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
cookielawinfo-checkbox-others
11 months
This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
cookielawinfo-checkbox-performance
11 months
This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
viewed_cookie_policy
11 months
The cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.
Functional cookies help to perform certain functionalities like sharing the content of the website on social media platforms, collect feedbacks, and other third-party features.
Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.
Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics the number of visitors, bounce rate, traffic source, etc.
Advertisement cookies are used to provide visitors with relevant ads and marketing campaigns. These cookies track visitors across websites and collect information to provide customized ads.
