Ruby On Rails, Design, Simplicity, Web 2.0, Ajax, Mac and Tons of Pizza.

Web design is about designing

Posted by Massimo Sgrelli in Design - Web 2.0 - comments are closed

It seems pretty obvious, but it isn’t. I assure you that.
I’ve just read Amy Hoy article “Design is not about solving problems” on Slash7 and I agree with her. She focused on the proactive role in designing, blaming the reactive role that design could have. Design is not about solving problems.

But I’d like to go further, remarking the obvious: design is about designing. Understanding the domain language (as recalled by Ryan Singer ), sketching the whole project down, positioning objects on a surface to fulfill the need and then build a mock-up. That is design. Web design makes no objections to this rule, but for sure it adds some constraints to the general process: the format. If a web designer builds up the complete idea of a project, without worrying about the final format of his work, he will probably have to plan a big rework. That project must be implemented by a software developer, so the format of the designer’s final object is fundamental.

Too often people speak different languages:

They simply don’t fit and sometimes tools don’t help a lot. This is why the big challenge is to forget about Photoshop and start promoting tools closer to the bare HTML.

HTML is composed by simple shapes. You can easily draw a rectangle, a square, color them, even blur the background. And again, set the font family, the boldness. Adding some AJAX you can get awesome effects… in a simple way. They are good and easily implemented, but you must study the fundamental of web development, the fundamental of browser rendering dialect.

People can keep basing their design work on tools like Photoshop, but they have to keep in mind that software developers will need user interface design objects in bare HTML/CSS format

If you are use to apply your work through a specific set of tools, it’s very difficult to change your habits in a short time. To train myself in this way I change the tools I use quite often, but of course I have my favorite tools too. At the moment I love using office tools like Keynote or PowerPoint to design web applications. They help you draw simple shapes and words quickly, and they avoid you to design hard things to implement.

In any case, independently from the tools I like to use, I’ve learned to sketch my ideas on paper first. That’s absolutely faster and cheaper than any software tool on earth.
I make a drawing and then I take a picture of it with my (i)phone to record it on WhoDoes. The drawing phase starts days later.

Permalink

Ryan Singer: UI design on Rails

Posted by Annalisa Afeltra in Design - Ruby on Rails - no comments

How to break down the wall that has always divided developers and designers? Ryan Singer has the solution.

There exists a wall between the design and the development, in reality this is false perception deriving from the wrong assumption that the designer must create the graphics for an application. The designer must have a profound understanding of the product and can in theory shape and describe it.

The process that Ryan foresees is that the designer can, actually must operate at modifying the structure and the functionality of the application. The designer must also have the base knowledge of code that the application has been written in.

To give the designer other than the knowledge that he needs, an incremental learning approach, from this point of view the discussion simplifies in how much the designer in reality already know very simple programming languages (HTML, CSS…) from that they can derive the base concept of which is needed.

The first step is to have the understanding of the views, then the controllers and in the end the models (but this is not essential for the work of a designer).

If they can get to this level of mutual understanding it opens up another channel where the designer and the developer can communicate. In an ideal vision the designer is responsible for the views while the developer concentrates on the models and the controllers.

Ryan is know presenting a fraction of a controller from basecamp that he uses as an example to show the cooperation at the code level between the designer and the developer that is the only way to have satisfactory results.

Ryan concludes explaining how the designer can benefit from some architecture utilized from the developer. Like for example REST through which it is possible to define a base schema to access a resource.

Annalisa

Permalink

Don’t release new visuals without new functionality

Posted by Massimo Sgrelli in Design - Whodo.es - comments are closed

In the last months I’ve been working on a new release of WhoDoes our team project management software. It’s been a really exciting experience, where the mantra has been “learn from your users” and “study your data”.

Now it’s almost done! A new cool and simplified version of our tool is almost finished.

We worked a lot on the new user interface, believing since the beginning that user’s interaction with the design choices is a fundamental component of the product’s success. But design and interaction metaphor isn’t the only thing to keep under control.

I completely agree with Hannah Donovan , Last.fm’s head of creative, when she says:

... don’t release new visuals without new functionality. This is the important lesson we learned when refining the features we had released quickly. If the design needs an upgrade to make it more usable, there’s a chance that the functionality does, too. It’s much better to release these at the same time, and it will keep your users much happier. Nobody likes interface changes that appear to be unnecessary.

That’s exactly what I want to do in the next imminent release of WhoDoes.

You can find the whole article on .Net Magazine here .

By the way…

Many compliments to Dan Cederholm of SimpleBits.com , the winner of the Best Use of Accessible Design Award (.net magazine ).
Great man! We keep following your work :)

Permalink

Creating bubble tooltips.....

Posted by Annalisa Afeltra in Design - Web 2.0 - comments are closed

While trying to look for tips and tricks to make my web applications more interesting I came across an interesting article written by Alessandro Fulciniti . He uses javascript, css and a simple image to create bubble tooltips on web applications.

How it works:

Firstly the javascript, css and image must be saved in the same directory as the page.

It simply uses an image that is called from the css file, therefore this can be modified with an image that you prefer.

The following must be copied into the head section of the page to reference the javascript file and the javascript file BubbleTooltips must be copied into the same directory.

<script type="text/javascript" src="BubbleTooltips.js"></script>
<script type="text/javascript">
window.onload=function(){enableTooltips()};
</script>

If you require some links to be without the bubble tooltip, the following script should rather be used as it requires an id to be passed to it that specifies which link requires the bubble tooltip to appear.

<script type="text/javascript" src="BubbleTooltips.js"></script>
<script type="text/javascript">
window.onload=function(){enableTooltips("content")};
</script>

<span class="tooltip">
<span class="top">title of the link</span>
<b class="bottom">url of the link, max 30 chars</b>
</span>

<a href="http://whodo.es">Who Does</a> 

 <div id ="content"></div>

.tooltip{
width: 200px; color:#000;
font:lighter 11px/1.3 Arial,sans-serif;
text-decoration:none;text-align:center}

.tooltip span.top{padding: 30px 8px 0;
    background: url(bt.gif) no-repeat top}

.tooltip b.bottom{padding:3px 8px 15px;color: #548912;
    background: url(bt.gif) no-repeat bottom}

Web 2.0 time: never redesign buttons

Posted by Massimo Sgrelli in Design - Web 2.0 - comments are closed

There’s something that I really can’t understand about the web. Every time people design a new web application, they usually re-draw “buttons” using Photoshop or similar programs. This is very common especially in this Web 2.0 time, where anyone wants to have cool brightly buttons.

HTML provide us a full feature set of web controls and each of them can be used through a simple tag on a page.

Why don’t people like them?

Why do they need to change what’s actually working well?

I’m not a designer, but have to admit that it happens to me sometimes. The truth is that every time we design a new web site we partially waste our time in users confusing tasks. They gratify ourselves, not the end user.

Let me explain why. A user can learn everything, but I’m pretty sure that there’s something which he’s already used to. It’s the operating system he has chosen (or not) to install on his PC. The great part of the PC users have a Wintel platform and I suppose they know it quite well. In any case, if a user has chosen a different OS, he probably likes it and he knows what its basic user interface controls mean. They definitely know what a button is and how it looks like.

Every time we decide to re-design the application buttons we could confuse the users, forcing them to learn a new metaphor.

Permalink

Space Bananas

Posted by Joe Ferrari in Design - comments are closed

I love bananas. I love giant art installation. I love everything from the golden space age. Put all together and you’l have what they called the Geostationary Banana Over Texas, a 1,000-foot helium blimp in the shape of a banana into Earth orbit over Texas!

Permalink

Panton Colour

Posted by Joe Ferrari in Design - comments are closed

You-all know what is Pantone Colour, don’t you? But the one I’m talking about is quite a different “thing”. Verner Panton (without the final “e”) was a master of the fluid, futuristic style of ‘60s design which introduced the Pop aesthetic into all the objects of that period. His unmistakable style influenced designer for decades, and today it’s living a new gold era.

One of his most famous work, is called “Kurve”, and was originally a carpet. Today you can see the Panton Kurve as an amazing animation made by one of the most distinctive digital artist in the world, Jared Tarbel

Permalink

What is Design?

Posted by Joe Ferrari in Design - comments are closed

When we think about design we usually think about a form of art or about a new complex use of design tools and/or expression. This is evident especially in the last years of multimedia and web explosion, in which everybody has been able to produce a piece of design, in form of web pages, multimedia applications and videos. In my opinion, it’s important to make a clear distinction between the two areas of human expression.

Design is essentially a rational, logical, sequential process intended to solve problems.

Art gives you questions when you already have solutions.

Yes, design like a shared activity just as art is. But the nature of design is much more similar to technology. Art is an application of human creativity that has some form of appreciative value, usually on the basis of aesthetic value or emotional impact. Much about art is controversial.

Design is systematic as it involves the analysis of problems in our physical environment, and the transformation of findings into appropriate and usable solutions.

Designers give form to products, interiors, and visual communications, and satisfy the functional, psychological, and aesthetic needs of users. For the term “design process”, we can also read “problem-solving process”.

In this direction I want to share with you some of the newest forms of digital design, intended to “solve” content complexity in a clear, simplified form. Not a complex, heavy visuals to answer a poor, simply idea. It’s not important what language or software you are using.

Just keep it clear and light.

Permalink