Our thoughts in real time
January 30, 2012
January 24, 2012
January 18, 2012
January 02, 2012
Typography: An Essential Element of Modern Website Design
Typography (from the Greek words τύπος(typos) = form and γραφή(graphy) = writing) is the art and technique of arranging type in order to make language visible.
wikipedia
Typography is an under-appreciated art form which is used most often and probably understood the least. Typography is of high importance for printing and screening, as well as for websites. Some of you are probably wondering just why I am making such a big deal about typography and why should folks in the web industry, like us, care about typography. Let me tell you this: "web design is 95% typography".
Some may disagree with this statement, like this post that comments: "Type is only 90%!!". So it is either 90 or 95 percent, I am not here to quibble. But I believe that you would agree with me that typography plays a major role in web design.
Good typography not only helps readers go through the site content with ease, but also provides visual elements to the design of the website. The following websites in my opinion make outstanding use of typography:
http://www.mcfarlanechangemanagement.com.au/home.php
Now that you have seen how beautiful typography can enhance a website, I bet you would like to try it on your sites, too. But before we go running off putting together a great new design, let's take a closer look at some of the techniques involved in arranging types.
Typeface Selection
Since we are talking about typography, it is only natural that we should include the selection of the font.
Each typeface conveys a different message and is suitable for different purpose. Some are better for hard-copy printing while others are better for online reading. It is important that you consider how you want to portray your website to the readers. Then, you should choose the typeface that enables you to do so.
Today, I am only touching on the surface of each aspect of typographic elements so I do not go on at length to explain the difference between serif and san serif. However, you may want to have a look at this article which gives further explanation on type selection: http://ilovetypography.com/2008/04/04/on-choosing-type/
Before CSS3 came into the picture, the choices of typeface available for the web were very limited. Now, we can use @font-face to implement a number of different typefaces on our website. Personally, I like to use the Google web font service; although the choice maybe limited, it is free of charge.
Before we go on to the next technique, here are some more tools that can be handy when choosing typefaces for your web:
Sizing
Next we have to think about the appropriate font size for our purpose. When choosing the font size, you need to keep in mind that the words must be legible. I would recommend keeping the size at the minimum of 10pt. Anything below that would be tough to read, especially, for older readers.
Apart from the legibility issue, we should also consider the overall hierarchy as well. For example, If your site has a main header, you would want to use a bigger size text for the main header ( header tag <h1>../<h1> ) in order to grab the user's attention, while your footer fonts should be smaller as the footnotes are less important. However, you may get creative and tweak some of these rules around if you are after a modern feel. This website Coudal Partners is a good example of this.
Leading
Leading is the space between lines of text. I am sure you have heard of "single-space" or "double-space" when working on MS word document report. It is pretty much the same thing. The word, leading, in this particular case has its origin in the old days when lead strips were used in arranging letter blocks on the printing press to add a vertical space between each line of text.
In CSS, we use the line-height property to control the leading of the text. Most browsers set a default value between 1.0-1.2 for line-height. This can be overridden to adjust the leading to suit your purpose.
Tracking
Tracking is oftentimes confused with kerning; I have to admit that I used to get these two words mixed up. Tracking refers to the spacing of a group of letters. In CSS, tracking is also known as letter-spacing. The amount of letter-spacing can affect the legibility and readability of the text. A tight letter-spacing can be very hard to read and make the reader feel tense.
Kerning
Unlike tracking, kerning refers to the process of adjusting the spacing between two individual characters. Most fonts have their default kerning value but, in some cases, there is still a need for adjustment.
Here is a little game that can help you appreciate the importance of kerning: http://type.method.ac/
Since kerning involves a particular pair of characters, there is no specific CSS rules that directly handle kerning. However, there is a kerning.js , that enables you to set your own CSS rules and makes kerning a little easier.
I have covered only a tiny area of typography. For further reading, there are many typography articles online. The following is a list of some of the best typography blogs.
- http://ilovetypography.com/
- http://www.alistapart.com/topics/topic/typography/
- http://nicewebtype.com/
- http://fontfeed.com/
Remember, "never stop learning", and "practice makes perfect".
December 21, 2011
December 04, 2011
November 29, 2011
November 28, 2011
JQuery DataTable Plugin Pagination
One of the most common tasks when displaying data through an HTML table is to allow the user to manipulate data within the table. Displaying data on a grid can involve many different operations (retrieving, sorting, live editing, search). Using AJAX to dynamically fill the table requires even more work since the application (in this case, javascript code) has to convert JSON/XML/TEXT data to an HTML element. Each of these tasks can involve more or less time in order to be completed, and of course, tested.
Rather than starting the implementation from scratch I decided to look around for a jQuery plugin able to perform all the necessary operations on a grid (retrieving, sorting, searching, exporting).
After trying out different plugins I ended up choosing the DataTable plugin.
From the first look at the examples on the official website (http://datatables.net/) the plugin looked extremely easy to use and flexible to customize (data sources, data type detection). Some of the key features are listed below:
- Variable length pagination
- On-the-fly filtering
- Display data from almost any data source: DOM, Javascript array, Ajax file and server-side processing (PHP, C#, Perl, Ruby, AIR, Gears etc)
- Dynamic creation of tables
- Ajax auto loading of data
- Custom DOM positioning
- Single column filtering
- Sorting column(s) highlighting
- Extensive plug-in support
- Sorting, type detection, API functions, pagination and filtering.
Most of the features of the plugin are enabled by default so the developer can focus on the real problems (business logic). Here is a “zero configuration” example:
HTML Code:
(create your own table within your html page something like this):
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
<thead>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</thead>
<tbody>
<tr class="odd gradeX">
<td>Trident</td>
<td>Internet Explorer 4.0</td>
<td>Win 95+</td>
<td class="center"> 4</td>
<td class="center">X</td>
</tr>
<tr class="even gradeC">
<td>Trident</td>
<td>Internet Explorer 5.0</td>
<td>Win 95+</td>
<td class="center">5</td>
<td class="center">C</td>
</tr>
…
</tbody>
</table>
Remember to include the javascript plugin file:
<script type="text/javascript" language="javascript" src="js/jquery.dataTable.mins.js"></script>
and finally call the datatable function:
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$('#example').dataTable();
});
</script>
You can download this example from github (git://github.com/GrioSF/datatablepaginationplugin.git).
Now that you have an idea (of course you can take a look at the documentation), we can now move on to the real topic of this post, implementing custom pagination controls for the DataTable plugin.
Of course, the plug-in lets the developer to build his/her own style and logic for pagination. Customizing the pagination was the hardest part among all the possible plug-in’s operations I had to perform.
I created the following pagination style (the code on github will provide css code to reproduce the structure but not the exact style):
The component contains 3 different parts: a previous button, an information field and a next button.
I decided to modify one of the examples provided on the website in order to create my own plug-in.
The code is divided into three parts:
- Pagination plug-in: html structure and behavior
- Page information plug-in: to obtain information about the current page index
- Code to initialize the pagination html components
-
Pagination plug-in: This is the core of the new pagination controls. This code will create HTML elements and logic to handle the previous and next buttons:
/**
* Datatable plugin pagination style
*/
$.fn.dataTableExt.oPagination.extStyleLF = {
/*
* Function: oPagination.extStyle.fnInit
* Purpose: Initalise dom elements required for pagination with a list of the pages
* Returns: -
* Inputs: object:oSettings - dataTables settings object
* node:nPaging - the DIV which contains this pagination control
* function:fnCallbackDraw - draw function which must be called on update
*/
"fnInit": function (oSettings, nPaging, fnCallbackDraw) {
/*
* code to create pagination buttons
*/
nPrevious = $('<span />', { 'class': 'paginate_button previous' });
nNext = $('<span />', { 'class': 'paginate_button next' });
/*
* code to create pagination information field
*/
var navigationLabel = 'Page <span class="pageIndex">#</span> of <span class="totalPages">TOTAL</span>';
navLabel = $('<div />', { html: navigationLabel, 'class': 'navigationLabel'});
$(nPaging)
.append(nPrevious)
.append(navLabel)
.append(nNext);
nPrevious.click(function () {
oSettings.oApi._fnPageChange(oSettings, "previous");
fnCallbackDraw(oSettings);
}).bind('selectstart', function () { return false; });
nNext.click(function () {
oSettings.oApi._fnPageChange(oSettings, "next");
fnCallbackDraw(oSettings);
}).bind('selectstart', function () { return false; });
},
/*
* Function: oPagination.extStyle.fnUpdate
* Purpose: Update the list of page buttons shows
* Returns: -
* Inputs: object:oSettings - dataTables settings object
* function:fnCallbackDraw - draw function which must be called on update
*/
"fnUpdate": function (oSettings, fnCallbackDraw) {
if (!oSettings.aanFeatures.p) {
return;
}
/* Loop over each instance of the pager */
var an = oSettings.aanFeatures.p;
for (var i = 0, iLen = an.length; i < iLen; i++) {
//var buttons = an[i].getElementsByTagName('span');
var buttons = $(an[i]).find('span.paginate_button');
if (oSettings._iDisplayStart === 0) {
buttons.eq(0).attr("class", "paginate_disabled_previous paginate_button");
}
else {
buttons.eq(0).attr("class", "paginate_enabled_previous paginate_button");
}
if (oSettings.fnDisplayEnd() == oSettings.fnRecordsDisplay()) {
buttons.eq(1).attr("class", "paginate_disabled_next paginate_button");
}
else {
buttons.eq(1).attr("class", "paginate_enabled_next paginate_button");
}
}
}
}; -
Page information plugin (provided by the official website): this code is an helper for the plugin so the application can easily retrieve information about pagination (current page, total number of pages):
/**
* Datatable plugin page information
*/
$.fn.dataTableExt.oApi.fnPagingInfo = function ( oSettings )
{
return {
"iStart": oSettings._iDisplayStart,
"iEnd": oSettings.fnDisplayEnd(),
"iLength": oSettings._iDisplayLength,
"iTotal": oSettings.fnRecordsTotal(),
"iFilteredTotal": oSettings.fnRecordsDisplay(),
"iPage": Math.ceil( (oSettings._iDisplayStart + oSettings._iDisplayLength) / oSettings._iDisplayLength ),
"iTotalPages": Math.ceil( oSettings.fnRecordsDisplay() / oSettings._iDisplayLength )
};
} -
Code to initialize html components:
$(document).ready(function() {
var oTable = $('#example').dataTable({
"sPaginationType": "extStyleLF",
"bAutoWidth": false,
"fnDrawCallback": function () {
var length = this.fnGetData().length;
if (length <= this.fnPagingInfo().iLength) {
$(this).parent().children(".dataTables_paginate").hide();
}
$(this).parent().find(".dataTables_paginate .navigationLabel .pageIndex")
.text(" " + this.fnPagingInfo().iPage + " ");
$(this).parent().find(".dataTables_paginate .navigationLabel .totalPages")
.text(this.fnPagingInfo().iTotalPages);
},
"sDom" : '<"clear">ilprtp'
});
});
As you can see, a lot of code is needed to customize the pagination controls (compared to other customizations) but the official website and the forum contains a lot of useful information. In addition, the documentation offers good examples to use as a starting point. I highly recommend the JQuery DataTable plug-in for your tabulation needs.
Giuseppe
November 19, 2011
Why Things Go Wrong: A Simple Programming Problem
Much of programming is writing code with an obvious solution, it's being a code monkey. You lay things out, you move them around, you wire it up, but you don't really need to stop and think. I'd estimate that everyone is about equally good at this. But some of the work is also spent solving problems you've never seen before. This is where bugs are introduced, bad decisions are made, schedules are thrown out, and things go wrong. These problems are the really defining part of being a great programmer.
I think understanding the hidden complexites of seemingly minor problems is important in understanding programmers. Studies conducted starting as far back as the 60's have shown that most all developers will complete the same problem in a similar amount of time. In fact the best developers are about 2 to 3 times faster than average and the worst are 2 to 3 times slower. But the best developers will have about 1/10 as many bugs in their code as their average counterparts. In fact, when a restraint was placed on the allowed number of bugs, the best developers were 20 times faster than the average developer.
But why is that? Well, it's hard to explain without giving an example, so I'd like to present a case study of one such problem. I picked a problem that was easy to understand and small in scope. It's a real problem I came across and I remember it well because I thought it'd make a great interview question, if only it was even smaller in scope.
(On a very interesting tangent, the same studies have shown that the best developers make 30 to 50 percent more money than the average. Keep that in mind when interviewing and hiring, if quality is a concern, you get 20 times the speed for 1.5 times the cost. But the business sense of your typical developer is a topic for another day.)
Trying to solve this problem for yourself is probably the best way to fully understand the thesis of this article. I encourage you to work on it yourself before reading my solution. If you're not a programmer, you can solve it with pen and paper, that's how I did it.
So without further ado, I give you my case study of great programming.
For full disclosure, this problem was solved by another programmer, let's call him Adam. He's one of those great programmer types I mentioned above. I actually solved it and then got a merge conflict because Adam had already done the work. I very much enjoyed reading his solution to the problem, as it was very different from mine yet equally good. So, sadly, the below code never made it to production, as often happens, but I'm glad it can find some use here.
The problem:
You have an unknown number of video streams (we'll use red boxes instead) that each have the same unknown width and height (aspect ratio). They're in a rectangular container that also has an unknown width and height. You want to scale the video streams to maximize the surface area they take up in the container.
For instance, here's a red box in a container:
Or if there were 5 of them, you'd want this:
The Solution:
Let's dive right in. We'll be using everyone's favorite programming language, Javascript.
First off, let's define the variables we're working with:
W, H: the width and height of the containerw, h: the starting width and height of a red box
n: the number of red boxes
m: the multiplier (the amount to scale the size of the red box by)
and, to keep the javascript police off my back, to transform my pseudocode into real code, let's do this:
var floor = Math.floor;
Ok, so our function will have known constants for W, H, w, h, and n. They're unknown right now, but they will be the input. What we really want to solve for is m, the amount to scale each stream by.
what does m equal?
Well, we know for a given m:
floor(H/(h*m)) * floor(W/(w*m)) is the maximum number of red boxes we can fit inside the container
So we want the largest m that satisfies:
floor(H/(h*m)) * floor(W/(w*m)) >= n
Now we're getting somewhere. But as you can see, there are an infinite number of m that will satisfy:
floor(H/(h*m)) * floor(W/(w*m)) = x, for any constant x.
For example, let's say H = W = h = w = 1. And x is 1. Then:
floor(1/m) * floor(1/m) = 1
Which means m has an infinite set of solutions, namely, (1/2, 1], that is, all real numbers from 1/2 to 1, including 1 but not including 1/2.
This seems like a troubling problem. An infinite set of solutions is not what a programmer yielding loops as a tool wants to hear. But if you consider it for a moment, you'll realize we don't care what m is exactly. In fact, we just want the value in the set with the largest m, since they produce the same x anyway. In fact we know that:
floor(H/(h*m)) is always an integer, and,
floor(W/(w*m)) is always an integer.
So what we really want to solve is all of the possible x values regardless of m, take the smallest x that's greater than or equal to n, and then take the largest m for the given range of m that yields the accepted solution.
I'm throwing a lot of math around, so let me break it down a bit. Think of w and h not as sides of a rectangle, but as a grid, or a spreadsheet, starting at the top left corner of the container. Each row is h units tall and each column is w units wide. So as you multiply w and h by m, or scale the size of the columns and rows proportionally, a different number of rectangles in your grid will fit inside the container. If you can fit 9 red boxes inside, then there are an infinite combination of different sizes of w and h that will also result in 9 red boxes. But we don't have to care about that, we only have to care about about the largest size that can fit 9 red boxes inside. And the largest size of w and h that accomplishes that will always occur when we stretch the grid until a certain number of columns fit perfectly in the container OR a certain number of rows fit perfectly.
So now we have a set of all possible solutions for x. It is the union of solving for when H/(h*m) equals an integer or when W/(w*m) equals an integer. Or, the following union:
k*floor(k*(W*h)/(H*w)) U k*floor(k*(H*w)/(W*h))
You might notice that the solutions on either side of the union are not mutually exclusive. We will need to find the value for each set that's the smallest value greater than or equal to n, and then we will need to take the one with the largest m.
That's it, that's the solution. We need to solve for both sets and then take the largest of the two m values. I can't see how to simplify it further. If you can, please write a comment below, and I'll update the post.
Ok, so let's code it up.
First, let's define the structure of a container and stream object that our function will take as input:
var container = {
width: 0,
height: 0
};
var stream = {
count: 1,
width: 0,
height: 0
};
And now let's solve for m.
var layoutStreams = function(container, stream){
var calculateMultiplier = function(__container, __stream){
// get best solution when grid extends to right side of container
var rowSolution;
var k = 1;
while (!rowSolution) {
var nBoxes = k * Math.floor(( k * __container.width * __stream.height )/( __container.height * __stream.width ));
if (__stream.count <= nBoxes) {
rowSolution = __container.height / (__stream.height * k);
}
++k;
}
return rowSolution;
};
var invertContainer = {
width: container.height,
height: container.width
};
var invertStream = {
count: stream.count,
width: stream.height,
height: stream.width
};
var rowSolution = calculateMultiplier(container, stream);
var colSolution = calculateMultiplier(invertContainer, invertStream);
var m = (colSolution > rowSolution) ? colSolution : rowSolution;
// ------------------------------------------------
// now use m to layout streams
// ------------------------------------------------
};
How will you layout your streams? Well, I'll leave that as an exercise for you, but I'll provide the most primitive of solutions, which is to start in the top left and go left to right, top to bottom.
..................
// ------------------------------------------------
// now use m to layout streams
// ------------------------------------------------
var streamDim = {
width: Math.floor(stream.width * m),
height: Math.floor(stream.height * m)
};
var grid = {
cols: Math.floor(container.width / streamDim.width),
rows: Math.floor(container.height / streamDim.height)
};
var eleContainer = <your container>
var streams = [];
for (var i=0; i<stream.count; ++i){
streams[i] = document.createElement("div");
eleContainer.appendChild(streams[i]);
streams[i].style.width = streamDim.width;
streams[i].style.height = streamDim.height;
streams[i].style.position = "absolute";
// primitive layout strategy
streams[i].style.top = (Math.floor(i / grid.cols)) * (streamDim.height) + "px";
streams[i].style.left = (i % grid.cols) * (streamDim.width) + "px";
}
...................................
And that's it. Here's a demo you can play with, and you can grab the source code right off of this page if you'd like. (if the iframe doesn't load, you can go to page directly). Or grab the demo code from github.
Please send hate mail to my secretary, ptubig@grio.com. Any other comments can be sent to me, griddle@grio.com.
November 09, 2011
November 07, 2011
Android Pattern Lock on iPhone
I'm a loyal user of iPhone. I've been using it since its first version and now I'm on 4S. Though I'm staying in iOS camp and don't have any intention of moving, I occasionally get the urge to test out and see what's out there. That's the reason why I convinced myself to own and play with Dell Streak 5" phone and Google Nexus S. They are both smart smart-phones. But it's hard to pick their pros and cons by simply "playing" with it. You've got to use it. Daily. For everything including surfing, speed dialing, social-networking and games. Everything. And that's something that I didn't get a chance to do until last summer when I was traveling and in need of an unlocked phone. I could make my iPhone work (don't ask me how) but thought I'd give an Android phone a real kick.
So, I spent 3 weeks using my Dell Streak full-time. I'm not going to tell you about how bad or good Android phone is compared to its counterparts, or discuss my constant efforts to find for an outlet to charge the phone. But I do want to talk about one feature that I used a lot but can't find on iPhone: It's the well-known pattern lock feature. If you've never seen it, here is a screenshot.
The idea is simple. Rather than entering 4 digit PIN, you connect the 9-dots (3 by 3) presented on the screen to form a secret pattern. The number of dots connected to form a pattern can be as many as the available dots on screen. In the case of Android lock, the max is 9 dots and the min is 4 dots. In my 3 weeks of usage, I think I can unlock faster using pattern lock versus using PIN lock. And that's when I started to wonder why in all the apps that I've ever used on iPhone, none of them provides this type of lock. Mint is one of my most frequently used apps. I'd love to see it using pattern lock instead of pin lock. It will save me about 0.5 second every time I use the app. Yeah, that's a very valuable 0.5 second.
So, I set aside 2 hours of my time and created a component that provides the pattern lock feature. If you're an iOS developer, feel free to use it in your app. Mention Grio if you feel indebted to us. Lock your user's data more securely. If security is less of your concern, do it for the sake of giving users more options.
The code is pretty self-explanatory. The main class is DrawPatternLockViewController. You can set the matrix size by changing the following constant:
#define MATRIX_SIZE 3
In the sample app, there's a Lock button, which will bring up the pattern lock screen.
It's very easy to use the component. Create an instance, register callback and you're all set. Here's the sample code:
DrawPatternLockViewController *lockVC = [[DrawPatternLockViewController alloc] init];
[lockVC setTarget:self withAction:@selector(lockEntered:)];
[self presentModalViewController:lockVC animated:YES];
When the user is finished drawing, lockEntered will be called. You can take a look at that function in PatternLockAppViewController. It will compare what user entered with a hardcoded pattern. In this implementation, I store the pattern in an NSString. If you replace the dots with series of numbers (1, 2, 3, ...) from top left moving in the right direction downward, you'll see the dots to be similar to the keypad on a phone. And a pattern string stores those numbers by concatenating them in proper order. So, if you draw a pattern by connecting the dots along the edge clockwise starting from top left toward bottom right corner, you'd end up with an NSString with value @"0102030609". You can easily change the way you store and interpret a pattern by changing getKey function in DrawPatternLockViewController.
Note: The dot was designed by Grio's talented designer, #Yui. This project was written using iOS 5 with ARC on. You can download it here.
November 02, 2011
Dieter Rams’s Ten Commandments
You might not be aware of it yet, however SFMOMA (the San Francisco Museum Of Modern Art) is currently hosting Dieter Rams’s “Less but Better” product exhibit.
You might also not be aware of who Dieter Rams is, since he is not directly related to the software industry.
Indeed, for almost 40 years Dieter Rams was Chief of Design at Braun’s: he designed record players, razors, radio sets, etc.
He didn’t have much to do with computers.
So why talk about him?
Well, he is one of the most prominent design engineers of our era. His designs have affected many fields, as well as influenced and inspired many designers. This includes Apple’s Vice-President of Industrial Design: Briton Jonathan Ive.
A few seconds looking at the designs and the similitudes are striking:
|
|
|
|
iPhone Calculator App. |
ET 66 calculator, 1987, by Dietrich Lubs for Braun |
Dieter Rams work is remarkable in that he was not just an innovator; he was also an aggregator and a simplifier, putting words to ideas. He strived to do better with less.
“Surfaces that were without apology, bold, pure, perfectly proportioned, coherent and effortless” – Jonathan Ive.
Over the years, Rams was able to refine, and then define his design ideals. They are summed up in his Ten Principles for good design (also referred to as his Ten Commandments):
- Good design is Innovative.
- Good design makes a product useful.
- Good design is aesthetic.
- Good design makes a product understandable.
- Good design is unobtrusive.
- Good design is honest.
- Good design is long lasting.
- Good design is thorough, down to the last detail.
- Good design is environmental friendly.
- Good design is as little design as possible.
Ten principles that follow themselves.
I could dig in to each principle, however that is not the object of this blog article… Those principles are quite self-explanatory, since most of those ideas are the writ form of notions we all have. Some can also be correlated to familiar terminologies (ie. KISS).
In short, Dieter Rams started realizing in the 80’s that design engineering was a mess – “an impenetrable confusion of forms, colors and noises”. Being an important contributor to that mess, he asked himself a question we should ask ourselves daily when we create: “Is my design good design?”
This realization is common to many fields, including the software industry. The spreading of the Web changed our society. More companies, more engineers, more clients, more products, etc. Boom! Within a short decade we have a world of new industries.
To be able to keep as much of an understanding as possible, we devise paradigms, design patterns and frameworks, all so that we can find some common understanding; an understanding not just among programmers (see for example Brad’s article about naming conventions: http://blog.grio.com/2011/09/name-recognition.html) but also for the public. Users do not want to feel lost.
Website designs evolve just as much as product designs do, with a notable difference: Users zap through pages. They read this, tweet that. And thus the design has slowly evolved towards more simple layouts, where at a glance, they know what is where:
- Google: Text field with a “Search” button.
- Tweeter: 140 characters.
- Amazon: 1-Click.
One function, sharp edges, rounded corners.
Apple’s designs have been following those ideas for more than a decade now, however those principles were really only pushed to their first extreme with the iPod in 2001.
|
|
|
It’s simple, to the point, does it’s job, looks nice, and looks solid (even in pink).
Just as the users started realizing that they were looking for familiar landmarks on websites, Apple designs got accessible, keeping only those landmarks. And obviously it works.
So what am I getting at?
We are aware of these ideas: Functionality, simplicity and reliability. We have to contend with these issues daily. We are aware, but not all the time and not with such a precise understanding.
Dieter Rams’s Ten Principles (as mentioned earlier) are an aggregation of those ideas that he put into writing; ideas we can all understand.
So don’t hesitate to refer to that list once in a while, it might help you figure out a flaw, or some enhancement you could make to your websites, apps and/or architectures.
From a visual perspective, designs inspired by Braun or Apple products, products that are seen and understood by a majority of people, will only be made more understandable by their familiarity.
Don’t hesitate to take the time to check out the Dieter Rams expo. Observe his and his team’s work, with the ten principles in mind. Look at how the products are functional, aesthetic, detailed; how it is not fashionable and therefore never out of style.
Running until the 20th of February 2012.
Ten Principles for good design: http://www.vitsoe.com/en/gb/about/dieterrams/gooddesign
