As a freelance web designer, I’m often engaged in conversations with clients that surround requirement gathering. The first thing I always ask before starting this conversation is “What is your budget?”
Now I’ve heard it said that some clients feel you’re asking this question so any price estimates will be increased to meet their maximum allowance. However, this is very rarely possible in any situation I have ever been in. I often find the client doesn’t have nearly the budget available to meet every demand they have, and have never ever been in a position where I could happily meet the clients demands for less than their maximum allowance.
Finding out their budget, as soon as possible, is vital for me to not only decide if I can provide a solution, they would be happy with that can be within budget, but also to allow me to manage their requirements and expectations to fit in-line with their finances. Read the rest of this entry »
If you haven’t heard of MacHeist before, let me tell you a little bit about them. MacHeist create amazing bundles of the very best mac based indie software and sells them at amazingly discounted rates. For example, the current MacHeist, nanoBundle2 is selling $260 worth of apps for only $19.95. Not only do they give mac users a great deal but they also donate 25% of the profits to various charities. While I really love the idea behind MacHeist, it’s not that I want to talk about today, it is the amazing website that they have designed that really caught my eye. Read the rest of this entry »
Many design blogs are full of helpful howto guides and tutorials on using Photoshop Illustrator, Flash, etc. This is great if you have a design in mind that you wish to accomplish. But how do you actually design something?
Design concepts explained
The design concepts explained series aims to explain various processes of design. If you’re itching to use those Photoshop tutorials but are stuck for inspiration, if you wish to find out what a ‘designer’ actually does, or if you are a seasoned pro who wants to refresh their memory, then read on!
Affordance
This week we focus on the concept of Affordance. Designers in many different specialties use it, but we mainly concentrate on its use in graphic design, user interface design and game design.
The term ‘Affordance’ has a strong basis in psychology. It describes the understanding of how we interact with an object. To see this process in action, imagine a two-year-old child with a pile of shapes and a hollow box with silhouettes of those shapes cut into it. To play the game, the child must fit the correct shapes through the correct holes. This seemingly fun game is actually a trick – it’s not there to entertain, but to educate. It’s teaching the child how objects interact with other objects, and helps build on their understanding of how the world works.
Affordance in game design
So how is this concept used in design? The game ‘Chronicles of Riddick’ manipulates our understanding of a real-world object to give us a clue of how to interact with the main menu.
Thanks to toy designers tricking us into learning during our childhood, we can understand that this cube has six sides and when an option is selected, it rotates to display different options. Our understanding of how this object works in the real world allows us to use this menu intuitively.
Affordance in iPhone apps
Let’s use a different example, this time from an iPhone application. In just a few seconds of seeing this interface, we intuitively know how to turn each setting on and off. This interface has been designed to afford pushing and afford switching to manipulate the controls, without any instruction to the user.
Affordance in web design
Affordance is used abundantly in web design. Perhaps it is used a little too much, especially when it comes to those 3D buttons! Below are a few examples used on well-known, popular websites.
Summary
Before seeking out the Photoshop tutorials on how to make buttons with bezels, tutorials on how to use gradients to give the appearance of 3D buttons, or guides on how to make those shiny reflective round buttons that look lickable, remember to ask yourself “why use affordance?”
The examples shown above help users understand how to interact with the interface. At the end of the day, design is all about the user and these concepts should be used for their advantage, and not clutter, complicate or hinder the interface.
Further reading
Book (link to Amazon UK): Interaction design beyond human-computer interaction
This book covers many aspects of interaction design, of which affordance is a small part. A recommended read for anyone involved in interaction design.
Calling all web designers, you may be interested in this cool little tool we discovered that lets you test the usability of your brand spanking new website. So before you start slicing and dicing, stop! Like Grolsch Lager, “it is not ready yet!”
As a designer I can stand up tall and confidently say I have designed a lot of websites that have under performed (not lately of course ). Designs that have failed to fulfill the objective of the brief and work for the client. A successful design isn’t just made up of a few pretty graphics and a jazzy logo, it’s strategically planned to give the user exactly what they want. Within 5 seconds they need to know who you are and what you do. Secondly comes the every so important ‘Call to Action or CTA’.
JARGON BUSTER : CTA : Simply getting the user to do something specific, like signup or leave a comment.
Now the best way to see if your new design works is to do a very simple usability test. Five Second Test is a smart, yet simple online tool that lets you upload a design to be tested. It’s a simple process:
Upload a JPEG of your swanky new Badger Traps website.
Choose whether you want a Classic or Click Test
Sit back and wait for the results.
Classic Test: Testers have 5 seconds to name things they remember about the design they have just seen. Click Test: Testers have 5 seconds to click on the design then describe what they clicked on.
So far over 17,000 tests have been completed (17,000 x 5 seconds is like…. a whole lot of time). If your new Badger Traps websites gets comments like:
“I have no idea what they sell” or “I think the name of the website was Cat Houses” then the design may need some work.
It’s so easy to use it’s worth a go. Spending 2 minutes to upload a design to ascertain these valuable comments could save you a lot of heart ache down the line.
Mozilla.org, the non-profit organization who own the popular Firefox browser, are in the middle of a website redesign and have asked the Mozilla community for feedback on the first round of designs.
Happy Cog is working with Mozilla Foundation staff and the Mozilla community to address the redesign of the site to accurately reflect the site’s current role as a gateway site for the Mozilla Project and various Mozilla properties, along with being repository of official content. This site is the umbrella for all things related to Mozilla, and will give visitors a sense of being in a familiar place through not only the content and voice, but also by complementing and/or amplifying elements of the designs of other Mozilla properties.
Primary Goals:
Make the site reflect the personality of community
The community is global
The community believes that openness, innovation, and opportunity are key to ensure the Internet benefits everyone
Provide a design that’s less product focused and more information and engagement focused
Teach people that Mozilla is more than just Firefox; that Mozilla is the defender of the open web.
Move people into deeper levels of engagement. For example, move people from knowledge about a product like Firefox, to understanding why the values of open web are making better experiences online and in life.
Create a sense of unity, with diversity within a larger community
Produce templates that can reuse content across site without major changes
Make site usable on mobile and other devices
Key Design Attributes
In single adjectives:
Open
Important
Flexible
Conscious (not self-conscious, though)
Smart
Vibrant
Strong
Beautiful
Stunning
Alive
Modern
Helpful
Happy
Transparent
Concept 1
The content and purpose of the current Mozilla.org is cloudy. Is this site a portal for those who are looking for something else? What do we want users to take away from a visit to this site? Do folks understand this is an established organization with clear goals that effect internet users on a worldwide scale?
This design attempts to establish Mozilla at the center of all those ideas; global, trusted, and a progressive open community that wants each and every web user to understand their values and contribute in some way.
The brand identity of Mozilla was built on the idea of “Revolution,” but what if the “Revolution” was over? What if Mozilla was now the ideal: the utopia of software creation? What if Mozilla was the victor in all-things-internet? Can constructivism reinvent itself as modern movement?
This concept attempts to evolve the constructivist aesthetic into a postmodern style that would make artists like Robert Rauschenberg proud. Mixing oil paint, stenciled images of the Dino head, numbers that act as interactive elements, and various visual ephemera result in an extension of the Mozilla brand look-and-feel that plays homage to the assemblage and collage work the some of the finest modern abstract painters.
How can we make the learning experience of Mozilla as easy as clicking one button? Can this action also help to build upon the idea that all-things Mozilla are driven by the actions of the community?
This concept approaches the idea of a low-barrier entry as an interactive question that allows users new and seasoned to help shape content that matters. Visually, the look is a weathered take on the constructivism aesthetic.
Currently the project is in full flow and it looking fantastic. Whilst we wait patiently for it’s arrival, we have launched a new holding page to enable users to pre-register and get FREE access to the site and all it’s features.
The new page gives an immediate look and feel as to how bethemiddleman.com will look like. Features on the page include:
Member signup
I simple signup form that will alert users once the site goes live.
Beta users signup
To enable a bug free, feature rich website we want beta users to signup and help us make bethemiddleman.com to best it can be.
Press signup
We are encouraging any press interest to contact us directly about the project with this signup.
Information
Simple targeted ‘thickbox style’ popups details what the service offers to the different user groups.
Twitter feed
Bethemiddleman.com is twittering updates on the project and related news with the latest twitter featured on the page.
Simple targeted ‘thickbox style’ popups details what the service offers to the different user groups.
Commission saving calculator
A simple calculator that shows you roughly how much commission you’ll save with bethemiddleman.com by not paying estate agent fees.
A CSS framework can help you achieve rapid development of websites, web apps and mashups. It eliminates repetitive tasks while prototyping designs by using a pre structured CSS/XHTML grid-based framework.
Main features of good CSS Framework is to:
1) Rapidly speed up our development time
2) Very small file size
3) Good documentation
4) A clean grid structure.
You will need a basic understanding of CSS to enable you to utilise the full potential of your chosen framework.
The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem. The 960.css file itself is only 3.6 KB compressed.
Blueprint is a CSS framework, which aims to cut down on your CSS development time. It gives you a solid CSS foundation to build your project on top of, with an easy-to-use grid, sensible typography, nice-looking forms and even a stylesheet for printing. One of its main feature is performing a mass reset of browser default styles, offering a methodology to use for customizable layout grids and most important is that all elements are override-able.
jQuery UI includes a robust CSS Framework designed for building custom jQuery widgets. The framework includes classes that cover a wide array of common user interface needs, and can be manipulated using jQuery UI ThemeRoller. By building your UI components using the jQuery UI CSS Framework, you will be adopting shared markup conventions and allowing for ease of code integration across the plugin community at large.
Yaml (Yet Another Multicolumn Layout) focused on flexible layouts and offers column and grid based design elements for flexible, elastic or fixed layouts. You will need a license to use it.
The foundational YUI Grids CSS offers four preset page widths, six preset templates, and the ability to stack and nest subdivided regions of two, three, or four columns. The 4kb file provides over 1000 page layout combinations. Features include: Self-clearing footer, customization of width for fixed-width layouts, Supports fluid-width (100%) layouts and more.
Archive44.com is a fun little project I decided to do on the spur of the moment. It’s basically an archive of over 900 front pages of newspapers from all over the world on the day Barack Obama, the first black African American, became President of the United States of America. When you put over 900 front pages together you really get a sense of scale and importance this day was.
Econsultancy released an article on netbooks, their ever growing popularity and what they could spell for the future for web design. The stats were incredible and highlights why we should start to consider them when building new websites. Read the article below.
Netbooks are on the rise. The bare-bones laptops, which typically cost under $500 and are designed for web surfing and email, are increasingly the focus of major PC makers looking for growth.
Two of the leading netbook manufacturers, Acer and ASUS, expect to sell 12-13mn and 7mn units in 2009, respectively, leading Ari Allyn-Feuer of Ars Technica to speculate that 30mn might be purchased in 2009.
Obviously, netbooks are changing the market.
While many have remained skeptical about the real potential of the mobile internet and many web designers and online publishers have not felt the need to make their websites mobile-friendly, the numbers demonstrate that the netbook is for real. In fact, one might argue that when consumers can purchase a basic model for about the same price as a smartphone, the netbook is the mobile internet.
This raises two big issues for web designers to consider.
Screen resolution. Most netbooks have a 1024×600 resolution. The most widely-used screen resolution is 1024×768. While this means that web designers shouldn’t have to fret about the width of the pages they design, the increasing prevalence of widescreen monitors with higher resolutions is going to be problematic. Combined, 1280×800 and 1280×1024 have almost as much market share as 1024×600 and at some point it seems inevitable that 1024×768 will be passed by these higher resolutions.As such, designers will, sooner than later, have a familiar dilemma – how to create designs that maximize the space provided by increasingly popular large widescreen desktop monitors while not leaving a substantial audience of netbook users behind.
Processing power and memory. Most netbooks have modest processing power and a limited amount of memory (the most affordable netbooks come with 1GB of RAM). While this should be sufficient for most web browsing, the growing trend of pushing processing from the server to the client using AJAX and technologies like Google Gears could create problems since netbooks are not ideally suited to such burdens.Rich media applications, such as Flash, can also quickly strain machines with modest specs. An instructive experiment – open up several websites that use Flash video (i.e. YouTube) in separate tabs and watch the impact on memory usage.
As netbooks grow in popularity, web designers will need to weigh how much resource consumption they’re causing on the client side and how much rich media, such as Flash, they really should make use of.
The growing popularity of netbooks indicates that by the time the market reaches some sort of saturation point, there will likely be tens of millions, if not hundreds of millions, of netbook users.
That’s the type of audience smart designers won’t ignore and there are different approaches available to serve the netbook audience. The use of multiple websites (one designed for desktops and laptops with higher resolutions and greater power and the other for netbooks), for instance, is obviously not ideal. The use of fixed widths and designs that still display core content elegantly when other content gets cut off are probably more viable options.
Piggynap.com is the blog of my girlfriend Zoe who works in online marketing and SEO. A few months ago I set her up a quick WordPress blog to start blogging on, with a simple design and limited features. I felt that I was getting more proficient at building and tweak WordPress themes so I decided to get my knees dirty and have another crack at creating another theme.
Yes of course it does, I said… a beaming smile and an overly tight hug later, Piggynap.com left most satisfied while grasping a bar of chocolate. Heaven.
Let me know what you think. If you like it I may attempt a Free WordPress Theme for anyone to download… maybe, so be nice.
). Designs that have failed to fulfill the objective of the brief and work for the client. A successful design isn’t just made up of a few pretty graphics and a jazzy logo, it’s strategically planned to give the user exactly what they want. Within 5 seconds they need to know who you are and what you do. Secondly comes the every so important ‘Call to Action or CTA’.
