Web Design
Does A Designer’s Opinion Mean More Than The User’s?
Posted on April 29, 2014 at 12:11 pm
Okay. I’m going to come out and say it. Designers are often way too territorial about their designs. It’s only natural, of course. You spend years and years developing your design skills, you create the ideal process for your ideal user to follow so that (you’re certain) they will get the best experience possible.
But here’s the thing: users may not stick to your original vision of how your design “should” be used. The truth is, they don’t have to, and, if your views on their user experience are off the mark, they shouldn’t.
We’re going to look at some ways in which users often give designers a run for their money when it comes to the ideal user experience, and explore whether a designer’s opinion means more than the user’s.
Technicality Versus Practicality
Sometimes, there is a clear battle between the designer’s creative vision and what the user really wants. This can be seen in major corporate projects as well as individual website designs for a single client. Designers, by virtue of being creative professionals, often let their ego get in the way of creating a truly functional product. Some of this is justified. After all, you want to maintain your reputation for quality, both functionally and visually.
But, as the saying goes, form follows function. You don’t want to get so caught up in maintaining your design’s visual appeal that you lose sight of what’s best for the user. The best way to avoid this pitfall is to regularly interact with your target audience. Talk to people who interact with your website, app, or other designs. Ask them questions about their experience – what they feel could be improved, how your design is helping them achieve solutions to their problems, et cetera. This knowledge will be invaluable not just to your users and your clients, but also for expanding your career as a designer who really “gets” the ideal user experience.
Co-Opting Your Environment
Users, by definition, use things. Sounds obvious, I know, but many designers forget this simple fact, or think it only applies to a narrow set of rules. But people who use things are amazingly adaptable. They use the world around them to create their own design solutions, if the ones provided aren’t satisfactory. All users have this ability – including you.
Yes, you routinely violate many designers’ perfect visions for how you should be using their products. Ever scribbled a phone number or email address on the back of someone’s business card? You rebellious user, you. From holding a supposedly “ergonomic” pen or tool in a way that’s unconventional, but more comfortable for you, to breaking out the sugru and physically altering a product to fit your individual needs, we all take advantage of what I call the user’s authority.
Following Leaders And Precedents
Once a design leaves your studio, it officially belongs to the user, and they will adapt it however they see fit. People use design to communicate with one another out in the world, often in ways that the designer never intended or even expected. Your design may end up serving a completely different purpose than what it was originally created for.
Think about the last time you gave directions to a tourist or someone in your town who was lost. You probably told them something closer to “head left at the intersection with the weird billboard,” rather than rattled off a dry list of street names. Design infiltrates our daily lives, and we use it as placeholders, markers, and guides every day.
Does The Design Slow Down Progress?
The most important thing to consider in any design is whether the user can solve the problem they have with the maximum amount of efficiency. If your design is impeding them from doing this, then it’s a failure as a design. Again, talking to your target users will yield a wealth of information that can help you avoid this common crisis. I’m not talking about formal “focus group” style research either. Even something as simple as a 5 question email survey can help tremendously in the design process.
For example, if you don’t know that the majority of your users are skipping the calls to action that you’ve added to your website, pretty much the only way you can find this out is by interacting with them. It’s unlikely that they’re going to tell you on their own, and, quite honestly, it’s not their responsibility to do so. You’re the designer – it’s your job to make sure that your designs are providing maximum efficiency for your users.
Building Up Trust
Well designed websites instill a sense of trust in the user. When you see a crappy looking website, your first instinct is that it’s probably a bit shady, or even an outright scam. Why? Well, because a legitimate business will usually at least make an attempt to have a professional looking front.
What Do You Think?
How do you think designers can adapt to their user’s needs and demands without sacrificing their creative ideals for their design projects?
Posted in Web Design
Freebie: 40 Flat & Solid User Interface Icons
Posted on April 27, 2014 at 12:11 pm
For this weeks designer freebie we have a user interface iconset, from Canadian designer Sean Coady, that are perfect for your next mobile app or web design project.
There are a total of 40 user interface icons in the set and have all been designed in a currently popular flat and solid style. The icons are 100% scalable vectors, with the download package containing both the AI and EPS files. You can freely use these icons in both your commercial and personal work.
Here they are:
Solid & Flat User Interface Icons
They are 100% scalable vectors in AI and EPS formats.
Download & License
You are free to use the Solid & Flat User Interface Icon Set in both your commercial and personal work.
About the Designer
These icons have been created by Canadian designer Sean Coady. You can view his work on Behance or follow him on Facebook.
Posted in Web Design
Weekly Design News (N.224)
Posted on April 25, 2014 at 12:11 pm
You can sign-up to our awesome weekly newsletter for some more amazing articles, resources and freebies.
Worth Reading
Ashley Nolan wrote about the fall and rise of SVG.
The LambertGroup released a responsive zoom in/out slider plugin for WordPress that comes in 4 versions: Fixed dimensions, full width, full screen and sidebar banners/mini-galleries.
Matt Griffin talks about coding with wireframes.
Parker Bennett created and released the Stackicons-Social font.
Gian Wild published her 15 golden rules for making links accessible.
Raymond Camden created the video tutorial Debugging With the Firefox DevTools.
John Zeratsky gives pointers on writing great interface copy.
Wes Hatch on “Scroll-Jacking” in full screen.
Saijo George wrote about some exciting web design ideas that are worth a look.
Sam Norton published an indepth tutorial on getting started with LESS.
We published 20 popular jQuery plugins you can configure without any coding.
New Resources & Freebies
Typsettings – A Sass type toolkit.
0
Ridiculously Responsive Social Sharing Buttons.
1
Cute Grids – A clean base for your responsive design.
2
Orso – A LESS and SCSS nested rules generator.
3
Slidebars – A jQuery plugin for implementing app-style revealing menus.
4
TLDRLegal – Software licenses explained in plain English.
5
EnjoyCSS – A CSS3 code generator.
6
Ink – A Photoshop documentor plugin.
7
The Outlined Weather Icons Collection.
8
Some Inspiration
Beautiful & Clean Web Designs.
9
…and finally…
A CSS Tardis by John Galantini.
0
Posted in Web Design
Ghost.org, the blogging tool based on WordPress, is now available
Posted on April 24, 2014 at 3:56 pm
Back in November last year, John O’Nolan came up with a rather revolutionary concept of Ghost — a blogging tool based on WordPress. The logic behind this project was that WordPress is evolving more as a CMS and less as a blog publishing platform and as such, Ghost attempted to fill the need for a blogging tool.
Almost a year later, the first public release of Ghost has been announced. Plus, Ghost has also started accepting open signups and forum access.
Right now, you can either download Ghost and test run it all by yourself, or you can make use of automated Ghost installers, such as those provided by Bitnami, Rackspace and Digital Ocean. Among other things, Envato have also announced a $5000 competition for Ghost theme submissions.
A hosted solution for Ghost is also in the making, but is currently available only to beta testers.
If you have been looking for a simple blogging platform, Ghost might be of use for you! Go ahead and give it a spin.
Try Ghost
Posted in Web Design
Inspiring Examples of Logo Sketching
Posted on April 23, 2014 at 12:11 pm
Ahhh, sketching with pen and paper. Just you and a blank sheet of paper. A designers bliss.
It doesn’t matter whether you are a graphic designer, or a UI designer, sketching your initial ideas on paper is perhaps the most important, and at times underestimated, stage of any project. It truly gives you the complete freedom to dig deep into your imagination and flesh-out those creative ideas.
Viewing the sketching process in action can be a truly beautiful thing. With that in mind, today we are taking a look at some examples of logo sketching that will hopefully give you some inspiration.
We have previously featured examples of icon design sketching and some UI sketching, just in case you wanted to check them as well.
Lorensegs Insurance Company by IndustriaHED
Batter World by fuentoovehuna
Logotypes Collection by Creative Mints
Monogram by Ink Ration
Londonderry Sketch Variations by Helena Olson
AspireBoard Sketches by Eddie Lobanovskiy
Swallowtail Vineyards Logo by Dylan Bannecke
Logo Thumbnails by Bradley Hawkins
Sonic Corporate Identity
0
Map Pins by Eddie Lobanovskiy
1
Personal Branding Exploration by Anna K.
2
Hendrick’s Quinetum by Quaker City Mercantile
3
New York Public Library (NYPL) by Marc Blaustein
4
ITV Logo Creation
5
Logo Sketches by skylervm
6
Sketch Kit by Mike Rohde
7
AV Logo by Akos Venesz
8
Cuongarden by Bratus
9
AppleJack Logo by Artua
0
Posted in Web Design
Weekly Web & Mobile Creativity n.53
Posted on April 19, 2014 at 12:11 pm
It is that time of the week again, a chance for you to sit back and enjoy some of our favorite web and mobile designs from this past week.
You may also like to browse the Web & Mobile Creativity Archives.
Posted in Web Design
25 Beautiful & Clean Web Designs
Posted on April 17, 2014 at 12:11 pm
The last few years web design has changed dramatically. Putting the RWD and web font revolution aside, modern design trends have rapidly moved away from skeuomorphism to using a flat color scheme, web typography has got much, much larger, emphasis has been put on content-first, and finally, page-load speed has become the key factor in determining the success of your site.
All of this has resulted in a clutter-free and aesthetically uncomplicated experience for our readers. So, after all these years of trying we have truly arrived into the era of clean web design.
Below we have selected 25 clean sites that we feel encapsulate all of the factors we mentioned above. They are all in their own way beautiful. What do you think?
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
Posted in Web Design
20 Popular jQuery Plugins That You Can Configure Without Any Coding
Posted on April 15, 2014 at 12:11 pm
In this post, I have collected some popular jQuery plugins that can be configured in less than a minute! Really. They can be easily implemented by selecting the plugin options that you need by using my easy-to-use Bitconfig user interface.
So, what is Bitconfig and how can it help configure jQuery plugins?
Bitconfig is a live edit and implementation system for jQuery plugins. You can actually play with the plugin settings and watch the live demo. In a way, you are tweeking the plugin functionality as per your need without coding. You can also save your configuration changes and share your implementation as a prototype with other developers. Once you are happy with your prototype, just grab the HTML and JS code snippets and you are good to go!
It might be a little early to say this, but yes, documentation can become old school!
Check out the popular jQuery plugins below and click on the ‘Bitconfig Live Edit’ button to see how easy it is to use:
Datatables
Datatables is the best plugin for creating high configuration HTML tables. It is based upon the foundations of progressive enhancement and comes with many advanced functionalities and loads of customizable features. Highly recommended!
Datatables
Posted in Web Design
We have another 10 WordPress themes of your choice to giveaway from ThemeFuse
Posted on April 14, 2014 at 3:56 pm
After the popularity of their last giveaway, we are truly delighted that Themefuse have agreed to again offer our readers 10 WordPress themes of your choice. And just like before, to enter this competition all you have to do is comment below telling us how you’d like to use your free theme.
When it comes to the world of WordPress themes, ThemeFuse is at the top of the list as one of the most premier providers. With so many options, you are sure to find a WordPress theme that will meet your needs. Style and design come together fluidly in their themes, with all beautifully designed and coded, and offering unique features and options from which you can choose from ensuring you get everything you need.
The samples below are just some of the themes ThemeFuse offers:
Collective – Professional WordPress Theme
Collective is a powerful and at the same time easy to work with responsive professional WordPress theme ready to push your business forward.
Evangelist – Church WordPress Theme
A warm church WordPress theme that will fit perfectly if you are looking to build a church, charity or a prayer group website.
AutoTrader – Auto WordPress Theme
A stunning, responsive auto WordPress theme excellent for an online vehicle marketplace or an auto motor magazine or blog.
PixelWhiz – Designer WordPress Theme
If you are looking for a graphically stimulating design and need a creative approach, this theme is perfect for your needs.
Conexus – Responsive WordPress Theme
A multi-purpose WordPress theme that can fit perfectly for various business industries or more laid back creative shops.
Metro Vibes – Metro WordPress Theme
A modern and responsive metro-style WordPress theme that is perfect for a creative agency or a portfolio showcase website.
Click here to view more themes from ThemeFuse: ThemeFuse WordPress Themes.
All you have to do to enter is leave a short comment below telling us how you’d use your ThemeFuse theme.
This competition will run for the next seven days, ending on the i8th of October 2013. All winners will be chosen at random and will be informed via email within 2 days of the competition ending.
Just to show some love, you could also Like ThemeFuse on Facebook.
Good luck!
Posted in Web Design
Exciting New Web Design Ideas Worth Taking a Look at
Posted on April 13, 2014 at 12:11 pm
One thing we do at the start of every year is look back at some of the popular trends from last year and try to predict what will be the exciting new thing of the next. Following along from those lines, I recently took a look at some cool interesting web design elements and thought it would be a good idea to expand on that and to take look at a few more. So without further ado here are some epic new web design ideas that you guys might appreciate and maybe find some inspiration from.
1. Your words become your actions
Smartphones have made most of us comfortable with the idea of talking to our phone, but what if we could take things further and use our voices to navigate through a website on our desktop? It’s quite possible. if you check out this WordPress theme called Time Travel, it allows users to use voice commands like homepage – go to homepage, next – go to the next post, previous – go to the previous post, tweet, share, search for, show comments, and much more. You can even build your own custom commands for your visitors. Although its voice command support is currently limited to just Chrome.
2. Go on, read the next one too
The “Read This List” sidebar on The Daily Beast is fantastic. Scroll down a couple pages and have a look at what it does. The list gives you a visual cue as to how far you have ventured in to an article and encourages you to follow up on the next one. I think it will be qute useful when articles/posts are related or when you have a multi-part story.
3. Want to know more about me?
If you check out startupsthisishowdesignworks.com you will see that you can effectively move secondary content, which is not integral to the story you are reading, to be hidden from sight. This way you have the option to read more in to it if you choose. Click on the highlighted words to see it in action.
4. Go on, taking a swipe at me
With more and more users actively engaging with your site on a mobile device, it’s nice to look at some interesting ways in which you can offer content to these visitors. Many smartphone apps offer the users the ability to swipe to the right to bring up the navigation menu. There are many jQuery plugins like Bamboo and mmenu that can help you add this to your website. And if you want a WordPress plugin for it, then how about trying something like mobile.nav.
5. I just want to talk about this
One of the things I like about Medium.com is their contextual notes/inline comments as a way for visitors to engage with the author. When you bring up any article on the site you can highlight any portion of the article and leave a note/comment. If you have a passionate community that leaves meaningful comments then this is a great way to engage with them. Visitors can selectively pick out portions of comments they want to read and engage with. Sadly I don’t think there is an existing solution that I am aware of that could get this feature on your site. Do you know of any?
6. Two hands are better than one, or is it?
Navigation has traditionally always been something that has resided at the top of a web site. But we are staring to see a shift in that design, especially with the rise of mobile. It is a bit of an inconvenience to scroll back up to reach the top of the site to use the navigation menu. Especially since a high percentage of smartphones users tend to use one hand to interact with their device – this study shows that 49% of users tend to do just that. So wouldn’t it be wonderful to show a mobile menu in the footer for easier navigation? If you have a WordPress site then you can use a handy WordPress called Ultimate Flyout Responsive Menu to get a footer navigation menu. (FYI the plugin supports a lot of different navigation options, even the slide to open the menu we saw earlier).
7. I want to know more about you
I really love the fitbit.com website. Its another case of putting secondary information to the background until the visitor wants to take a look at it. If you scroll down to the part where they talk about syncing the device, you will see the option to do it either via bluetooth or Wi-Fi.
8. Unparalleled storytelling skills
We have all seen far too many sites with parallax scrolling, but when used effectively this technique can be used to convey a powerful brand story, a recent one being the be moved campaign from Sony and the new Mac Pro.
9. Let there be light or not
Last year an acquaintance of mine Damir Kotorić said that we will be using luminosity levels in RWD. And guess what? We are already beginning to see some cool things people are trying to do with luminosity media queries. Check out what Tomomi Imura is trying to do with luminosity media queries and how it could help with screen readability.
10. This was created just for you
What is so new about that, I might hear you ask? Responsive design is based on this premise. If you are an iOS fanboy then you would have loved it when the you seen this article on The Verge, but if you were on Android it would have looked like this, and similarly for Microsoft devices, the page has a ‘metroy’ feel. The exact same story, but looks a lot different depending on the device. We could be seeing a lot more of this in the future.
Concluding
So there you have it folks, 10 things that I think are pretty cool in web design at the moment. Of course as with any new design change it’s important to educate your visitors on the new features, or to provide visual cues that they can easily pick up on.
Of course there are many more exciting things out there, some of which I might have missed so don’t be shy and sound off in the comments as to what are some of the exciting web design elements you have come across recently.
Posted in Web Design