Union Room Ltd | Web Design Newcastle, Web Design Newcastle upon Tyne

Trends in web design are hard to get away from, one minute we’re all web 2.0, the next we’re scrolling jQuery galleries and textured backgrounds. Lets take a look at some great trends implemented by web design agencies and freelancers on the web today.

Big text

I’ve always been a big fan of big text on websites, the bigger and bolder the better. With this in mind, it’s been great to see more and more websites using not just large titles but also large body text as well.

While the websites above showcase some nice big typography, it’s rare that you come across a website that has it pretty much bang on when it comes to typography. A great example of this is the personal portfolio of Kyle Steed…

I very love all aspects of a website, be it colours, type, content, layout, use of whitespace and so on, but I think Kyle Steed gets it all right. It’s also a very nice WordPress integration to boot.

Illustrations

While illustrations on the web aren’t particularly a new thing, they are becoming more prevalent in the actual designs of the sites themselves, rather than being used sparingly.

A great example of this fully blown approach is IndiFolio. The site uses gorgeous illustrations throughout and has some great multi-layered effects when navigating.

Some other websites use illustrations a little less in there designs but still use them to great effect.

Prevalent Blog Work

With blogging and social media in general becoming an important part of a web design agencies day to day activities, it’s no surprise to see agencies making blogs a more important part of their websites. Lets take a look at a few examples of web agencies putting their blogs front and centre.

We’ve also tried to make our web design blog more prevalent on our own site, putting the feed of our blog on our homepage. A lot of web design agencies are beginning to run a blog, even if it’s just information about what’s going on work-wise.

Individually designed pages / articles

This is a fairly new one, and a trend that’s causing a little bit of controversy in the community. Rather than having a set design and fitting the various content into that design, you design the page around the content.

The first real example I saw of this that I liked was Gregory Woods portfolio, using a new design and layout for each topic he chooses to speak about. Although this approach certainly isn’t for everyone, it’s a very refreshing approach to shaping design around content and will certainly have me checking back frequently for new updates.

Another website that uses this trend is Yaron Schoen:

Smashing Magazine also featured a blog post by Paddy Donnelly, which showcased the trend perfectly.

We haven’t covered every trend in here but hopefully we’ve gone some way to showcasing some trends in web design portfolios currently showing on the web. Think we’ve missed anything obvious? Let us know by commenting below…

View or Post Comments

After our ‘year in search‘ blog post a day or two ago, we thought it’d be interesting to see which of our blog posts have been the most popular with our readers.

We’ve tried to write a mix of content this year, mixing news about Union Room, news about web design, galleries, round-ups and the odd tutorial. Lets take a look at what’s been popular with our readers…

1. 21 Fonts That Shouldn’t Be Free…But Are! – 57, 328 pageviews

2. 10 Super Simple Web Designs – 12,003 pageviews

3. 15 new jQuery Plugins To Help You Conquer The Web – 8,040 pageviews

4. The Webs Best Designers and Their Favourite Fonts – 7,393 pageviews

5. 10 More Super Simple Web Designs – 6,383 pageviews

6. 10 Free Amazing Caligraphy Fonts – 5,355 pageviews

7. 7 New Free Fonts That You Should Definitely Download – 4,014 pageviews

8. 16 Beautiful Black & White Websites – 3,841 pageviews

9. 20 Eye Catching and Colourful Websites – 3,398 pageviews

10. 16 Innovative and Inventive Header Designs – 3,332 pageviews

As you can see, our free fonts blog post we posted back in July was extremely popular and really helped launch the blog. Even four months after publish, it remains to be our most popular blog post month to month by quite a distance. Since its publishing in July, the post has attracted over 5,000 pageviews every month.

We’re going to try and keep posting a great mix of content in 2010 with some larger articles as well as the usual roundups and Union Room news.

View or Post Comments

The explosion of social media in the last 18 months has many people questioning the future of SEO and search in general. So we thought we’d take a look at our analytic statistics over the last 12 months to see what the trends show.

At the start of the year we began to look at how we could use search engine optimisation and social media to our advantage, by meeting new people and increasing awareness of our website, blog and services. We went ahead and completed a full SEO project on our own site (keyword research, on and off-page optimisation, link building etc), opened a Twitter account and began writing articles.

Lets take a look at how our efforts have affected traffic to our website.

Over 60% of our traffic this year has been from referring sites:

1. Stumbleupon – 5,440 visits

2. Twitter.com – 4,966 visits

3. Delicious.com – 4,724 visits

4. Dzone.com – 4,278 visits

5. Design-newz.com – 3,528 visits

Although we submit all of our articles to social bookmarking sites like Stumbleupon, Delicious, Dzone etc you can see the effect this had on referring site traffic. pretty much all of this traffic is down to the content contained on our web design blog.

Although we weren’t running analytics on our website for all of last year, if you were to compare December 2008 with November 2009, we’ve seen over a 3000% difference increase in traffic (325 visits in December 2008, compared to 10,406 in November 2009 incase you were wondering).

So what about the search vs social media aspect of our traffic? It’s obviously hard to compare the two as social media can be very instant,.You write an article, post it on Twitter and submit it to a few sites and within 24 hours you could have a few hundred additional visitors to your site.  With search however, it’s very much a long term process which can take months for results.

We received over 11,000 visits from Google organically in 2009, over 9,000 of these visits were in the second half of the year which displays the long term growth of search engine traffic. The beauty of search is that in 2010, we could do very minimal work on the current SEO we have implemented and still achieve decent results, whereas with social media we would still need to maintain our blog, twitter account and bookmarking submissions to achieve the same stats we have this year.

With social media only getting bigger in 2010, it’ll be interesting to see what the end of year stats look like next year but we predict largely the same findings. Social media providing good traffic as long as we maintain our design blog and continue to meet people on twitter, with SEO providing the backbone for our main websites traffic.

View or Post Comments

Inspiration is a big thing for most designers and it can come in many forms. Some of us read books and magazines, some visit CSS galleries and others use image bookmarking services but here at Union Room, we love subscribing to and reading a number of great design blogs.

Spoon Graphics

Chris Spooner posts some fantastic tutorials and freebies over on his blog making it an invaluable source of design inspiration. He also runs another design blog Line25 which contains similar high quality content.

Selected posts:

20 Handy Photoshop Tips For a Faster Workflow

10 Solutions to Easily Create Your Online Portfolio

Create a Trendy Galactic Poster Design in Photoshop

Designm.ag

Designm.ag is a great, community-based design blog with a jobs board, news submission section and some great daily articles that range from web design to photography.

Selected posts:

Showcase of Big, Bold Typography

50 Clever, Creative Logos

15 Tips for Breaking in as a Part-Time Freelancer

Freelance Switch

Although obviously targeted towards freelancers, Freelance Switch has some great articles that can help improve the skills of designers in all kinds of employment. It also contains the fantastic Freelance Freedom web comics.

Selected posts:

Leveraging Your Blog to Promote Your Services

Are Freelancers a Commodity or a Profession

To Share or Not to Share, That is the Question

InstantShift

InstantShift posts some of the best roundup-type posts around and contains such a diverse range of content that it’s suitable for designers, developers and bloggers.

Selected posts:

Super-Clean and Minimal Web Designs: 70+ Stunning Examples and Resources

36 High-Quality Latest Free Fonts To Enhance Your Designs

50 Interviews of Popular Web Designers, Developers and Founders

Just Creative Design

Just Creative Design is ran by graphic, web and logo designer Jacob Cass and features a mix of Jacobs personal work as well as some some useful tutorials and articles.

Selected posts:

Why logo design is not $5.00

How much to charge for design work?

The Top 100 Best Fonts of All Time

Six Revisions

This blog is made up of some really original posts and has some good information for developers as well as designers.

Selected posts:

Best Relational Database Management System?

Color: The Next Limited Resource?

10 Free Server & Network Monitoring Tools that Kick Ass

Smashing Magazine

This one is obvious but this kind of list would look odd without a mention of Smashing Magazine. The blog has gone from strength to strength in the last couple of years and is home to some of the most unique and widely-referenced articles in the design community.

Selected posts:

The death of the boring blog post?

Designing “Coming Soon” Pages

Getting Started With Content Management Systems

Webdesigner Depot

As well as having one of the most unique designs of any design blog, Webdesigner Depot contains a really varied mix of content.

Selected posts:

To School or Not to School

Preparing and Planning for a Redesign

In Defense of The Jack of All Trades

You The Designer

Not mentioning the fantastic content, You The Designer features one of the best layout designs for any design blog on the internet. It uses large images and big titles to draw attention to posts and it’s understated colour scheme really help draw attention to posted content.

Selected posts:

30 Clever Coaster Designs

10 Major Technology Sites Then and Now

12 Water Inspired Web Designs

View or Post Comments

Back in February, Smashing Magazine announced they would be producing a book for release later in the year and asked readers for input on what they’d like to see in terms of content, layout and design.

Fast forward to the 5th of August and Smashing Magazine finally released details of the books contents, pricing and release date (which would change a couple of times due to a number of reasons).

A final newsletter was sent off on the 10th of October telling people who had pre-ordered the book the shipping date, the 23rd of November. Attached to that email was a PDF preview of the first chapter by Dmitry Fadeyev, User Interface Design in Modern Web Applications.

We thought, for those that weren’t aware of the book or hadn’t pre-ordered, it’d be interesting to give a little overview of the first chapter so you can gauge the quality of the content.

Firstly, the design of the book is just what you’d expect from a high-quality outfit like Smashing Magazine. Well spaced out typography, minimal but effective use of colour and well thought out use of images are prevalent throughout the chapter and make it very easy on the eye.

So, what about the content? Unsurprisingly it’s of a very high standard. The author breaks down the topic into several sections meaning the user is never far away from a new set of examples, giving the content a great flow which keeps the user reading.

One of my favourite sections is the ‘Use verbs as labels’ section, which explains why people using applications expect verbs as opposed to the standard ‘OK’ and ‘Cancel’.

It’s not too far away from the shipping date now and there are a few members of Union Room that are eagerly awaiting a small parcel dropping through their doors sometime next month. This small taster has done nothing to dampen the excitement in the office.

The book is priced at $23.90 for pre-orderers and $29.90 for those that wait until after the release. You can pre-order Smashing Book from the Smashing Magazine shop.

View or Post Comments

When designing and building a new website, SEO can be an afterthought for many and be seen as a waste of both effort and time as you race to get your site live for a tight deadline. However, building a website is the best time to implement SEO into a new website, as you can build in the easier elements of your SEO without a lot of additional work!

Let’s take a look at 5 easy ways to implement SEO into your new website launch…

Before I begin, this article obviously takes into account you’ve done the whole process of keyword research and analysis to come up with your final list of targeted keywords.

1. Keyword Use In Your Titles

If you’re company name is ‘Jones & Hall Toys Inc‘ then it’s tempting to simply insert that as your title for each page on the your site. This is fine as long as all you intend to be ranked for is your company name. But let’s say Jones & Hall Toys Inc specialise in selling a certain type of fluffy teddy, specifically large red teddy bears. Surely it would make more sense to use keyword terms and phrases that your potential customers will search for? Try inserting ‘Large Red Teddy Bears – Jones & Hall Toys Inc.‘ as your page title on that product page, and carry this trend throughout your site, using the product names as part of your page title.

Try inserting unique keywords into each page in your site, this will ensure your titles are set up for SEO from launch.

2. Keyword Use In Your H1, H2, H3…

Much like your titles, using keywords in your main headers can help benefit SEO. It’s also a relatively easy element to implement and can be integrated into your design. It’s considered a moderately important factor in ranking so try and be thorough when inserting your unique keywords into your headers.

3. HTML Document Names

Try and give your HTML documents SEO-friendly names, for example we name our search engine optimisation page with SEO in mind, so rather than using ‘seo.php‘ we use a keyword-related document name which gives us a little bit of a boost when it comes to SEO.

It’s very beneficial to do this before your site launches as once your site begins gathering links and being indexed by Google, it can be a very time consuming and rank-punishing process to reverse.

4. Unique Content

Using already existing or very similar content to that which has already been written, can really put you into Googles bad books. Google likes unique content, so much so that if you fill your website with lots of pages containing unique text and images, it will give you a great head start in your SEO campaign.  Not only that, but unique content will attract readers and increase the opportunity of gaining links to your website.

5. Make Your Site Standards Compliant

While making your site standards compliant wont suddenly rocket you to the top of the search rankings, making your site easy to crawl can help Google properly index your site in it’s records. Not doing so could put your site at risk of being indexed incorrectly or not indexed at all, which could have an adverse affect on your rankings.

You can check your HTML mark-up is valid by visiting the W3C validator and entering your URL into the system.

So there you have it, a very quick and easy list of things you can do to give your website a good start in the world of SEO. They wont automatically make you top of Google but they will give you a solid foundation which you can build upon in the future.

View or Post Comments

We recently got our hands on the tremendous ‘Five Simple Steps: A Practical Guide to Designing for the Web‘ by Mark Boulton and we were so impressed, we wanted to post a little review to recommend the book to people who may not have heard of it.

Although the book states it’s about about designing for the web, even Mark himself admits the ‘book is about graphic design practice as applied to the web.’ The book is useful for is for people who ‘want to learn the basics of graphic design and apply them to their web designs, producing more effective, polished, detailed and professional sites’.

The book has five main chapters:

1. Getting Started

2. Research and Ideas

3. Typography

4. Colour

5. Layout

Each chapter is broken down into smaller sections and really goes into detail about each topic, for example lets take a look at the Layout section.

The chapter begins with a look at composition, talking about the rule of thirds, looking room, and triangles.

Mark then goes on to speak about spatial relationships, white space and my favourite section grid systems.

Mark ends the section with a fantastic case study of his companies redesign of Flemish newspaper website De Standaard. This is such a detailed section containing info on the brief, project constraints, designing the grid and design of the site.

While this isn’t a particularly in-depth review, we felt compelled to write a recommendation for Marks book due to how much we enjoyed it.

You can purchase Five Simple Steps: A Practical Guide to Designing for the Web from www.fivesimplesteps.co.uk in both paperback and PDF editions.

View or Post Comments

A web portfolio is essential to any business or freelancer hoping to market their design skills, of course you can gain work by word of mouth but without a portfolio showcasing your work then you’re missing out on potential business.

There are, like all other types of sites, many ways to approach the style, layout and content of your portfolio but unlike other projects, this website is about you and your skills. Taking on your own website gives you, the designer, a unique chance to design for yourself and get across the message you want to.

Let’s take a look at some vital criteria that a successful portfolio website should have.

1. Be on message

If someone lands on your site, whether it be via a link or through Google, chances are they are looking for, or are interested in website design. However, don’t take this for granted as it’s still vital to make the websites message clear, stating what it’s for and the services you offer.

This has been a growing trend of late, with many designers opting for big, bold headers with a clear message on their skills, usually aiding the usability of the site at the same time.

While some may see this as statement overkill, it’s helping the user see what they can expect from the website straight from the off while at the same time, selling some additional services that you may not want to devote space to elsewhere on your portfolio.

2. Show your work

This may sound obvious but take a look through the freelance / portfolio section of cssmania.com and it’s surprising how many designers don’t display any work above the fold or on their first page. Many will argue that’s what the ‘portfolio’ or ‘my work’ section is for but never underestimate the laziness of the average web user in not clicking through to your inner pages.

Also, take into account your end user. Let’s say you’ve gone for a minimal approach for your portfolio, lots of white space and a neutral colour palette but some of your work contains websites with the complete opposite of this, with some of your sites being very content heavy with bright colour schemes. If a potential client loads up your homepage looking for the latter, they may leave your minimal page before even viewing a single piece of your work.

3. Show some personality

Not everyone likes to be informal with their portfolio, while there are no right and wrong ways for your approach I feel showing some personality goes a long way to standing out in the web design sector, especially for freelancers. Working with a freelancer gives the client different advantages to working with a big design agency, Freelance Switch recently wrote a great article for freelance clients, read it here.

Personality on a web page can be defined by many things, some see it as humour, some see it as colourful self-portraits, all of which go some way to adding that personal and unique touch to your website.

4. Be concise

In any website, it’s important to get across the websites main message over as quickly as possible, like we spoke about earlier. However it’s also important to keep the rest of your content sharp and to the point as well. This is perhaps why we are seeing a growing trend of one-page portfolio websites, giving quick and no-fuss content to the end user.

One of my favourite one-page web portfolios is the one by Victoria Mach. It has spaces for a large introduction,  sections for ‘about me’, her full portfolio, featured work, contact form as as spaces for her twitter feed, flickr feed and latest blog posts.

This may seem like a lot of information to cram into one page but when done well, it really does streamline the user experience.

While there a ton of other elements to a successful portfolio site (to name a few, be easy to contact and show diversity in your work) I believe I’ve listed some of the most important elements in what I believe to be a great portfolio website.

What about you? What do you think makes a great portfolio site? Let us know by dropping us a comment below.

View or Post Comments

Google is the king of search, there’s no denying that, but when it comes to new and innovative search engine features, Bing is doing pretty well.

Here are some of the most popular features of Microsofts new search engine.

1. Infinite Scrolling Images

The ability to scroll endlessly for images may seem an insignificant one but not having to click onto the next page for another batch of images could potentially save a lot of time.  Even if you were to scroll through 3 pages of images a day, that’s over 1000 clicks a year saved by infinite images!

2. Video Search preview

This one has caused a little bit of controversy in the web world, not just for potentially giving kids access to pornography, but for practically stealing some websites traffic.  Previewing a video could do away with the need to visit the hosting site altogether, which has inevitably enraged some website owners.

3. Prevalent Related Searches

Although this is a basic feature of Google’s, Bing takes it one step further with suggested related keywords for every search term and placing it right next to the first set of search results meaning users will see this right away.

4. Showing Similar Images

A great feature of Bing is the ‘Show Similar Images’ option on the image search page.  This feature gives you instant access to  images that resemble the one you choose, this stretches to similar body stance and colouring when testing it on images of people and can be used to search for particular types of images such as illustrations or maps.

5. Advanced Hotel and Airfare Searches

Although only available for those residing in the USA, Bing offer a great advanced flight and hotel service (mainly down to Microsoft purchasing Farecast in 2008).  This feature offers in-depth flight information and acts as Bings very own travel company microsite.

While the features above aren’t going to drag people away from Google in their thousands, they certainly are useful features as opposed to the mainly aesthetic ones on the new Yahoo homepage that we spoke about yesterday.

View or Post Comments

Having launched their popular web browser Chrome around 9 months ago, taking a supposed 30 million userbase with it, Google haven’t rested on their laurels and have today announced the news that they plan on releasing an operating system based around their popular web browser.

Obviously the operating system industry is a one very much dominated by Microsoft products (the windows family accounts for approximately 90% of OS usage at the time of writing) and they come into the operating system field just around the time Windows are planning the release of their own new OS, Windows 7.

Alongside Microsoft, people are beginning to adopt Linux as a stable platform and you also have the Mac platform growing in popularity.  With that in mind, let’s take a look at what a Google OS could bring to the OS community:

• Google says that operating systems we use today weren’t built with the web in mind, meaning we aren’t maximising the potential of the software we use everyday.
• Google Chrome OS will be open source, meaning that anyone can write and add applications as well as actually write to the OS itself (we can’t see Microsoft making it’s OS platform open source anytime soon).
• It will initially be aimed at netbooks, meaning it’ll be optimised to run on x86 and ARM chips, another advantage over current OS’s.
• The Chrome OS will concentrate on speed, simplicity and security and will be designed to have you on the web within seconds of starting up your machine.
• They are completely redesigning the security architecture of the OS “so that users don’t have to deal with viruses, malware and security updates. It should just work.“

As is usual with Google,  they don’t do things by halves and it seems that rather than releasing some kind of standard OS with a Google logo attached to it, they are trying to rethink the whole OS platform which can only be a good thing for it’s end users (and a bad thing for Microsoft?).

View or Post Comments

In another very confusing move from Microsoft, it has today emerged that they plan to use the archaic Word rendering engine for their new version of the email client Outlook 2010.

Designing and building for email is one of the hardest standards-based issues to solve, this is due to so many clients using different rendering engines.  Microsoft avoided using a browser to render HTML emails in Outlook 2007, instead using a word processor which forces designers and developers to use tables etc.

It seems however that the Outlook team don’t wish to move with the times and the first impressions of the beta of Outlook 2010 signal that the client is continuing to use the Word rendering engine for HTML emails.

Campaign Monitor have a little more information about this, including a response from Outlook product Dev Balasubramanian:

“The reason for this lies in the benefit Outlook users gain by having Word as their e-mail authoring tool; rich tools like SmartArt, automatic styles and templates, and other benefits found in Word 2007 and 2010 enable Outlook users to write professional looking and visually stunning messages.”

“I am aware of where this decision on our part places Outlook from a standards perspective – at the same time, we ask that you consider the benefits Outlook users get from having Word tools in their e-mail authoring experience.”

“Having multiple HTML engines could reduce performance, as well as create an inconsistency in terms of what type of content the user is able to create vs. consume.”

We’re not particularly sure where the problem lies with this one, Outlook should be using a browser to render emails almost certainly but it will use Internet Explorer which isn’t the most standards friendly of browsers to begin with.  Then you could argue that if it’s intent on using Word to render emails (incorrectly), then why not update the Word rendering engine to bring up to speed with HTML emails?

There are several ways to look at it but one thing’s certain, a client as widely used as the Outlook series, made by a company the size of Microsoft should not be using an old method of rendering emails like this.

View or Post Comments