Archive for the ‘Design Crush’ Category

Design Crush – edition 18

Wednesday, November 18th, 2009

With the build up to the festive season already under way and many Christmas lights  being switched on in cities and towns all over the world, it is no wonder that lighting effects have crossed over to design and are playing a big part in current web design trends.

Lighting effects within web design come in a variety of different forms, from creating subtle shadows and dim glows that produce a peaceful tranquil mood to multi coloured and faceted light rays that give across an energetic mood. More and more websites are utilising these lighting effects to give websites a dimensional interest, coming away from flat designs that can often look bland and seem uninteresting.

Visually, employing light and shadow effects enables us to better understand and relate to what we see on screen by creating texture, aspect and perspective. Therefore we are able to make web pages appear more natural, existent and intuitive by utilising these effects which in turn makes the design  stand out on screen creating a true sense of depth, layers and realism.

These lighting effects can create interest to areas on a page that are seen to be more important. By highlighting specific aspects within a web page with lighting, you can subtly draw the viewers eye around the page, guiding them to the parts of information that you desire. Creating these prominent areas not only gives interest to the page but give the page a defined purpose.

With all these reasons and plenty more, it’s no wonder that lighting effects are playing a large role within web design at the moment. And we are sure that with the festive cheer set to continue it will only amplify this trend bringing light not just to streets and trees, but to web pages as well.

Below are some exquisite examples of lighting and shadow effects being employed within web design:

lighting1

lighting2

lighting3

lighting4

lighting5

lighting6

If you fancy trying your hand at creating lighting effects here are some resources:

16 Photoshop Light Effect Tutorials >

Creating Lighting Effects with Brushes >

30 Lighting Effect Photoshop Tutorials >

Design Crush – edition 17

Tuesday, October 13th, 2009

When you think of patterns, what is the first thing that comes into your mind? Many would think of the 70’s or Gran’s carpet, but patterns have made a huge comeback over the past few years, thanks to establishments like Ikea who promoted the use of bold colours within home furnishings. However, within web design, patterns are being used more readily; with faster download speeds and better file sizes with the use of vector graphics, patterns are being used more and more for background images within web design than ever before.

Patterns are now used often throughout web design. However, they usually go unnoticed, remaining in the background and enhancing the overall design (hopefully!). These background patterns are used to replace standard background colours, creating a more inviting atmosphere fitting the overall style of the site and boosting the branding and image of the company.

The reason why patterns are popular for background images within web design is because they are extremely versatile, creating a unique space and increasing the sites personality, setting it apart from others. Within the e-commerce sector, websites using patterns within their background can be seen often, but many other sectors choose to use patterns to add a touch of character to their sites too. Here are a few examples that we have come across:

It is easy to create completely different styles by utilising background patterns. Whatever look and feel you want to achieve with your website, from crafty and homely looks to ultra modern and sleek designs, patterns are so diverse enabling you to transform a relatively ordinary website into something a little less ordinary.

Here are a couple of great resources for downloading free patterns:

Squidfingers

Bgpatterns.com

Design Crush – edition 16

Thursday, September 24th, 2009

Back again with another instalment of Design Crush. This time we are talking about current colour trends. While web design has had a long history with colour it hasn’t always been pretty. In the years gone by, when websites were in their infancy it was common place to see cyan used throughout. But we are not here to discuss the past, we are here to discuss the present colour trends that are occurring within web design.

One recent colour trend that is cropping up throughout the web is the use of Autumn colours.  With this time of year descending upon us, it’s no wonder designers are turning to the autumn season for colour inspiration. According to Linda Chadbourne’s article for thewebsqueeze.com these autumn colours are not necessarily your typical browns and reds. There is an array of warm pinks, greys, blues and natural tones that are storming the web. Below are the top picks:

Here are a few examples of where some websites have successfully used these new autumn colours in their design:

Of course there is a lot more to be said about colour other than just being a trend. Colours can not only promote a certain feeling and atmosphere within a design but they can also make a website more (or less) user friendly. Colours are a major part of any website design and by using these new autumn colours, websites are sure to be fresh, warm and welcoming.

Check back soon to find out what other colour trends catch our attention, in our search for design inspiration.

Let us know what colour trends you are linking at the moment…

Design Crush – edition 15

Monday, September 7th, 2009

Arguably one of the most used and important elements of any website design is the menu or navigation. The main menu is where users refer to when they want to navigate through the website. Therefore good navigation has a lot to answer for when it comes to creating successful usability in a website. And creating a menu that is not only easy to use but that enhances the look and feel of your website is something that can make all the difference to the overall usability of the site.

Website menus come in all shapes and sizes, colours and designs making them an interesting focus for this edition of Design Crush. There are many options when designing a menu; colour can be used to differentiate between options, icons can be used to make the menu options more easily identifiable or unique roll-over elements can be employed to add interest. There are many techniques you can employ when designing a menu, and putting in that extra detail can really make all the difference to the website design as a whole.

Here are a few examples of successful menu designs that I have come across recently:

Employing these different techniques can make it easier for you website menu to be well constructed, easily used and intuative. A well designed menu can encourage users to look through the website while a badly designed menu can put users off completely. Giving your site a unique and personal menu will not only keep users on your site but will add that all important sparkle that can set it apart from all the rest.

Design Crush – edition 14

Thursday, August 13th, 2009

Recently we have been receiving CV’S for web designers and graphics designers looking for positions within 360. This got me thinking about how designers can make a company like 360 take notice and take action. While the CV is very important, in terms of the information that it holds, the portfolio is even more so. Why? Because it shows companies your style and skill set first hand and can be the making or breaking of a future job.

Designing and building your own portfolio site would be the best way to get your work from your head to your potential employment. However if you don’t have your own site to house all your unique work, then don’t worry. There are plenty of resources available to you that still let you have an effective online presence. Online portfolio sites like the examples below would be a good place to start.

While thinking about all this, I decided to write down a few tips that may help any budding designers figure out what to include and what not to include in their portfolio.

Tip 1 Define the purpose of your portfolio. What do you want your portfolio to achieve? Portfolios can be used for many things including selling your services, promoting your services, getting a job, building a reputation and networking.

Tip 2 Whatever you want your portfolio to do, make sure you get the message across crystal clear. Targeting your portfolio to your intended audience is important to make it more effective and achieve your  desired outcome.

Tip 3 When deciding what to include in your portfolio make sure you don’t put any old rubbish in. Only include your best work. Remember its quality not quantity.

Tip 4 One of the most important tips is to make it different. Your portfolio is an expression of your work therefore it should be totally unique and should be able to make a statement of who you are a designer.

Tip 5 And finally, with all portfolios, keep it up to date. Its amazing how over time, work can look dated and can make a portfolio (including mine) look less than impressive. So whenever you have completed a new project and its worthy of showcasing your talents, stick it into your portfolio.

Design Crush – edition 13

Wednesday, July 29th, 2009

It’s been a while since the last Design Crush, what with summer holidays and a busy work load getting in the way. But here we are again, and this week it’s all about minimalism. Minimalism can be described as a “design style that emphasizes simplicity and the removal of superfluous elements in one’s own work” – Wikipedia. It is a type of design that can be achieved throughout many different types of media and can be a very effective way of presenting an idea.  And with web design, it is no different:

“Minimalist web design relies on subtraction and the preservation of empty space.”
— Tokujin Yoshioka

When designing for the web, taking advantage of the use of white space can often be challenging due to the commonly large amount of information that has to be included within a relatively limited space. But when white space is employed properly, you can often create a sense of mystery that makes people want to know more about your website.

The key element of minimalist design that makes it successful is being able to cut out all the padding and unnecessary bumph and being left with the fundamental information. This makes minimalistic websites more succinct and to the point providing your users with the most important information . Moreover, it can be considered quite a talent to create an attractive website design with a limited amount of resources.

Minimalism in web design can create a statement and can clearly and effectively communicate the core idea or ethos of the website. With less clutter and useless information supplied, it means that visitors will spend more time focussing on the vital information. So the next time you are designing or getting a website design, think to yourself “do I really need to include that?”

Here are some examples of web design that use minimalism to produce successful websites:

For more examples of minimalism in web design visit Minimal Exhibit

Design Crush – edition 12

Wednesday, July 8th, 2009

To create a successful website the design is highly important in order to achieve the primary goals of the site; commonly being to communicate brand awareness, target their specific market, increase sales or enquires and lastly to give the company an online identity. However, for successful web design to be able to fulfil all of these goals there needs to be something else added into the mix, this being SEO (Search Engine Optimisation).

Many web designers forget about the importance of creating a site that is not only designed well but is also able to have the best chance of being found in the search engines. With the internet advancing all the time, web design must keep up with the new demands. One of the biggest demands is having a site that performs well in terms of search engine rankings to make sure that it is received by its audience.

So how can web designers create searchable designs? With a few easy and often underestimated tricks, a website can have a much greater chance of being found online. Here are a few tips that web designers should take into consideration while designing a site:

Headers – Headers of pages should always be text. Many designers use images for headers which does not allow search engine to read the text making it detrimental to the sites rankings. These text headers should be bold and descriptive.

Title tags - Often it can be seen that a title tag of a web page includes the company name and thats about it. But in order for search engines to know what the page is about, these title tags should be optimised to include keywords that describe what the page is about. They should also try to create a call to action.

Description Meta tags - Like the title tags, this too should be a detailed description of the content of the page , including keywords to accurately describe it.

Alt tags - These tags describe images that are on web pages and should be used to include descriptive keywords that keep in line with what the page is about, to amplify its meaning and therefore look more authoritative to the search engines.

Content - When designing sites, content is one of the elements that if lacking, then the ’searchablility’ of the site really suffers. Search engines like to see lots of keyword rich unique content to make the site look informative and useful, so when designing a site, make sure you include content, content, content.

Creating Call to Action - The design of the website should be able to create a clear call to action in order to achieve the aims of the site, whether it is to sell products or services, or to promote them. Either way, website design should be able a successful create this call to action.

Usability - Web design is all about usability so it’s no surprise that its getting a mention here. Usability is something that is important to make the site easy to use, creating a pleasant user experience that will encourage people to use the site and help with its online success.

Make it social - These days it’s important to give a site a social aspect. By including the company’s social networks on its website it boosts their online identity and makes it much easier to create a buzz, promote and increase awareness of the brand.

Analytics - Adding Google Analytics onto a site is not only easy, simple pasting in code supplyed by Google,  but iot also allows you to see how the site is performing, such as the amount of traffic to the site, what keywords the site is being found for, making it easy to see what the sites disadvantages are and improving on them.

All of these tips may not be suitable for every site but they should be considered when designing a site to ensure that your design is not only seen and used by the company and its current customers, but seen by new and potential online customers too. Getting these SEO tips right in the first instance, at the design stage, overall ensures the site more online success.

Design Crush – edition 11

Tuesday, June 30th, 2009

Once upon a time, web design was just boxes and text with a few ugly hyperlinks splashed about creating highly functional but fairly uninteresting and unattractive sites. These were the dark ages, and now more and more inspiration for web design comes from everyday objects. A trend that has been occuring for a while and looks like it’s here to stay is using everyday tactile objects and surfaces and recreating them online. But this isn’t a completely brand new idea; from using images of folders to save files to and naming a computer ‘desktop’, there has always been an association with computers and traditional objects.

Imitating natural materials for backgrounds is becoming a popular design trend. Some sites have been using wood and paper to give a comfortable and familiar feel. The use of tactile material can also give a site a retro feel that breaks the mould from the usual sites we so often come across.

Replicating everyday objects like desktops, scrapbooks and pin boards are popular within web design to create fun, friendly and quirky layouts. This style however, looks easier to create than it actually is and requires a large amount of talent and time. Get it wrong and it can easily look unprofessional and outdated, get it right and you create an enviroment in which your users can explore and enjoy.

Here are some good examples of using everyday objects and surfaces to create successful web design:

Design Crush – edition 10

Monday, June 15th, 2009

Blogs play a major role within the web; gone are the days where blogs were just for the normal individual who wanted to write whatever was on their mind. Most companies not only have a website but now utilise blogs too. More and more corporate companies from all sectors of business are utilising blogs to not only advertise their products or services, but to give their brand a voice. And with this surge of new blogs, came new design challenges.

Designing for blogs is not just about using the thousands of free templates that are so readily available or just sticking a colourful header graphic at the top. Blog design is about creating a solid visual structure, with a thoughtful hierarchy of content elements and should be able to connect the content of the site to the presentation.

For this to be achieved, you need to think about accuracy, simplicity and a good use of typography and illustration. Because blogs are content based, mostly being text, getting the typography right is the most important element of blog design.

There is a large difference between corporate blogs and personal blogs. With corporate blogs, they are often made to look the same, if not very similar to the main website. This allows them to tie into the main corporate identity to amplify the company’s personality. Good examples of company blogs can be seen from Econsultancy.com and Topshop.co.uk

However, personal blogs take a slightly different design slant, with many designs using slightly more adventurous styles to create attention-grabbing and unique identities online. Because of the nature of blogs, being that they are an expression of someone’s thoughts, likes and dislikes the designs often reflect this and become a very personal thing. Good examples of personal blog design can be seen from ilovetypography.com and bubblessoc.net

Overall, blog design relies heavily on how the content and text is structured and treated and for what purpose the blog is being used for, whether it is part of a company’s website or a standalone blog.

Design Crush – edition 9

Friday, June 5th, 2009

This week’s design crush is all about button and icons. Most of the time people click on buttons and don’t take much notice of them, but a well design icon can not only give a site a more professional and sleek look, but it can also encourage users to select the button and give your site that all important personality.

Icon design is tricky, with such a small area to play with, it can often be hard to design a successful icon. It’s all about the details. With icons, there should almost certainly be simplistic detail used; only the necessary details should be included to allow your button to be easily understood. And the more it stands out the more chance you have of people selecting it. RSS feed icons are a popular button to be redesigned to try to attract people to sign up to the blog feed. Here are some examples for you to have a ponder over:


Why would you spend hours of your time designing a new icon instead of using a standard one? The answer is personality. If you want your website and company brand to pack a bit more punch online, having unique elements in your site is sure to deliver. And there no easier way of doing this than having unique buttons and icons. But if you’re not up for designing one yourself, there are many websites where you can download more unusual looking icons to give your site that little twist.

Resources:

Make your own RSS button

Download RSS icons

Design Crush – edition 8

Friday, May 22nd, 2009

Web design can be inspired from almost anything, which is what makes designing for the web so diverse. However, an area of inspiration for many web design layouts is from the traditional print, mainly magazine design.

Many elements of web design have be derived from traditional magazine print from using headers, and margins to employing columns to layout and organise content and body text. The main reason that using magazine layout for web design works is that it allows you to cram as much information as needed into a relatively small space. By using magazine layouts, you can optimise the space on the page and make the presentation of information that little bit more user friendly.

A good example of using this method of magazine design elements in web design is the Cannes Film Festival website. Here they have cleverly used a grid structure layout to neatly show images and videos of the entire goings on in Cannes throughout the festival. With updates every day, this site had the potential to become busy and crowded, but by using a 3 column grid like structure, they have successfully pulled the information together in an attractive and user friendly way.

Another example of a website mimicking magazine design is The Loop website, an online arts and culture magazine. This site is clearly inspired by traditional print with the use of columns, margins, headers, footers and white space, creating a light, easy to follow design that is not only pleasing on the eye, but functional and efficient.

Design Crush – edition 7

Friday, May 8th, 2009

Designing for the web has to encompass many factors; not only does it have to serve a purpose for a company, it also has to consider the users behaviour. As many web designers know, the top left area of a website is where most users eyes travel to when looking at a website. Therefore this part of the site is tremendously important to communicate the websites message to the users. By using this area of a web page to put a company’s massage across to the users, it increases the chances of them seeing it.

Many designers are now employing this design technique when designing sites, to capture the companies branding and messaging allowing it to be the main focus of the web page. Large and legible typography is used to translate company slogans or introductions to the site’s users. To make this text area stand out even more, they usually take up a large proportion of the site. For design companies and corporate companies where company massaging and branding is vitally important to their success, these introduction blocks are a great way for the company to tell its users why they are different from their competition.

Here a 360innovate we practice what we preach and have used this design technique in our newly designed sister site ‘Online Media Branding‘. Here we have used it to put across the companies ethos clearly to the users. Not only does this introduction block make the page eye-catching, but it draws users in and encourages them to have a look around the site. And of course it gave us a chance to boast a little!

Design Crush – edition 6

Friday, April 24th, 2009

Since spring has sprung and as the better weather settles in (much to our delight), here at 360innovate we have come over all green. For this weeks Design Crush, we wanted to talk about using nature in graphics and design that can really transform a flat standard website into something that is full of life and personality.

There are many design trends out there, some come and go, other stick around for a while, and one that always seems to re-surface is the use of nature as inspiration for web design. There are more and more sites out there recognising that with a few clever uses of imagery inspired by nature, you can transform a site and bring it to life. Using shapes derived from nature such as plants and flowers to any type of natural element can transform a rather simple site design into a world of its own, giving it real character and interest. And the best thing about using nature in design is that you have so many options making it very easy to create something that is totally unique to your site. So its easy to bring life into web design using nature as inspiration.

Here are some good examples of how to use nature in web design:

Design Crush – edition 5

Thursday, April 9th, 2009

For our 5th installment of all things nice in the world of design, we wanted to talk about how a website can use design to promote more usability and to actually convert visitors into sales or lead generation. Many people get so caught up in design, they forget the basic function of the website. The primary purpose of a site is to try to create custom for the business. However, there is a fine line between the design of a site and the call to action.

A call to action is a simple marketing tool in which design is implemented to direct visitors to a specific or desired action. With web design this can be often seen where people are directed to form fill-ins and contact pages. With many online retail websites using call to action to attract customers to buy their products it can be the difference between more sales or less. A clear and eye catching call to action in an optimal part of the web page can make all the difference.

Good examples of successful call to actions can often be seen from charity websites. These website heavily rely on call to actions to promote donations from their visitors. Most have very striking call to actions that are well deigned to entice people to donate. An example of this can be seen from the Scottish SPCA website. Here there is a donation button that is obvious and clear to users while not being too in your face which can be off putting.

However, getting the call to action just right can be easier said than done. Another example of a charity website that could have a slightly improved call to action is Children 1st. Here, the donations button is at the top of the page where many people may glance over. Also the size and colour could be changed to make it stand out. So this site could benefit from re-thinking the position, size and colour of their call to action to attract more visitors to the sites desired function.

If you need help with your websites call to action, then get in touch!