Interaction design can separate the quality sites from the rest of the crowd – if done well. If, however, there are glaring errors in the designs, it will only serve to irritate and frustrate the very people that you're trying to impress.
When we build a website at 00 design headquarters we have to ensure that what we design and develop will be easy for the end user to interact with. There are a few pitfalls that we must avoid, here we explain what they are.
When viewing a website, we all like to view a design that pops off the page with a clean and crisp contrast. In web design, contrast is important to get right. It helps make the content readable, and allows us to easily identify different elements around the web page. Creating the correct contrast is one of the most basic design concepts. If a designer doesn't get the contrast balance correct it can be difficult for the user to be able to easily focus on the page, or worse still, make it completely unreadable.
Crazy, Unfamiliar Navigation
It can be tempting as a web designer to try and implement a wacky and wild navigation system that really shows off your design skills. However you need to think of your users first. As a web designer you need to create a brilliant user experience, creating a simple, clear navigation isn't boring, it's showing you have put in some thought into making the site easy to navigate around.
Not mobile-friendly & Poor Touch Features
Making sure a website is mobile-friendly, or responsive is essential these days, and there’s not really any reason for creating a site that isn't easy to use on a smartphone or tablet, unless comprehensive tests have been carried out to prove that a mobile-friendly website isn't required. If you have a static, desktop only website it can be very difficult pinching and zooming around and trying to tap links to navigate around the site. We always ensure that when build a clients new website we ensure that its developed to be as easy to use on a smartphone as possible.
We have decided to start a new referral scheme to line the pockets of you lovely folk out there. For every client referred to us by you we will pay you £50 cash. The terms for this fantastic offer are:
" There is no limit to the number of referrals you can claim for however the £50 will only be payable once the invoice for the referred client website has been paid in full and on time. We will then transfer the £50 to you via a BACS payment. To be eligible for the £50 referral you must ask the referred client to state your name and email address to us when they request a quotation. We will save your details and make payment to you within 7 days of the website being paid in full. If the referred client does not go ahead with the website you will not be eligible for the £50. "
We all know, that mobile browsing is becoming more and more popular, as of March this year it had now even overtaken desktop browsing, more people were out and about using their smartphones browsing the web than were sat at home using their laptops and desktops.
What this means then is that whilst people are using their smartphones more than a desktop web designers like us need to ensure that we develop an excellent user experience for the smallest of screens.
We believe that the best way to approach mobile web development is to keep it minimal. With screen space at a premium we have to ensure the layout is uncluttered and easy for the user to operate. The navigation is one of the most important factors for mobile design, we always ensure the end user can navigate around the site quickly and easily creating a good user experience.
A minimal design should only include the essential features, relevant content and nothing else. Buttons should be clear and content well designed to respond to the screen size it's being displayed on. Also, a well designed website shouldn't hide content for mobile devices just because the screen is too small to fit it all on. The content should still all appear but just in a way optimised for a small screen. At 00 design we have spent years studying responsive web design, if you would like to discuss us building a new site for your business please get in touch, thanks.
We have just finished working on this project for a copy writing start up in North Staffordshire called Word Nerds. Word Nerds is run by Laura Cyples who discovered our services via Google search. After talking through what we could offer Word Nerds, Laura was happy to place the order with us. The finished website has been developed to adapt for smartphone and tablet devices. We also incorporated a content management system which allows Laura and her team to login from any device and update their blog as and when they like.
We have just added a new feature to our website, you can now sign up and subscribe to the 00 design newsletter. Keep up to date with what we are getting up to along with exclusive special offers. Simply fill in your name along with email address and we will add you to our database. We promise not to spam you and we certainly will not pass your email address onto any other companies.
We can't believe we have been going for nearly 3 years now, to celebrate our birthday we are going to be offering some brilliant offers on some of our web design packages, watch this space!
We are big fans of Bootstrap here at 00 Design. Not only does it provide a speedy way to create clean coded frameworks it also provides a set of neat buttons, tables, forms etc that help us developers code as fast as possible for out lovely clients. Here below we have quoted what's new in Bootstrap 4 from the Bootstrap blog itself.
" There are a ton of major changes to Bootstrap and it’s impossible to cover them all in detail here, so here are some of our favorite highlights:
Moved from Less to Sass. Bootstrap now compiles faster than ever thanks to Libsass, and we join an increasingly large community of Sass developers.
Improved grid system. We’ve added a new grid tier to better target mobile devices and completely overhauled our semantic mixins.
Opt-in flexbox support is here. The future is now—switch a boolean variable and recompile your CSS to take advantage of a flexbox-based grid system and components.
Dropped wells, thumbnails, and panels for cards. Cards are a brand new component to Bootstrap, but they’ll feel super familiar as they do nearly everything wells, thumbnails, and panels did, only better.
Consolidated all our HTML resets into a new module, Reboot. Reboot steps in where Normalize.css stops, giving you more opinionated resets like box-sizing: border-box, margin tweaks, and more all in a single Sass file.
Brand new customization options. Instead of relegating style embellishments like gradients, transitions, shadows, and more to a separate stylesheet like v3, we’ve moved all those options into Sass variables. Want default transitions on everything or to disable rounded corners? Simply update a variable and recompile.
Dropped IE8 support and moved to rem and em units. Dropping support for IE8 means we can take advantage of the best parts of CSS without being held back with CSS hacks or fallbacks. Pixels have been swapped for rems and ems where appropriate to make responsive typography and component sizing even easier. If you need IE8 support, keep using Bootstrap 3.
Improved auto-placement of tooltips and popovers thanks to the help of a tool called Tether.
Improved documentation. We rewrote it all in Markdown and added a few handy plugins to streamline examples and code snippets to make working with our docs way easier. Improved search is also on it’s way.
And tons more! Custom form controls, margin and padding classes, new utility classes, and more have also been included. "
It's been a very busy last few months for us here at 00 design. We haven't had time to keep our blog up to date, however we wanted you to all know we are all still here, busy building new websites for our wonderful clients!
As of today Google is changing the way it ranks websites via search. We first heard about this earlier in the year when Google stated:
“Starting April 21, we will be expanding our use of mobile-friendliness as a ranking signal….. This change will affect mobile searches in all languages worldwide and will have a significant impact in our search results.”
If your website is non-responsive, then you only have until today to make it mobile-friendly otherwise you will probably see your website drop down the rankings.
You may be asking why Google is doing this?
One of the main reasons is that Google always wants the user to have a brilliant online experience. It also expects that web users should be able to easily find useful, relevant content, in response to a clearly defined search term. The latest update to Google’s algorithm places greater importance on users navigating easily on a mobile device. The reason for Google doing this is due to the sharp rise in people accessing the internet via their smartphone or mobile device.
What if your website isn’t mobile friendly?
First of all you can check your website here: Google webmaster tools
If you find that your website isn’t mobile friendly don’t worry, we can help. Contact us to see how we can transform your existing website into a mobile friendly, fully responsive website. The benefits of doing so have never been so important.
If you are a Star Wars fan, we have stumbled across something cool. Graphic designer Rogie King has created a wonderful collection of illustrations for Star Wars fans, depicting several classic Star Wars ships.
The B-Wing, Y-Wing, A-Wing, Boba Fett’s Slave 1, Luke’s Snowspeeder, they’re all included!
Check out Rogies Dribble page here.
With mobile and tablet browsing becoming more and more popular us web designers are being pushed to come up with new design techniques and to make use of smaller and smaller viewports. It was only a few years ago that we were designing websites for wonderful large desktop screens and the size of the logo didn't really cause any concerns.
In todays age with mobile browsing the preferred choice of accessing the internet we have to really consider our design when asked to produce a logo for a client. We recently designed a logo for a new venture, Studio 220. After discussing the brief with the client we convinced them that it would be a great idea to create two versions of their logo. One for larger screens and one especially for smartphone and mobile devices. The trick is to ensure that the message isn't lost when optimising the logo for smaller devices and also ensuring the brand is still easily recognisable.
We stumbled across this article on the web which we found quite relevant to what we do here at 00 design. It was written by Benjie Moss for web designer depot on March 25th.
It’s almost incomprehensible in 2015 to build a website that isn’t responsive. The technique has developed to the point that most designers no longer say, ‘responsive web design,’ we say, ‘web design,’ and mean exactly the same thing.
Naturally, opinions differ on how to implement responsive techniques; many sites that claim to be responsive aren’t; most sites that intend to be responsive are only superficially so; there are even a few fixed-width devotees clinging on in the face of all reason. But broadly speaking a responsive approach is the default option for all websites.
To understand where responsive design is going, we need only to look at where it came from…
NECESSITY IS THE MOTHER OF INVENTION
The rise of responsive web design goes hand in glove with the expansion of the mobile web. Even if developing an m. site, the exponential growth of mobile devices and the accompanying variety of screen sizes makes responsive design the clear choice.
Statistics are invariably out of date, but most commentators agree that the mobile web is fast approaching 50% of all web traffic. Responsive web design has been embraced out of an economic need: we could build hundreds, if not thousands of variations on a single site, and serve the most appropriate to whatever devices access it; but the cost of developing a website would become prohibitive. Responsive web design is the only way the Web remains viable.
It’s easy to see responsive design as a definitive solution for the Web. However, as tech continues to develop, the way we approach responsive design will inevitably change.
RESPONSIVE DESIGN FOR WEARABLES
Unless you’ve spent the last year in a sealed capsule (attempting to prove your suitability for the Mars One mission) you’ll be aware that Apple have launched a wearable device: the Apple Watch.
The Apple Watch is not the first wearable, it’s not even the first smart watch, but it is the watershed device because the public will see the Apple Watch as ‘the best’ wearable — the iPod was not the first MP3 player, the iPhone is not the best smartphone, but both dominate their markets — thanks largely to the size of Apple’s marketing budget.
The most notable thing about the Apple Watch is that it doesn’t have a web browser. It’s a fair bet that that’s the case not because Apple didn’t want to include a browser, but rather, because they couldn’t make it work.
Even with the spread of responsive design, the 272px by 340px of the Apple Watch are insufficient to display anything but a couple of lines of text. An architect could design a building that’s 15 inches high, but no one would ever use it, because the human body is a fixed size range. Apple aren’t the only company facing the issue. Android wearables are exactly the same size give or take a few pixels, and are equally ill-equipped for displaying the Web.
We can’t make devices larger because they become unwearable, and we can’t make them smaller because of our stubby inaccurate fingers. The cold hard fact is that the Web does not work on a screen the size of a postage stamp.
Portions of the Web do work on wearables. Native apps connect to the Web (or to your phone, which connects to the Web) in order to retrieve data. The just can’t display full web pages.
Buy a wearable now and you can read the tweets of a company CEO, but what an investor really wants to read is the full annual report. Buy a wearable now and you can check flight departure times, but what a traveller really wants to do is book a flight. The Web is inextricably linked to our lives, a few lines on a tiny screen does not meet consumer demand.
Sooner or later (it’s probably already happened behind closed doors) someone at Apple, or Motorola, or Intel, will accept that to dominate the wearable market they have to deliver the full Web in all its jQueried glory.
THE FUTURE OF RESPONSIVE DESIGN
As the tech industry continues to develop new devices, with new capabilities and limitations, the challenges we face as web designers will inevitably change.
One of the key areas for focus in any responsive design is navigation, and one of the key developments we’re likely to see in wearables is a change of input method: sensors in a wriststrap could detect the tightening of tendons in the wrist, tracking the movement of 5 digits, or at the very least detecting the clench of a fist as a replacement for click or tap actions.
The key development will be a means of presenting longform content on a wearable. And actually it already exists: the most viable option for delivering large amounts of data on a wearable device is audio.
Audio input is already viable in the forms of Siri, Cortana, and OK Google. More importantly, audio output exists in the form of screen readers. With the relatively short lifecycle of devices and the increasingly long lifecycle of websites, the projects you build today will need to function with audio browsing. The simple answer is to make your sites accessible.
Frequently, when products are innovative, we expect it to take some time for standards to evolve, but in the case of screen readers standards already exist. What’s compelling for tech companies looking to deliver a wearable web, is that a large proportion of existing websites already meet that standard.
The future of responsive web design, or perhaps simply web design, is one in which designs are not just screen agnostic, but screen independent. In practical terms, it means dropping mobile-first, and adopting an audio-first approach. If your sites are optimised for screen readers, then they will function effectively on the next generation of web browser.
The original article can be found by clicking here.
We would like to congratulate our client Hayley Doody at Remote Associates for winning Theo Paphitis's 'Small Business Sunday' award. Well deserved we say!
We are big fans of art at 00 design headquarters and we appreciate any art where true talent quite clearly shines threw. We would like to introduce you to an artist we found a few months back and felt the least we could do is mention him here on our blog. The artist is Matt Crump and he describes himself on his twitter bio as:
"Half Brit, quarter Moroccan, quarter French, Matt Crump is a multi disciplinary artist living and working from his home studio in vibrant Brixton, London."
His website states that he specialises in digital collaging using long forgotten images. We must say that the results are truly stunning, a real favourite of ours. The detail in his work is incredible.
Please visit the5683.com to see Matt Crumps work in all its glory.
Here is a great selection of 31 different super hero icons to download and enjoy. We think the simple, bold flat design has been well thought out. Pay with a tweet and they are all yours for free!
Please visit superheroicons.com to download the set.
For all the web designers and developers out there, a few industry related jokes. A lovely combination of creativity and humour.
Please visit saijogeorge.com to see more.
We have been working away on a few logos and for various clients recently along with marketing material. After finishing the projects we were wondering how this would all site within our portfolio, how could we make it easy for folks to easily navigate between our web design work and our graphic design work. So we came to the conclusion that our website needed updating. We needed to restructure our menu and design a new page just for our logo and branding work. So we now have two seperate pages, one for web design and one for logos and branding. We hope you like what we have done! Thanks.
Here is another brilliant example of an interactive website experience for Casio G Shock. It's a great insight as to what's possible when it comes to developing for the modern web.
You can enjoy the experience here.