illustrator for webdesign

If you need some tutorial in these days, check this out







Pact with the devil: use facebook social features to promote your interests

Facebook Social Plugins

Social plugins let you see what your friends have liked, commented on or shared on sites across the web.

More on Facebook social-promotional tools.

The Social Design Guidelines helps you understand why you should build great social experiences as well as how to use Facebook Platform effectively to create them. Social design is a product strategy that builds upon users’ trusted communities, encourages conversation between them and ultimately creates a stronger sense of identity for everyone.

Demokratisierung – voll im Trend?


Die Campact Ideenwerkstatt 2011

Von den Entwicklungen in Nordafrika und dem Nahen Osten bis hin zu „Occupy …“ – es wackeln nicht nur die Stühle langjähriger Despoten. Was kann oder sollte dies für die Entwicklung in Deutschland und für Campact heißen? Diesen Bogen wollen wir mit der diesjährigen und inzwischen fünften Ideenwerkstatt zu schlagen.

Was ist Campact?

Wie Campact wirkt, signalisiert schon der Name: Campaign & Action. Campact organisiert Kampagnen, bei denen sich Menschen via Internet in aktuelle politische Entscheidungen einmischen. Wenn Wirtschaftslobbyisten Gesetze zu ihren Gunsten drehen wollen oder in Regierung und Parlament die Meinung der Bevölkerung nicht gehört wird, ist Campact zur Stelle.


Error: Feed has a error or is not valid

Error: Feed has a error or is not valid

Error: Feed has a error or is not valid

Social funding, banking

Here I made a very quick research about how donation or money issue can be treated in a social network way
First one is a social fund raising platform then zopa that is a new (in italy not in uk) platform for the social lending, give it a look on how they communicate trust and explain some delicate stuff like “give me your Money and trust me”

And to finish other 5 alternative social fundraising platform alternative to Facebook causes

Timeline tools

If you want to embed or need a timeline (for a roadmap or found raising ) may be this two tools could be useful


I read about something in the past but now I found a collection of some of the best crowd funding platform

Social Gaming

I guess that a playful/game approach would be useful in the social communication, to wider your audience, seed some knowledge etc etc and more important to change the traditional “ooh, poor children” approach.

I think Mayu gave us a nice input, may be not a video games, there are several kind of games, like quiz (learn fonts with or social:

Waze, a social navigator, uses games to improve their maps
(I tried it and is very fun:)

Gogobot, a social traveller platform, uses games to get more review from users

Below a post about social gaming for Social

Yes, it’s just an input, may be will not be a video game to save africa, or maybe a day “millennium news” will be an iPhone app, but don’t exclude anything in this post brainstorming process.

Mapping News

Take your time to visit this awesome website, a rss base website that filter all news and create a screen map relating news size with its relevance.
You can also search for a topic and watch which and how many are the news related to the topic:

Interactive Timeline about the Arab Spring

Sehr einfach verständliche timeline in die man “reinclicken” kann und dann zu den jeweiligen Artikel weitergeleitet wird…”einfach” aber genial!


Eine Website auf der Rollstuhlfahrer ganz einfach sehen können und auch mit anderen Plattform-Usern  teilen zu können.

Hat mich sehr an unser Projekt erinnert, wie einfach aus der Verknüpfung von bestehenden Tools, eine so ganz neu Idee entstehen kann, die so wahnsinnig sinnvoll ist, klasse!!!

Request list for Renata

Please drop here your request as a comment

Gemeinschaft bewegt

Ich fand’s faszinierend wie solche Bilde einen so berühren können, vielleicht weil eine Gemeinschaft entsteht aus sich völlig fremden Menschen?! zum Video

Web Trend Map

Karte in der Verbindung von Internetseiten dargestellt werden.

Hier ein Video

Auf der Seite findet man auch andere interessante Beispiele für Information Architecture.

Design Thinking

Video in dem Erik Spieckermann von einer neue Art des Denkens spricht und den “Designer” dazu auffordert, beim entwickeln von etwas “Neuen” nicht beim Problem sondern bei der Lösung anzusetzen um das Problem damit nicht einzukreisen sondern “Denkregeln” zu durchbrechen.

Fantastic video collage on learning, life in our culture.

A great work  great in multiple ways – storytelling & style, message, technique …

its worth watching from beginning to end and to open the browser window to the maximum.

Technically it is made with – the missing link between video and web. Read more about how it is made (not only technically).

Design for Participation

After the discourse of Prof. Susanne Elsen on the ideas and practices of Participation, i thought in which ways design can help to foster participation. Here is my provisory list:

Key concept

– purpose / target
– design disciplines
– examples

1. Understanding
- make the complex understandable / enlightenment
- Information Design, Story Telling
- Otto Neurath’s & Gerd Arntz‘s Pictoral Statistics/Isotype, The Story of Stuff, Information Is Beautiful

2. Tools and Plattforms
- Tools and Plattforms for deliberation, participation and (self)organization
- Interaction Design
-, Liquid Democracy,,, Dialog Platform of the World Social Forum 2012

3. Identification
- (emotional) attractivity and associations
- Brand Design, Visual Design
- the brand Greenpeace and its imagery, the PACE flag, the Anonymous mask

4. Strategic Communication
- change patterns of thought and of behavior
- Strategic Design / Campaign Design / (Visual) Rhetorics
- Guerilla Communication, eg. Yes Men, Green my Apple

Most of the best works combine all of these aspects in a synergistic ways.

Recommended reading by Susanne Elsen:
- (neu) polis – Magazin für Urban Development Heft 2/2011 „Beyond Institutions“
- (Klassiker) Alinsky, Saul: Call me a radical oder auch Anleitung zum Mächtigsein
- (Community Organizing & Development): Ife, Jim: Comunity Development; Gamble&Weil: Community Practice Skills; Rubin & Rubin; Community Organizing
The slides of her lecture.

Regarding design for sustainability and society i recommend the book “Design Activism” by Alastair Fuad-Luke.


Card Sorting & Mapping

Eva / Raphael / Simone

How to change your blog layout


A little recap about how to edit and save successfully your style.css file:

Basically you need an application (cyberduck or filezilla) to access you blog (remote) folder. Once you’re logged in, locate your folder and then your css file.
Now enjoy, inspecting your website with web inspector and then making the changes and saving them in Espresso / TextWrangler /Dreamweaver.


Part #1 Install the application to access blog (remote) folder:
1. install cyberduck of filezilla

Part #2 Log in your blog (remote) folder:
1. Connect to the following address, and insert your unibz log/pwd
2. Then navigate to the folder
3. edit your style.css with Espresso / TextWrangler /Dreamweaver (in Cyberduck you can set them as default text editor in the preferences pane, the same in Filezilla, clicking the right mouse button on the file and then “modify”, then choose your favorite app).

Part #3 Skin your website
1. Enable the Inspector in Safari or Chrome
2. Right click on the element you want to change in your blog and click “Inspect element”
3. Watch in the sidebar the css class and the line where this class is wrote.
4. Open your style.css, locate the class/line number, change the style and save.

Well, it’s a little bit tricky / reversal engineering…but this is state of the web design! So, have a nice wek end!

The Social Semantic Web in 2011 / Part 2

The “slides” from the lecture are online as a list on diigo

How to add your favicon in wordpress

1. Create a new file in Photoshop 16px x 16px at 72dpi
2. Design your favicon
3. Save as ICO if possible and the jump to step 6.
4. Click “File > Save for Web” and save as JPG
5. Upload and convert your 16×16 jpg at
6. Now open your blog dashboard and install the “All in one Favicon” plugin
7. In the left sidebar, under “Settings”, click “All in one favicon” and upload your ICO file.
8. Enjoy your new favicon!

From Teatro della Memoria to Information Architecture

Giulio Camillo Teatro dell Memoria

Giulio Camillo (ca. 1480–1544) had the idea to map all world knowledge of his times in oder to make it accessible in a well-structured way. He designed a theater, which served as a basic structure to position entities of information in so that their interrelations are visualized. He used symbolic paintings to represent each information entity.

Contemporary Information Architecture (IA) is the art and science of structuring and labeling information in a way that it can be used by humans for many specific purposes (in specific user scenarios). One useful first step in the process of IA is card sorting, which can be used in various ways. It a useful first step towards the mapping of information and to the creation of categories, tags and other type of metadata. boxesandarrows is a good magazine on practices and methods of this discipline.

Icons are used to represent actions (eg. print), applications, categories and more. These are useful tutorial on how to design icons: 7 Principles of Effective Icon Design has something to say an both the conceptional and the technical-formal aspects, while the Icon Design Tutorial: Drawing A Pencil Icon fucusses on drawing. If this is not enough, you find 50 Excellent Icon Design Tutorials here. A Favicon is a mini-icon, which is used in the adress bar of web browsers to represent a web site. Find ourself a tutorial.

◙◙◙◙◙ Ten Comandaments of B2 web design ◙◙◙◙◙


Start to work in a very clean way, when you’ll handle hundreads of files, will be very important to keep a clean folder structure
. Put the images in the “images” folder
. If you have more css move them in the “css” folder
. Psd, illustrator etc etc in “graphics” folder
…. …..
Leaving only .html files in the main folder.


Work with images in the right size
First set the resolution to 72dpi, then resize the image in the right size you’ll need in your work.


Name your file in a server friendly way
Server don’t handle files named with:
. extension missing (.html -css etc etc)
. with spaced in the name (1 my file .jpg)
. take care of letter Case, soon mistakes occurs for uppercase problems (so, use only lowercase).


Test your work in Safari, Explorer, Chrome, Firefox
Each browser parse in a different style the html and the css, so check it before the presentation.


Use preferibly websafe fonts
Use websites like to discover how to make Arial more cool.


Make a backup of your work (style.css) before working on it 
If a little problem occur (a net error, wrong shortcut etc etc) you may loose hours of work in your style.css.


To be continued…

Waze, the social navigator

Waze is a 100% free turn-by-turn GPS navigation application that provides real-time traffic updates, plus all kinds of cool social and geo-gaming elements that actually make commuting fun. Wazers can actively update one another on traffic, police traps, construction, speedcams and more – and because it’s user-generated, the more people who use it, the better (and more addicting) it gets!

Just drive! when million of users drive using waze they’re simply creating and updating maps, with realtime data as traffic, police etc etc. Using Waze is also a game experience: you earn points (to get more ability as user) unlocking bonus on the map, simply driving to a specific spot. Waze is a project of Ehud Shabtai, a software engineer with a degree in Philosophy and Computer Science from Tel Aviv University, is completely free, is user generated…what is its business model?  The navigable data market is a huge market and their current business model involves selling our data set (maps, traffic, etc.) to relevant third parties while keeping the service free for individual users.

Google Hintergrund personalisieren

Jeder Nutzer der Google-Suchseite kann sich seine Startseite selbst mit eigenen oder Web-Fotos gestalten.

Zusammenfassung und eine Anleitung wie man seine Startseite personalisiert.

Computerrecycling für Afrika



Linuxola ist ein Gemeinnütziger Verein aus der Schweiz, der sich zur Aufgabe gemacht hat, veraltete aber funktionstüchtige Computer, zu sammeln und für Projekte in Afrika zur Verfügung zu stellen,um jungen Menschen dort den Zugang zur Informations- und Computertechnologie zu ermöglichen.

Infografik über Facebook

Anstecknadel als Onlinedienst

Es gibt virtuelle Anstecknadel bei Twitter.

Eine Bloggerin erklärt hier, wie es funktioniert und was dahinter steckt.

Könnte ja eventuell hilfreich sein, wenn wir die Website für Amref gestalten.

mmmmmm….myspacing facebook

I discovered this article about Wiz, a flash (still alive) app to pimp your fan page… The users need more ornament, not only functions :)!

Warum Facebook nutzen?

Studie, bei der mal nicht nur erfragt wurde welche Altersgruppe wie viele Stunden täglich auf Facebook verbringt, sondern hier werden auch mal die meist genannten Gründe angegeben WARUM die Nutzer Facebook verwenden…