proggen.org Design

Programmierer sucht Grafiker, Grafiker sucht Publikum, Musiker sucht Zuhörer
Benutzeravatar
Xin
nur zu Besuch hier
Beiträge: 8858
Registriert: Fr Jul 04, 2008 11:10 pm
Wohnort: /home/xin
Kontaktdaten:

proggen.org Design

Beitrag von Xin » So Feb 07, 2010 6:29 pm

So, von bbbl habe ich bisher nach zwei Mails noch nix gehört.

Ich habe bereits ein paar Websites gesammelt, an denen ich mich orientieren möchte. Aber ich möchte mich natürlich gerne weiter inspirieren lassen, was woran ihr euch so im Design orientieren wollt.

Habt ihr Websites, die Features haben, die man mal gesehen haben, die ein Besonderheiten im Design oder der Nutzerführung haben, die man sich auch für Proggen.org vorstellen kann? Oder ganz allgemein Wünsche oder Anregungen, wie es in Zukunft aussehen soll, damit ich eure Gedanken auch mal sortieren kann.

Ggfs Link mit Kommentaren posten.
Merke: Wer Ordnung hellt ist nicht zwangsläufig eine Leuchte.

Ich beantworte keine generellen Programmierfragen per PN oder Mail. Dafür ist das Forum da.

Benutzeravatar
Kerli
Beiträge: 1456
Registriert: So Jul 06, 2008 10:17 am
Wohnort: Österreich
Kontaktdaten:

Re: proggen.org Design

Beitrag von Kerli » Mo Feb 08, 2010 6:15 pm

Also vom Design her hab ich jetzt nichts spezielles im Kopf bzw. keine Vorlage. Ich würde es nur nicht zu dunkel machen sondern eher was helles, freundliches. Wichtig wäre auch eine bessere Verknüpfung zwischen Forum und Wiki. Also zb. bei Beiden ein Teil der Kopfleiste oder Seitenleiste gleich wo ein Menü mit Forum, Wiki, etc. ist (ähnlich wie bereits im Wiki). Dabei wäre dann der aktuelle Eintrag immer hervorgehoben.

Praktisch könnte auch noch Syntaxhighlighting für das Forum sein, damit man sich etwas leichter beim Überfliegen des Codes tut:
http://qbnz.com/highlighter/
http://www.phpbb.de/community/viewtopic ... 8&t=169688

Dabei könnte es auch praktisch sein wenn man den Codebereich ausklappen könnte um bei längeren Codeteilen nicht so viel scrollen zu müssen.
"Make it idiot-proof and someone will invent an even better idiot." (programmers wisdom)

OpenGL Tutorials und vieles mehr rund ums Programmieren: http://www.tomprogs.at

Benutzeravatar
bbbl
Beiträge: 80
Registriert: So Jul 19, 2009 12:04 am

Re: proggen.org Design

Beitrag von bbbl » Di Feb 09, 2010 4:11 am

Abend zusammen,

tut mir leid dass ich mich nicht viel eher gemeldet habe, aber ich werde gerade zunehmend vom RL beansprucht.. Daher muss ich beim Design etwas anders vorgehen, um das Projekt nicht fallen zu lassen - eigentlich wollte ich da sehr struktuturiert und gewissenhaft an die Sache ran gehen.

Ansich sitze ich aber immernoch am Logo.. Ich poste daher mal ein paar Vorschläge, bzw. es sind vielmehr Ideen die noch nicht vollends ausgearbeitet sind.. Einfach aus dem Bauch raus mal schreiben was euch dazu einfällt..


Bild

Bild

Bild

Benutzeravatar
Xin
nur zu Besuch hier
Beiträge: 8858
Registriert: Fr Jul 04, 2008 11:10 pm
Wohnort: /home/xin
Kontaktdaten:

Re: proggen.org Design

Beitrag von Xin » Di Feb 09, 2010 10:47 am

Hallo bbbl, schön von Dir nochmal zu hören.

Wie ich sehe, stehst Du weiterhin auf sehr grelle Farben.
Ich habe nichts gegen farbliche Experimente, aber möchte nicht unbedingt vom Inhalt ablenken.

Während ich das zweite Logo eigentlich sogar recht amüsant finde - wobei ich nicht hoffe, dass man mit proggen.org ausknockt wird ;-) - verstehe ich das Dritte überhaupt nicht. Wo kommt das 'W' her?

Nachdem sich niemand mehr hier gemeldet hat, habe ich mich gestern an ein eher konservatives, graues Design gesetzt. Mein Hauptproblem ist zur Zeit die Wirkung - ob ich mehr Richtung Professionalität gehen möchte oder Richtung Jugend.
Ich kenne Jugendliche, die zu den Professionellen gehen wollen, um Professionell zu werden, aber auch Jugendliche, die davon eher abgeschreckt werden. Wir haben uns für das "Du" als Ansprache entschieden, trotzdem soll das ganze nicht nur eine Kinder-Hacker-Seite sein - was durch Kernel-Programmierung und diverse Frameworks wohl unterstrichen wird. Das ist schon Fachwissen, was deutlich über Skript-Kiddy-Niveau liegt.
Zumal ich weiterhin Professionals anlocken möchte, die sich bereit erklären, hier auch etwas beizutragen.
Merke: Wer Ordnung hellt ist nicht zwangsläufig eine Leuchte.

Ich beantworte keine generellen Programmierfragen per PN oder Mail. Dafür ist das Forum da.

Benutzeravatar
Dirty Oerti
Beiträge: 2229
Registriert: Di Jul 08, 2008 5:05 pm
Wohnort: Thurndorf / Würzburg

Re: proggen.org Design

Beitrag von Dirty Oerti » Di Feb 09, 2010 8:31 pm

Tag :)

Argh, ich hatte schon einen Entwurf für eine Antwort gespeichert, den dann aber wieder vergessen..

Also:

Erstmal zum Logo: Das erste gefällt mir nicht wirklich, das sieht ehrlich gesagt nicht originell aus und man kann sich daran wohl schlecht erinnern. Das dritte verstehe ich (wie Xin) nicht so ganz.
Das zweite finde ich aber super :) Bis auf EINE Kleinigkeit....warum muss es immer "babyblau" sein? :D

Zur farblichen Gestaltung:

Grau...ja...naja :) Also ich hatte mal angefangen mir eine kleine Webseite zu basteln und hatte dabei Farben verwendet, die mir (logischerweise) sehr gut gefallen hatten. Das ganze war durchaus etwas bunter, jedoch nur in den Regionen, in denen es nicht stört (LINKS in der Navigation sowie Trennung zwischen Seitenheader/footer und Inhalt).

Ich schieb einfach mal das alte CSS hoch^^

Code: Alles auswählen

/*.mainp {color:red; font-size:120%; font-style:bold}
.mainp2 {color:#0091FF; font-size:90%; font-style:italic; }

.titel {color:#FF1E63; font-size:150%; font-style:bold;}

h1 {color:red;}

#inhalttab {background:#00FF5A; }


*/


<!--
body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	background-color: #FFFFFF;
	font-size: small;
}
a:link { text-decoration:underline;}
a:active { text-decoration:none;}
a:visited { text-decoration:underline;}
a:hover { text-decoration:none;}
.a1 {
	color: #000000;
	font-size: small;
	text-decoration: none;
	width: 100%;
	height: 100%;
	display: block;
}
.a1:link { color: #000000; text-decoration:none;}
.a1:active { color: #FFFFFF; text-decoration:none;}
.a1:visited { color: #000000; text-decoration:none;}
.a1:hover { color: #FFFFFF; text-decoration:none;}


.linkgroup {
	font-size:small;
	font-weight:bold
}

.bg_colGREEN { background:#00CC66; }
.bg_colRED { background:#FF0066; }
.bg_colYELLOW { background:#FFCC00; }
.bg_colDARKBLUE { background:#000099; }
.bg_colLIGHTBLUE { background:#00D0FF; }

.fuss_unten {
	color: #FFFFFF;
	font-size: small;
}
.logo_lo {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: x-large;
	color: #000099;
	font-style: italic;
}
.at_top {font-size: x-large;font-weight: bold;}


.aINDEX:link { color:#FFFFFF; text-decoration:none; }
.aINDEX:active { color:#FFFFFF; text-decoration:none; font-weight:bold; }
.aINDEX:visited { color:#FFFFFF; text-decoration:none; font-weight:italic; }
.aINDEX:hover { color: #FFFFFF; text-decoration:none;}


-->
Ein paar helle und auch durchaus farbkräftige Farben haben einen freundlichen Eindruck, und ich denke unabhängig von der hier anwesenden oder abwesenden Professionalität sind wir doch vor allem eins: Freundlich :)
Bei Fragen einfach an daniel[ät]proggen[Punkt]org
Ich helfe gerne! :)
----------
Wenn du ein Licht am Ende des Tunnels siehst, freu dich nicht zu früh! Es könnte ein Zug sein, der auf dich zukommt!
----
It said: "Install Win95 or better ..." So I installed Linux.

Benutzeravatar
bbbl
Beiträge: 80
Registriert: So Jul 19, 2009 12:04 am

Re: proggen.org Design

Beitrag von bbbl » Di Feb 09, 2010 8:45 pm

Wie gesagt, es sind erstmal nur Gestaltungsideen. Der Gedenke bei Nr. 3 war der, eine Art generisches Logo aus der Darstellung einer Baumstruktur zu schaffen.. P = Portal/Proggen.org, W = Wiki, F = Forum.. Interessant wäre halt mal zu wissen, was die anderen Progger hier mit Programmierung im Allgemeinen verbinden. Zu Nr. 2 muss man sagen, Humor ist universell und funktioniert immer.. hier wollte ich ein typografisches Logo entwerfen, das aus Bestandteilen einer Programmiersprache besteht, wie z.B. die geschwungenen Klammern und zudem hab ich noch C++ darin versteckt - was zudem eine positive Verbindung zu dem Logo schafft, wenns dann klick macht und man die Idee hinter dem Logo erkennt.. Aber wichtiger als die konkrete Lösung für das Logo, ist das Gesamtpaket..

Also soll es nun doch eher professionell aber locker in der Kommunikation werden, gut. Ach, und wenn du ein professionelles Erscheinungsbild haben willst, sind sind z.B. ganz sanfte grau Verläufe ein sicheres visuelles Mittel, genau wie etwas großzügiger Weißraum - beides bewirkt quasi automatisch einen professionellen Look.

Benutzeravatar
Xin
nur zu Besuch hier
Beiträge: 8858
Registriert: Fr Jul 04, 2008 11:10 pm
Wohnort: /home/xin
Kontaktdaten:

Re: proggen.org Design

Beitrag von Xin » Mi Feb 10, 2010 7:19 pm

bbbl hat geschrieben:Wie gesagt, es sind erstmal nur Gestaltungsideen. Der Gedenke bei Nr. 3 war der, eine Art generisches Logo aus der Darstellung einer Baumstruktur zu schaffen.. P = Portal/Proggen.org, W = Wiki, F = Forum.. Interessant wäre halt mal zu wissen, was die anderen Progger hier mit Programmierung im Allgemeinen verbinden.
Das lässt sich leicht im Forum erfragen.
bbbl hat geschrieben:Zu Nr. 2 muss man sagen, Humor ist universell und funktioniert immer.. hier wollte ich ein typografisches Logo entwerfen, das aus Bestandteilen einer Programmiersprache besteht, wie z.B. die geschwungenen Klammern und zudem hab ich noch C++ darin versteckt - was zudem eine positive Verbindung zu dem Logo schafft, wenns dann klick macht und man die Idee hinter dem Logo erkennt.. Aber wichtiger als die konkrete Lösung für das Logo, ist das Gesamtpaket..
Wohl wahr, aber dennoch gefällt mir die Idee dieses Logos recht gut.
Nachdem Du die Idee mit den Graphen (P-W-F) erklärt hast, finde ich die Idee auch nicht schlecht - aber es bleibt halt der Punkt, dass sie nicht selbsterklärend ist.
bbbl hat geschrieben:Also soll es nun doch eher professionell aber locker in der Kommunikation werden, gut. Ach, und wenn du ein professionelles Erscheinungsbild haben willst, sind sind z.B. ganz sanfte grau Verläufe ein sicheres visuelles Mittel, genau wie etwas großzügiger Weißraum - beides bewirkt quasi automatisch einen professionellen Look.
Ich spiele momentan mit einem grauen Design, teilweise mit Verläufen, in das ich Bunte Elemente setze. Vorrangig Fotos von Kindern, die mit Computern hantieren oder lernen. Ich möchte gerne überglückliche, jungdynmaische Menschen in Schlips und Anzug heraushalten, weil hier erstens keine Schlipsträger sind und ich derartige Lügen für Standard-Werbebroschüren auf anderen Websiten verbrate. ;-)

Noch spiele ich, sollte ich was finden, was man zeigen kann, lade ich es zur Kritik hoch. Sofern Du Zeit hast, wäre ich interessiert, was Du noch an Ideen hast.
Merke: Wer Ordnung hellt ist nicht zwangsläufig eine Leuchte.

Ich beantworte keine generellen Programmierfragen per PN oder Mail. Dafür ist das Forum da.

Benutzeravatar
Xin
nur zu Besuch hier
Beiträge: 8858
Registriert: Fr Jul 04, 2008 11:10 pm
Wohnort: /home/xin
Kontaktdaten:

Re: proggen.org Design

Beitrag von Xin » Mi Feb 10, 2010 11:23 pm

Mal ein Preview, von dem, was ich bisher so gebastelt habe. Ich habe ein neues DokuWiki aufgesetzt und die Daten des aktuellen Wikis kopiert und begonnen das aktuelle Design zu ändern.
Bisher habe ich nur eine mögliche Startseite erstellt.

Ich werde für dieses Design einige Plugins für's Dokuwiki schreiben müssen, um solche Portalseiten aus dem Wiki heraus erzeugen zu können - also beispielsweise die seitlichen Menüs für Portalseiten abzuschalten. Was dargestellt wird kommt zwar aus Dokuwiki, aber da ist noch vieles zu statisch - dafür werden dann die Plugins benötigt.
Unten in die Verweise sollen links noch kleine farbige Logos und auch die Buttons sind einfach Rechtecke, die ich mit einer Sprühpistole mal eben schnell gefrickelt habe. Die verwendete Grafik sind hochskalierte Vorschaubilder, deren Rechte man bei Verwendung aber kaufen kann.

Vielleicht hat jemand von Euch ja Vorschläge, daraus eine normale Wiki-Seite zu gestalten oder auch mit der Farbgestaltung zu spielen.
Du hast keine ausreichende Berechtigung, um die Dateianhänge dieses Beitrags anzusehen.
Merke: Wer Ordnung hellt ist nicht zwangsläufig eine Leuchte.

Ich beantworte keine generellen Programmierfragen per PN oder Mail. Dafür ist das Forum da.

Benutzeravatar
Kerli
Beiträge: 1456
Registriert: So Jul 06, 2008 10:17 am
Wohnort: Österreich
Kontaktdaten:

Re: proggen.org Design

Beitrag von Kerli » Do Feb 11, 2010 1:41 am

Xin hat geschrieben:Mal ein Preview, von dem, was ich bisher so gebastelt habe.
Gefällt mir eigentlich sehr gut. Es ist vielleicht lediglich etwas zu dunkel bzw. farblos. Hier das ganze etwas heller:
preview-proggen-light-blue.jpg
Irgendwie hat aber auch das "Programmieren lernen von Anfang an" etwas zu wenig Kontrast zum Hintergrund...
Du hast keine ausreichende Berechtigung, um die Dateianhänge dieses Beitrags anzusehen.
"Make it idiot-proof and someone will invent an even better idiot." (programmers wisdom)

OpenGL Tutorials und vieles mehr rund ums Programmieren: http://www.tomprogs.at

Benutzeravatar
Dirty Oerti
Beiträge: 2229
Registriert: Di Jul 08, 2008 5:05 pm
Wohnort: Thurndorf / Würzburg

Re: proggen.org Design

Beitrag von Dirty Oerti » Do Feb 11, 2010 8:32 am

Hm..ist doch schonmal ganz gut.
Ein bisschen mehr Farbe fände ich aber nicht schlecht.
Z.B. die Felder hinter "Wiki" "Forum" und "Projekte" könnten in jeweils einer anderen Farbe gehalten sein (ROT, GRÜN, BLAU ?)

Den Hintergrund würde ich allerdings grau lassen (nicht schon wieder hellblau^^), aber eben ein helleres grau.

*weitermuss, Unterricht^^*
Bei Fragen einfach an daniel[ät]proggen[Punkt]org
Ich helfe gerne! :)
----------
Wenn du ein Licht am Ende des Tunnels siehst, freu dich nicht zu früh! Es könnte ein Zug sein, der auf dich zukommt!
----
It said: "Install Win95 or better ..." So I installed Linux.

Antworten