Comment

Why we wireframe

What is a wireframe?

A wireframe is an ‘un-designed’ plan of the website design. Its function is to create a structure and base for the design that follows. Wireframing is a key phase of our web design process at Styles Webbin so we decided to write this blog so you get to know why.

 

Here’s some of the reasons why we wireframe:

  • Transparency

Sharing our wireframes with our clients, even though we know they don’t look that pretty, is part of our transparent ethos. We believe that the client should be able to see the website forming at every stage of the project, allowing them to suggest changes as early on as possible. We can discuss and alter the navigation, headers and key user journey’s at this stage.

  • Consistency

Doing wireframes instead of jumping straight into design allows us to ensure there is consistency between the website pages. Elements such as call to action buttons and image areas can be copied between pages and quick comparisons can be made both internally and with the client’s approval.

  • Development

The wireframe stage is a good time to get in touch with the developers to check that our vision is practical for them.  Communication with the developers at such an early stage sets us apart from many design studios because we consider the aesthetics and the functionality alongside each other.

  • UX

The wireframe stage is when the user experience is put to the test. Without being distracted by the appearance of the site, here is when we can imagine ourselves as the user and take the journey’s that they would take. The client also gets to be part of this process, making sure that all of the target audiences are reached.

 

Now that you know why we wireframe, here’s a little about how. Whilst wireframes can be produced using various tools and Adobe programmes, at Styles Webbin we start with sketches, followed by mock-ups in a tool called Balsamiq. Whatever the tool, putting ideas onto paper is always the first step to creating our wireframes and then these rough sketches can be transformed into more understandable digital wireframes. Balsamiq is an easy-to-use software with plenty of tricks to make the work look presentable and clear but quite obviously un-designed. (We wouldn’t want our clients thinking the final designs will look like that!)

Wireframing helps us to plan our designs and keep an open relationship with our clients. Hopefully this was a good insight into why we wireframe and be sure to keep your eyes pealed for our next blog post.

If you need help with your website wireframing come to us. 

Comment

Comment

5 steps to a better website

“So, how do you design an effective website?”

There isn't one easy answer to that question. Every client needs the type of site that works best for them – we steer clear of 'one size fits all' formulas. That said, we do have in-house processes and a method that's always produced great results. It looks a bit like this.


1. Pin down your purpose
What do you want your new website to achieve? 

  • More online sales?
  • More signups for your e-newsletter?
  • More readers for each blog post?
  • More followers on social media?

An e-commerce site will look very different to one that's for games or to show off a portfolio.

Having points of reference is good: existing sites you like the look of, web pages that work well etc. Obviously you don't want a carbon copy of someone else's website – think of them as a mood board instead. We use these thoughts as inspiration to create a website that's individual.

 

2. Move your brand's image online
Sometimes, all we start from is a company logo. And at other times, clients give us a massive list of brand guidelines to stick to. The important thing to have, in any case, is a clear idea of the marketing tools and materials you're going to use.

There's also a difference between what your website will do, which social platforms suit your aims, and what your online presence will achieve. What works as a marketing tactic on LinkedIn may not be as effective on Twitter, and vice versa.

Things to think about:

  • Does your brand need a visual overhaul?
  • Do you already use any specific typefaces?
  • Will a different colour scheme change your brand's image?

If there's anything you already use that needs to be part of the new website, let us know. We can easily work existing blogs and social media channels into the design.

Our clients come to us with great, ambitious brand ideas and heaps of content. These can't always be effectively translated into a website. It might be that a second look at the typeface makes it less appealing, or that the images you have ready aren't relevant any more. 

As an aside, we strongly advise you not to use stock photography. They tend to 'age' quickly, and are often too generic to create the tailored website look you're after.

 

3. Use good web design to meet your goals
Every aspect of your website will be designed to suit the objectives you decided on at the start. The site map and page layouts should push visitors towards the end point, be that your contact form or the 'buy it now' button.

User experience is critical to your website's design, and taking the time to pin that down early will make finishing the site easier. Wireframes will show you the blueprints for your site before the content goes in. That's when it's best to tweak layouts and the user journey.

 

4. Make sure it's working
We mean this in both the functional way and in terms of your original goals. Once the new site's up and running, give it a little time to 'bed in' and be found by search engines. Our suggestion is to wait at least 3 months. We can then use analytics to see how effective it's all been. 

In the first days and weeks, why not ask friends and family to visit the website and give you their thoughts? Take a look at Google Analytics if you have access to it. In particular, pay attention to the 'bounce rate' – the number of people arriving on your site and almost immediately clicking away. Find what's causing them to backtrack and get any issues fixed.

 

5. Do it all over again!
Some people say that you need a new TV/phone/laptop almost as soon as you've bought one. Websites aren't like that. They're more flexible. Uploading your new site isn't the end of the process by a long shot.

This time, you have something more concrete to start from. Comparing your objectives to what the new website actually delivered will show where adjustments could be made. Do you need to explore other avenues to get the results you want?

When you're ready to create or overhaul your online presence, come to us

Comment

Comment

Working in a shared office in London

sharedspace

We share our workspace – it's just off the Old Street roundabout in London. In our time in this office, we've discovered loads of things to love about it. Having a London address – at the heart of the city's tech scene – obviously helps. There's much more to it than that, though.

Being social
Being based in an office occupied by several companies means you mingle with people you might not otherwise meet. This is especially true if you share space with groups who work in a totally different industry. Our space is home to interior designers, marketers,  visual storytellers and web developers. And us, of course. With so much knowledge in the building, it's hard to be uninspired.

There's plenty of space...
As a team of just a few in an office of many, we appreciate the added space. The walkways between desks, cupboards and drawers, and the communal areas. There's even a bike rack – you'd be surprised how many people here pedal into work. On our own, we wouldn't necessarily need all that room, but it's nice to have it.

...and it's easier to get more
When we do need more room, it's simple to find. Shared space is easier to scale up as you need it. Getting an extra desk for a new team member doesn't involve packing up and moving to another building.

Everything's in one place
Offices which are shared tend to have either more or better facilities. Things like bigger toilets and kitchens, a better printer/scanner, more stationery – the important stuff. We've also got a strangely therapeutic darts board. It's not the first thing you'd think of to furnish an office, but we don't know how we'd manage without it.

Even the building's creative
Our workspace is called The Brew located on City Road in London. Appropriate for a place where so many ideas bubble up every day. The walls are covered in things to spark your imagination, too. It's inside the Eagle building, which you can spot from the massive black bird sculpture at the top. 

A coffee shop to call our own
Ever heard of Papilles? We see this lot every day, as the café's inside our building. It offers a tasty mix of British and French food, including 'Frapas'... which is delicious French tapas and not them hacking our Facebook accounts.

Food for thought
A drink or a bite to eat is something we rarely say no to, and we get asked a lot. We've written before about how much we like to be sociable at lunch. The more, the merrier! Fridays are when we all go over our week over something delicious. And at Christmas, we celebrate together.

Stop by for a chat sometime. You are more than welcome.

Comment

Comment

Having lunch makes you a better designer

teamlunch.png

Sometimes we write about our work, sometimes we write about events and courses that we attend. This month's blog post is a bit tangential, but we're going to talk about the importance of lunch in the creative process. 

As designers, we spend our energy crafting the big picture and obsessing over small details. We also spend a lot of time in front of screens. While we're passionate about what we do, sustaining a high level of focus is very consuming and intensive. Even the most creative genius need to regular breaks. 

We've been quite adamant about establishing a studio culture where it's normal to take lunch breaks away from our desk – whether it be taking a walk to Whitecross market or sitting on the grass behind the church. It allows us to gather our thoughts and come back to our work with fresh eyes. It's also quite important for us as a company as we work in a basement and have no access to natural sunlight. Coming back after a break meant that we could be more attentive and vigilant about these details.

There is also a great social aspect to lunch that allows us to meet and talk to bond with each other as well as others outside the team. We like to try out new places around Shoreditch or sit at the office communal table and chat to other companies in our vicinity. Building trust and openness allows us to be able to communicate confidently and honestly with each other, in and out of work. It is so important as critiquing each other's work is a huge part of the creative process. 

Lunch also gives you a mini-deadline to work towards. We feel more motivated working towards a small goal within a small timeframe instead of endlessly moving pixels around. It makes the workload more manageable. 

We just find that this makes us better designers. 

On that note, here are some of our favourite lunch places in Shoreditch:

Ruby's for killer pasta
The cheap Indian place in the off-license next to Itsu
Grab for their Panang curry and prawn crackers
On the Bab for Korean burgers

Comment

1 Comment

First steps with Alquity: Thinking outside the box

Alquity are a different kind of business; investment with a conscience. Our task was to project their vision, revealing the new Alquity brand at a launch party in London. 

Pre-launch

We first met Alquity a few weeks ago as they were on the look out for design assistance to help launch their new brand. Alquity are right up our street – a company trying to make a positive difference in the world – in a sector that’s not exactly renowned for ideas of fairness and social responsibility. 

We pride ourselves on being a small team. That they would be dealing directly with designers – not account managers – helped boost our appeal as the company to roll-out the Alquity brand. Needless to say, we were up for the challenge and our enthusiasm paid off.

The first few weeks were a mad rush leading up to the launch event. (It had been a while since we had designed for print and we relished building relationships with printers from scratch).

Part of our brief was to design invitations that would build intrigue for the launch as well as marketing material that could be repurposed for future events. Working with the concept of 'revealing the brand,' we explored un-scrolling or unfolding to enhance this message. We also looked at printing custom envelopes, but with a run of only 150 they would have blown the budget. In the end, we created a folded invitation that opened up to reveal the event details. After much experimentation with the printers, we decided that the invitations would have to be individually scored to achieve the best results. 

The Launch

For the event to be a success, we needed to bring the Alquity brand to life in a big impactful way. The space at IceTank was sparse and white – the perfect setting for Alquity's vibrant imagery. We knew we wanted to steer away from corporate roll-up banners and display boards, the props of a generic investment company. We presented a number of different ideas including a hanging world map and vinyls to decorate the glass doors. We also proposed large cardboard cubes that could be custom arranged throughout the space and stacked with other cubes to create a myriad of different messages and imagery. Alquity loved the idea; it was playful, versatile and a bit different. (The next challenge was to find a printer who could do this within a tight timescale; to our surprise the cubes were quite an unusual request). In the end, we created 3 different cube designs for the event, twelve cubes in total.

Photograph by Alexander Whittle

Photograph by Alexander Whittle

Photograph by Alexander Whittle

Photograph by Alexander Whittle

To bring momentum to the space, we created an Alquity slideshow that was displayed on a large TV screen, greeting guests as they walked through the doors. Working with Alquity, we chose vivid images that showed the diversity of people, communities and places that Alquity are involved in.

Finally, to complement the slideshow and boxes, a set of hanging banners articulated Alquity's mission statements, 'Transformation,' 'Life Changing' and 'Opportunity’, reinforcing key messages for the journalists and potential investors who were invited to the event and spelling out what sets Alquity apart from other investment companies. 

It was really satisfying to see all the design elements come together creating an inspiring but unpretentious environment.

Photograph by Alexander Whittle

Photograph by Alexander Whittle

Photograph by Alexander Whittle

Photograph by Alexander Whittle

Next steps... 

The first few weeks have been hectic and inspiring. Alquity have been a great client to work with and we're very excited to see how this relationship develops and flourishes. 


What the client said
"Rebecca and Bryan have really captured the essence of what we’re about here at Alquity – being different and challenging perceptions is so important to us, and through our work together we have truly started to achieve this." – Eve Black, Alquity

1 Comment

Comment

Simplifying the complex – Icons for Magstim

Magstim is a company that specialises in products related to brain and nerve treatment. We were recently approached by them to create a bespoke set of icons to be used on their website and marketing materials. 

The project was challenging as the icons needed to look simple but illustrated very complex and specialised fields e.g. Cognitive Neurophysiology, Psychiatry, Neuroscience. It required lots of research in order to understand the differentiating factors between each of the research fields. We were also keen to steer away from obvious solutions and create something more meaningful. 

1.  Image found on Wikipedia  2. Image found at Ch 6 Measurement methods and Values 3. Image found on Shutterstock 


1.  Image found on Wikipedia 
2. Image found at Ch 6 Measurement methods and Values
3. Image found on Shutterstock 

For the 'Research Techniques' icon (above), we looked at different ways in which EEGs and FMRIs were currently being represented. Our explorations looked at different configurations of lines and nodes to best create a simple icon that solved this problem. 

Magtim-Rehabilitation

The sketches above were explorations for 'Rehabilitation', which in this context refers to recovering from a stroke. We learnt about exercises that stroke patients practice to help relearn simple tasks and rebuild muscle strength. Our concepts used the hand and ball to communicate rehabilitation while also conveying a sense of nurturing and care.

Magstim-Psychiatry

The concept behind the 'Psychiatry' icon was to use weather as a metaphor for our mood e.g. sunshine is related to happiness; rainy and cloudy related to feeling down. We used this to convey how our brain affects our mood by also gently hinting at the similarity in shape between the brain and cloud. We went through different iterations of shapes and lines to get the right balance between cloud and brain.

MagstimIcons1.png
MagstimIcons2.png
Magstim-insitu.png

The final set of icons can be seen above with using Magstim's dark blue as a base and orange as a highlight colour to bring out certain elements within each icon. 


What the client said...
"Magstim recently commissioned Styles Webbin to produce a range of bespoke Neuroscience Icons for use online and in print. 
From initial consultation, through to completion of project, Bryan and the team were extremely professional and transparent in their approach. The ability to create a bespoke and fresh set of icons whilst remaining sympathetic to our overall brand style was a big plus.
I would not hesitate to recommend Bryan and the team”. – Joseph Durrant, Magstim

Comment

Comment

1 year at a London design agency

Rebecca's one year birthday at Styles Webbin is approaching in a few weeks and we thought it would be the ideal time for her to reflect on some of the things that she's learnt over the past year:

I moved to London from Sydney just over a year ago, looking to be part of a bigger design world that London offers. In my previous roles as a designer, I worked predominantly in-house and did mostly print work designing posters and brochures. So, the move to a small digital agency proved to be a bit of a challenge, especially in my first few weeks.

One of my first website designs was for Local Space. I was trying to integrate a hexagonal pattern into the background, which conceptually referred to both housing and the community. I was constantly moving the same pixels around for a few hours hoping that the design would miraculously come together. I knew it wasn't working – I was going around in circles nevertheless and it was frustrating. At this point, it's probably good to stop and take a new direction. As a designer, it's important to learn to be vulnerable and ask for feedback, and get an opinion from a fresh pair of eyes. In the end, the pattern was too heavy for the site and just needed to be less of a feature.


PTA-UK & easy-fundraising

For me, I left working as an in-house designer because it started to feel monotonous and what I enjoy most about being in an agency is the range of clients that I get to work with. At Styles, we often work with start-up or charities who have basic branding and one of our biggest challenges is adapting and extending this brand online. How do you communicate a friendly community vibe through images? Through type? Through colours? This was the case with the PTA-UK/easyfundraising site, where we had to deal with two brands and one could not take significant prominence over the other. We needed to communicate in the header that the two brands were in partnership and explored different ways of doing this. It wasn't easy to strike that balance but we opted for a grey dividing gradient which was subtle and neutral and determined the rest of the feel for the site. The grey and white background panels were a conscious decision to allow easyfundraising's blues and purples and PTA's red to shine through. Being respectful to brands and communicating their needs has been something that I've learnt to do throughout the year.

Mushroom Creative

The move from print to digital was also very deliberate decision as I felt that I was otherwise being left behind as a designer. A year ago, I hardly even knew what a responsive website was and now with every website, I resize my browser to see if it is. Responsive design requires a bit more holistic thinking and requires establishing a very clear content hierarchy across all devices. Since content stacks vertically on mobile, the top of the screen is really valuable and needs to have a lot of impact. When working on the Mushroom site, we segmented content within the grid, which determined how content would flow. I've learnt that it's easy to know how the page will work responsively when you break the page down into different parts.

It constantly surprises me how fast the digital world is moving and there are many unchartered waters, which makes for a very exciting industry to work in and I can't wait to see what my next year in London will bring!

 

Comment

Comment

Our 5 current favourite design tools

Working in digital design is always challenging as it is an industry that is constantly evolving, and as digital designers we are constantly searching for new tools to help deal with these changes. 

Below is a short list of our favourites that have entered the studio. 

Invision App

Invision App
What we use it for:Testing functionality

Currently in the studio, we are working on designing and developing our own iPhone app. Invision App has been really useful for communicating the design transitions and journeys between screens to other team members. One of the standout features is the ability to send clickable designs to your phone via SMS, because it's important to be able to experience your own designs in context.

Moqups 

Moqups
What we use it for: Wireframing apps

What attracted us to Moqups is how easy it is to use with plenty of drag and drop features. Being able to road test it from the get-go with a minimal learning curve was definitely a bonus. Its other advantage over other wireframing tools is that it looks clean and professional while still communicating the basic skeleton of the website/app. 

Icebergs

Icebergs
What we use it for: Collecting ideas and inspiration

Icebergs is basically a fancy bookmarking tool but we've found it to be really useful at the beginning stages of a project when we're researching and quickly collecting ideas. It's visual as it takes mini screenshots of the site that you've bookmarked, which means that you can quickly scan them again when you revisited them later. 

Basecamp

Basecamp
What we use it for: Project management and scheduling

Basically the only project management tool out there, this one is probably no surprise. However, as we work in a service industry, it's important to have good communication with clients. Being transparent is an important part of a good client relationship and keeping documentation of discussions and processes in one place helps achieve this. 

Unsplash

Unsplash
What we use it for: Image sourcing

We work with a lot of start-up and charities, and often they don't have many high resolution images to work with. Part of our job is being able to suggest or source images they can use. Unsplash has a growing collection of large high-resolution, free-to-use images. They're not stocky which means they often have a bit more personality to them. They're not always appropriate to the project but it's a good place to start.   

Got other favourite tools that you use? Let us know!

Comment

Comment

Designing for Multiple Devices

We recently sent out Rebecca to the the Designing for Multiple Devices workshop at General Assembly headed by Anna Dahlstrom to get more insight into this ever changing and growing industry. Here are her reflections about what it was like and what she learnt:

The workshop was a great experience to join others in the industry in an intimate setting. I think most people were there because they understand the value of UX design but were not entirely sure the best ways and practices to approach it.

The workshop was comprised of informative presentations followed by short exercises and case studies. There are a lot of extensive articles on the Internet about responsive design but it’s always valuable to be able to hear it coming from another person and work and talk through ideas with other designers.

For me, the most eye-opening activity was defining a content strategy. It’s not been something that we’ve done formally in the studio before but is becoming more important with complex sites and determining the hierarchy of information across all screens. The way that we were shown to approach this was to list out the elements that would need to appear on the page e.g. about, share, product listings and give each a number related to its level of importance. It determined and rationalised where and in what order things should appear on a page. I think this is really important as users now expect the same web experience regardless of what device they’re on.

Though simple, it changes the way you think about content, and requires a bit more preparation before the design stage. Many UX designers have suggested that mobile-first design is the best approach. However, in the workshop, Anna suggested that it doesn’t matter what screen you start off on, as long as you are wireframing them simultaneously. I felt this to be more re-assuring as I’ve always preferred starting with desktop layouts as they are more complex than single column mobile layouts.

The workshop also introduced the concept of modules or atomic design, as a way to approach responsive websites, where each page is seen as being composed of different building blocks or modules. These modules in turn can be designed individually and shown how they would react to different screen sizes and reused across different pages. As a result, web designers will begin to create pattern libraries (such as this one from Mailchimp) similar to the way that branding guidelines are created rather than complete page designs. It becomes much more efficient from a design and development point of view but requires much more collaboration between them.

All in all, the workshop was a valuable experience to understand how to start thinking more fluidly about responsive design.

Comment

Comment

Upwardly mobile

Upwardly Mobile

Styles is about to celebrate its 5th birthday, so we thought it was about time we updated our website.

You'll find our new site is responsive and will scale on mobiles and smaller tablets. We're continuing to work on the design, functionality and user interface, and we are committed to learning from how you use the site so it evolves to best serve all web experiences.

Key new features include a revamped homepage providing projects at a glance, tidied up the case studies and improved the latest news section by allowing our users to comment and share our stories.

As always, we're extremely grateful for your feedback. You can send your thoughts to us at info@styleswebbin.co.uk or comment on this post.

This is the first step of many. We're thankful for your loyalty and hope that you'll enjoy the changes.

The Team x

Comment

1 Comment

A new look for music production company, A-mnemonics

A-mnemonics home page

A-mnemonics needed a new identity and website to showcase their growing portfolio. The brief was to create a site that was clean and fresh, that was able to stand out against their competitors. 

Our research for the logo led us to exploring strong graphic wave patterns and playing with the letter ‘A’. The design for the logo alludes to sound bars often associated with music production, while also subtlely forming a triangular shape. The mark is simple and elegant and supported with bold typography.

Many music production sites use a strong black background. Working with the client, we decided to shy away from this to keep the site light and modern. The site is also fully responsive, which means it works on all devices. 

View site
www.a-mnemonic.com

1 Comment

1 Comment

Kooky Type Week

One late Friday afternoon, we decided to conduct a little Twitter experiment by starting our own hashtag #kookytypeweek. For every day of the week, we would promote some of our favourite free fonts by typesetting a quote related to the name of the font and tweeting them as images.

We chose fonts that were unusual and different from one another, and probably wouldn't have had a chance to use otherwise

Above is the #kookytypeweek series presented Monday – Friday. 

 

1 Comment

Comment

London Design Festival

London Design Festival 2013

One of the greatest things about London is its huge creative community. The London Design Festival is a testament to this and we couldn’t wait to see what was on offer this year. Here is a collection of some of our personal highlights.

Comment

Comment

Clerkenwell Design Week

Styles Webbin were out and about at Clerkenwell Design Week yesterday. It was great to criss-cross our way across some great London spaces and see what other design disciplines were up to! Our favourite was the Farmiloe building, and the showcase of innovative furniture inside its rustic surrounds. Lookout for the rude-gestured coathooks!

Above is a selection of photos from our little adventure.

For more info: http://www.clerkenwelldesignweek.com/

Comment

Comment

Katy Lassen

Katy Lassen mobile


Wow! has it nearly been a year since we launched this website. 

Katy Lassen is a freelance fashion stylist and consultant based in London. Katy required a minimal design which lets the images do the talking.

http://www.katylassen.com/

Comment