Being someone who is probably a little more more obsessed with typography than most a couple of great HTML5 sites have appeared recently that have caused just a little friendly competition in the studio.

This kerning game is not only infuriatingly addictive but a great demonstration of what’s now possible in HTML5 using the latest web browsers such as Chrome, Firefox, Safari and also multitouch devices such as tablets and smart phones.

Instructions
Your mission is simple: achieve pleasant and readable text by distributing the space between letters. Typographers call this activity kerning. Your solution will be compared to typographer’s solution, and you will be given a score depending on how close you nailed it. Good luck!

The studio best score is 95% so do let us know if anyones beats it as you’re obviously a typographic genius.

As well as the kerning game there is another challenge based around the shape and form of characters where you have to complete the letter shapes concerned. Again, wonderfully addictive and provides a real insight into how type foundries and type designers really have such an amazing eye for detail to craft the multitude of typefaces that designers are able to use in their work.

VGroup were approached by an energetic business start up, who wanted a professional brand identity and website for their new venture. TransWorldCom are an independent voice, data, mobile and IT company with a wealth of experience, but they recognised the importance of a strong brand to help give them an edge in a highly competitive market.

It was agreed that our client should use the acronym TWC as the top level brand name, with TransWorldCom underpinning it and making up the website domain name www.transworldcom.com

The logotype emerged as a bold and confident rendering of the characters in a customised font with the introduction of a circular, fluid symbol juxtaposed with the ‘T’. The primary palette was selected to be a dark purple complimented by a fresh and vibrant warm yellow. As intended the overall feel of the identity is progressive and technology led.

It was important that TWC’s 4 core products and services (voice, data, mobile and IT) were promoted as the focus of the identity and the website; It was decided that each would have it’s own ‘mini identity’ so we designed a set of graphic icons which emulated the structured yet fluid style of the logo.

The four symbols are unified on the homepage of the site, and used alone, in an abstract way on their respective dedicated pages within the site.

The website was developed using Couch CMS, which has a simple end user interface. It is also flexible enough that when scoping the site we realised that there were items such a blog and the social media links that the client required in the future – but at this stage can be hidden by checking a box until the company are ready to use them fully.

www.transworldcom.com

What they say:

“We chose VGroup after the careful consideration and review of a significant number of branding and design agencies. Being so involved with technology we needed to choose the right partner in this field and VGroup immediately stood out as being highly competent, honest, professional and knowledgeable in its field. Despite looking at other leading agencies they were always the ones we wanted to work with.

This decision has been vindicated throughout the various stages of the project as they have been a pleasure to work with. They have communicated and advised us well taking on board any comments we made; delivering a fantastic, class leading and exciting website. Thank you to all at VGroup involved in the project for TransWorldCom (TWC).”

To mark the 10th Anniversary of Investance, a global management consulting firm dedicated to the financial services industry, VGroup has created a new logo, visual identity and website as part of a new brand communications strategy to raise awareness of their specialist capabilities. With over 70 clients in 10 countries and 300 employees in France, North America, The Netherlands, Hong Kong, Singapore, India and the UK, Investance now has an exciting brand platform from which to drive its phenomenal growth.

With revenues increasing at an average of 45% year-on-year and faced with an increasingly competitive environment for consulting services, competition for talented people and the need to increase their visibility in key markets, Investance recognised the need to improve their brand communications.

With an understanding that business branding is built around perceptions in the minds of audiences, a review was undertaken of Investance’s brand values, core proposition, messaging and tagline before agreeing the direction for the identity and communications. Clarity and emphasise was brought to their range and quality of services, so clients could achieve significant improvements in business performance.

One of the challenges was that the Investance brand assets were only relatively recently introduced and therefore they were looking for evolution, not revolution of the brand identity. Their new logo, vibrant colour palette, dynamic and bespoke illustrations now creates a visual identity that is confident and evokes leadership. A forward thinking identity that makes Investance stand out from its competitors with its fresh, modern hand drawn typeface, their new symbol becomes a guiding light, a beacon, defining Investance as a forward thinking company that provides direction and help for clients.

As part of this process The Investance Institute, the research, training and business events arm of the Investance Group, was also rebranded. The Institute was established in 2002 to act as a think tank to help clients predict and prepare for change and to provide a platform for the dynamic sharing of knowledge through publications, training courses and seminars.

The rebrand was applied to every aspect of marketing communications from stationery, literature and white papers, to Word and PPT templates, promotional items, signage and a comprehensive set of illustrations.

One of the most important requirements was a complete overhaul of their website. We helped review the site architecture, functionality and specification of the dual language site. The result is a stunning new website with full CMS capabilities, allowing the marketing team to update content and publish documents and news: http://www.investance.com

The new brand was launched to Investance employees at their head office in Paris, where specially personalised hand-outs were presented to staff along with some fun promotional items.

“We are absolutely delighted with the results. The work that VGroup did to take our ideas and push them to the next level were fantastic. They went beyond the brief and made suggestions for how we could try different things with real impact. We know this is just the beginning of a new era in brand communications for Investance but with the help of the team at VGroup until now and in the future I am confident we will achieve our objectives”.

Simon Drury
Global Head of Marketing, Investance

Responsive Web Design is the term given to an approach to design and development where a site should respond to the environment it’s being viewed upon. This in turn means responding to the user’s screen size, viewing platform and orientation.

To try and clarify the above let me set out a scenario of how a user may interact with a website over a period of time. Firstly someone may browse a website at work on their desktop/laptop, then while travelling may visit the same website on their smart phone and then later that evening maybe visit it again on a iPad.

So there we have a set of varying devices to think about, each with its own intricacies. The desktop computer may have one of the many popular web browsers; Firefox, Chrome, Internet Explorer (not to mention any of the multiple versions of each), Smartphones have different operating systems and mobile browsers and the same again with tablet computers. Confusing as it may be this is becoming a real aspect of designing for the digital realm.

Often clients ask about having an ‘iPhone’ version of their site which is fine given the amount of people who actually own such an Apple device but where should they stop? Creating specific versions of a website for multiple platforms/resolutions would be impractical, there is hardly time to keep up with the march of technological development let alone researching the intricacies of each device/platform to design a site specific to it.

For years web designers and developers have been used to creating their pixel perfect web designs in specific resolutions and testing them so they work and look amazing with the multitude of desktop based web browsers (leaving IE6 out of the equation) and have become very good at it. Now, mobile browsing is growing at an astonishing rate and bringing with it another set of considerations.

So do you really know how your audience will engage with your website? Right now you could check your website in over 100 different configurations and still not be done so the answer is probably no.

Obviously in context certain businesses know their target audience and can safely create a great website that works on a desktop computer and works well enough on mobile platforms but could responsive website design be an answer to the ever changing landscape of web design?

Building one responsive website could eliminate the need for multiple design and development phases for each new gadget that comes onto the market.

An example of responsive web design is shown below. The 8faces website responds to the device the you are browsing on displays a version of the site to suit, therefore enhancing the users experience of the site on their particular platform. The website designs go through a reductive process, removing imagery, etc to display content at a more legible size on devices with smaller screens thus serving up the information the user needs and nothing else.

So in conclusion I think websites need to become more responsive and therefore so should digital designers, after all technology will continue to develop ever faster and we need to adapt to how the relevant audiences are consuming media and deliver a greater user experience whatever it’s consumed on.

Founded in 2005, LOC Consulting (LOC) is a management consultancy firm which specialises in implementing complex business change and technology projects for the private and public sectors. In the past three years sales have grown 77% a year and 2010 turnover was £10m. In 2010 LOC were awarded 40th place in the Sunday Times Fast Track top 100, the only management consultancy firm to be listed.

Their brand and website design have remained static for the past four years and they felt that as the company was growing now was the time to rebrand and enhance their image and marketing communications. Following a four way pitch in March 2011, VGroup was awarded the contract to rebrand LOC and to roll-out the new brand across all their communications.

Three months later, we’re pleased to say the project has been a great success and as Elinor Fentem, Managing Consultant comments..

“Massive thanks to you and all at VGroup for your excellent work on this. I can see it [the website] in Antwerp and it looks great :) Everyone at LOC is very excited about our brand refresh and the website really is the central platform to launch this to the wider world & is definitely now a platform we can be very proud of and represents LOC perfectly… I for one love it – it is fresh, dynamic yet professional and is certainly light years away from what we had.”

Well, what they did have certainly didn’t reflect an organisation that had achieved such dynamic growth with proven capabilities. Their brief was to:

• reinvigorate their current image to keep the LOC brand fresh but without losing any of the key attributes or differentiators
• fortify the brand and ensure consistency across all marketing lines
• forge a more recognisable master brand with all components aligned
• have a brand which allowed for future evolution
• gain greater control of their website to enable frequent editorial updates to be made as and when required by resources within LOC
• ensure that the brand refresh did not conflict/constrain future web changes/updates

OLD LOGO

NEW LOGO

SUB-BRANDS

As we keep saying, “a brand is not simply a logo”. We looked at all aspects of their business culture and positioning – with the aim of capturing their personality and differentiators to ensure the business presented itself in a way that would attract and inspire clients, partners, employees and suppliers. We challenged LOC’s strapline “Unlocking your business potential” and simplified it to “Unlocking Business Potential”.

LOC has successfully delivered a range of programmes and projects with passion, integrity, innovation and flair, and throughout this growth they have retained the original vision and value set of the firm. Their new brand re-affirms their commitment to their clients and values and it reflects what makes them unique. It is also a consistent reminder as to who they are and what they do – both visually and culturally

The alignment of their brand identity across print and digital media was an essential requirement of the project and as an integrated agency, something we are set up to deliver . From stationery and flyers to presentations and website, we created a dynamic and fresh visual identity using cross-media typography, an inspiring colour palette and distinctive, photographic imagery. Here’s how it all came together:

WEBSITE // locconsulting.co.uk

FOLDER // FRONT

FOLDER // OPEN

FLYERS // SERVICES

FLYERS // PRODUCTS

We are now finalising their Brand Style Guide which will provide guidelines to help their employees and suppliers manage the design and production of their branded communications in the future.

If you run a professional services business, VGroup have specialist expertise and understanding of B2B branding and design, so give us a call on 020 7734 8855 to discuss what makes you special and how we can help communicate that most effectively to your audiences.

www.locconsulting.co.uk

The web is ever evolving and so it’s our job as designers to evolve with it. Web-fonts have been a revelation in this respect – when it comes to maintaining a brand’s integrity online the possibilities have really opened up.

I wrote an article back in August 2009 about the future of web typography and as you can imagine things have progressed a long way since then. At that point web-fonts were a shiny new tool in the web designer/developers arsenal, but fast-forward 18 months they have essentially changed the way we are now designing for the web. No longer are we shackled to the few ‘web safe’ fonts available to everyone or having to create static graphic images of typography… a situation that every designer has been waiting for, for a long time.

All over the web you will now see examples of websites using web-font technology, from the likes of Nike whose site http://www.nikebetterworld.com/ makes extensive use of multiple font styles throughout its clever vertical scrolling site, to Microsoft’s site http://lostworldsfairs.com/ which is a showcase for the Web Open Font Format WOFF features of Internet Explorer 9. Web-fonts now even have their own awards so things are certainly progressing in a very positive way. http://www.webfontawards.com/

We’ve recently launched a site for our client CNC Ltd where we took full advantage of web-font technology to create a really strong typographic based website presence. With consumers now interacting with brands through multiple media channels on a daily basis, we are now able to use distinctive typography in both online and offline environments which ultimately is a great thing for brand flexibility.

With services like Font Deck, TypeKit, and WebType being used more and more it can only be a good thing for designers and clients alike. Long live the web-font revolution!

We have just launched the new website for Fox & Rose, an online luxury lingerie retailer specialising in hand picked collections from predominantly British designers. With the brand and packaging wrapped up, the website was obviously the crucial platform for Fox & Rose to launch the brand to the public.

But this site isn’t just a pretty face, it also has some rather powerful functions too. Firstly, to make product finding easier and more interesting, users can shop by item, size, designer or even by personality (Fox – playful, teasing, spirited, seductive or Rose – elegant, beautiful, delicate, intriguing.)

As lingerie can be quite difficult to display we decided the most effective way to show the product off would be to photograph the items in a number of ways. The items were first shot on a light box to highlight the detail of the pieces. We then captured video footage of the model walking as well as static shots of the model from different angles, enabling the user to see the product and materials to full effect. There is also a zoom function, allowing the intricate details and materials of the items to be seen close up.

The site is supported with an informative blog and member’s club which really highlights the passion Fox and Rose have for fashion-led lingerie. A Designer Spotlight section also provides further information on each designer, the collections and why they had been picked for inclusion, emphasising exclusivity.

The Fox and Rose website offers a one page checkout, with dynamic sections, allowing you to amend and check details easily without irritating back and forward buttons or loss of information!

Once you have ordered your items, they are delivered, wrapped in bespoke tissue paper and sealed inside a gorgeous gift box, finished with gross grain ribbon. Packaging as beautiful as the exquisite lingerie inside.

We are really pleased with the result and already the site is getting some excellent media coverage:

‘I thought you’d like to hear some feedback from the Telegraph’s fashion editor who spoke today about Fox & Rose; “It’s absolutely exquisite. One of the nicest retail websites I’ve seen in a long time and the best presentation of lingerie I’ve ever seen on a site. Amazing. Congratulations on a wonderful job.” I wanted to pass this on to you, and to say thanks to you all at VGroup for a great job done on our branding and website.’ Amanda, Director Fox & Rose

You can read more about the creation of the brand here or to see the website for yourself visit www.foxandrose.com.

As an Ecology and Civil Engineering company and the UK’s largest producer of native wetland plants, Salix offer a multitude of products and services which needed categorising and organising into a new clear user-friendly site.

With bioengineering being a rather technical subject, many potential clients may not know exactly what they are looking for when they arrive at Salix’s website.

Our first task was to analyse their current site which had a large quantity of content. We then produced wireframes (site layout plans) to help digest and organise the information.

We quickly realised that the core function of the site was to display Salix’s many products and projects in a way that users could easily and quickly find what they were looking for. A prominent dropdown panel menu dedicated to this one function was located at the top of the page, and the remaining items usually found on a navigation taking a secondary position.

As both Products and Projects refer to each other, these areas are cross-linked across the entire site so that users can find out more information on an individual product from a specific project they are looking at. Alternatively, they are able to see an example of a product as a solution to a project. More information is available with technical specification sheet downloads or links to other case studies where the same products or techniques are used. These are shown in clear information panels on the side.

As many of Salix’s projects and systems take time to establish themselves, light box galleries of projects at various stages of development are used which dramatically showcases the difference that Salix’s work makes.

Design wise we have brought Salix on in leaps and bounds, with a much brighter colour palette and a clearer and more considered delivery of information. The website also adopts the strong graphic illustration style and brand identity that will appear across future printed collateral − something we’ll be working on in the next phase of their brand refresh.

Do we still need a ‘home’ link in the top-level navigation? It is a long established custom to have a link to a website’s homepage included in the top-level navigation, but why do we do this? Is it really a good idea? And can a website work with a home link in the top-level navigation?

A number of websites have been doing away with the traditional ‘home’ link in their top-level navigation. A couple of examples include apple.com, johnlewis.com and facebook.com all lack a link saying ’home’ in the top navigation. So where did the home link go? And how do you get home in sites that lack a ‘home button’? Well, it is a fairly well established convention that clicking on the logo takes you back to the website’s homepage, and many sites rely on this to let users navigate back to the home page. Other sites use a breadcrumb, which is typically a horizontal line of text providing links back up through levels of the site up to the home page. Breadcrumbs typically look a bit like this:

Home page / Section page / Subsection page

The John Lewis site is a good example of how breadcrumbs work.

You could argue that having a ‘home’ link on the home page doesn’t make much sense. Imagine you’re driving down a road, let’s say it’s the M4 motorway, and there is a signpost for the M4, next junction. But you’re on the M4. Pretty confusing. Who wants to go to a page they’re already on? But in real terms, I don’t think this confuses many people.

Others websites, including www.bbc.co.uk, lastminute.com, myspace.com and vgroup.com have kept home link in the top-level navigation. On these sites users have the same set of top-level navigation available wherever in the site they are. Considering a large proportion of users arriving at a website will not be arriving on the home page, perhaps it makes sense to have this link in the top-level navigation.

Certainly the last few sites I have designed have had a home button in the top-level navigation, but I think it’s worth considering whether it is really necessary.

So with one final push our new website has now made it’s way into the World (Wide Web). Creating it has certainly been both painful and rewarding but like doting parents we’re very proud of our new baby. It’s been many months in the making and although we may be slightly biased, we think it has a few cute features to coo over. We certainly have high hopes for its future.

As most designers will tell you, creating your own website is possibly the best and worst project you can do. It’s great because you are on the other side of the fence, you are the client, you have a clean slate to work from and only your creativity limits you. Sounds ideal doesn’t it? Or does it?

Our current website had been online since we launched VGROUP in late 2007, and as we know in web technology development terms, that’s a very long time. Things move on at such a pace that we decided a refresh was in order. Diagnosing our old website meant we learnt some valuable lessons and took these forward into the concepts for the new site.

A website is a powerful tool in marketing and awareness terms; it’s where many clients get their first impressions of us and our services, so creating an impact is essential. We wanted to make our specialist services clear and also make a lot more of all the great work we’ve done for clients both past and present. With these points in mind we worked on the information architecture to ensure everything had its place and would provide our audience a highly usable experience. We created a clear grid based layout that was easy to navigate and gave us the ability to show off our projects to their fullest.

Extensive case studies
As a promotional tool for us the new site allows us to send links to featured projects directly to prospects where they are able to read a brief overview of the project, view a series of images summarising the project and also, where available, download a full in-depth PDF case study for further reference. Alongside the visual aspects of the site, what happens under the skin is also completely new. When analysing how we wanted the site to work for us, we knew that basing the site on our in-house Content Management System V:CMS would give us all the flexibility that we needed.

Incredible editability
V:CMS was developed because we felt that most CMS systems seemed very bloated with features that most people would never need. We decided to develop a system that was flexible enough to give clients the features they needed, but was also intuitive to use. The administration area is clean, simple and ultimately usable. After all making routine updates to your website should be a simple task, and with V:CMS it is!

Super search optimisation
As with any website presence, Search Engine Optimisation (SEO) is a key aspect and V:CMS takes care of this by allowing bespoke meta data to be entered for any page and updated at any time through the web based interface.

So after many long hours, late nights, colour changes, furious head scratching, last minute updates and about four thousand, six hundred and seventy three cups of tea/coffee our new website is live: visit www.vgroup.com and have a look round. We’d love to hear what you think.