proggen.org Design
- Xin
- nur zu Besuch hier
- Beiträge: 8859
- Registriert: Fr Jul 04, 2008 11:10 pm
- Wohnort: /home/xin
- Kontaktdaten:
proggen.org Design
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.
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.
Ich beantworte keine generellen Programmierfragen per PN oder Mail. Dafür ist das Forum da.
Re: proggen.org Design
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.
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
OpenGL Tutorials und vieles mehr rund ums Programmieren: http://www.tomprogs.at
Re: proggen.org Design
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](http://www.imagebanana.com/img/6jxetgq/proggen.org.logo.png)
![Bild](http://www.imagebanana.com/img/nye33x06/proggen.org.logo2.png)
![Bild](http://www.imagebanana.com/img/mu35lxl5/proggen.tree.logo.png)
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](http://www.imagebanana.com/img/6jxetgq/proggen.org.logo.png)
![Bild](http://www.imagebanana.com/img/nye33x06/proggen.org.logo2.png)
![Bild](http://www.imagebanana.com/img/mu35lxl5/proggen.tree.logo.png)
- Xin
- nur zu Besuch hier
- Beiträge: 8859
- Registriert: Fr Jul 04, 2008 11:10 pm
- Wohnort: /home/xin
- Kontaktdaten:
Re: proggen.org Design
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.
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
![Wink ;-)](./images/smilies/icon_e_wink.gif)
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.
Ich beantworte keine generellen Programmierfragen per PN oder Mail. Dafür ist das Forum da.
- Dirty Oerti
- Beiträge: 2229
- Registriert: Di Jul 08, 2008 5:05 pm
- Wohnort: Thurndorf / Würzburg
Re: proggen.org Design
Tag ![Smile :)](./images/smilies/icon_e_smile.gif)
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? ![Very Happy :D](./images/smilies/icon_e_biggrin.gif)
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^^
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 ![Smile :)](./images/smilies/icon_e_smile.gif)
![Smile :)](./images/smilies/icon_e_smile.gif)
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
![Smile :)](./images/smilies/icon_e_smile.gif)
![Very Happy :D](./images/smilies/icon_e_biggrin.gif)
Zur farblichen Gestaltung:
Grau...ja...naja
![Smile :)](./images/smilies/icon_e_smile.gif)
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;}
-->
![Smile :)](./images/smilies/icon_e_smile.gif)
Bei Fragen einfach an daniel[ät]proggen[Punkt]org
Ich helfe gerne!![Smile :)](./images/smilies/icon_e_smile.gif)
----------
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.
Ich helfe gerne!
![Smile :)](./images/smilies/icon_e_smile.gif)
----------
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.
Re: proggen.org Design
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.
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.
- Xin
- nur zu Besuch hier
- Beiträge: 8859
- Registriert: Fr Jul 04, 2008 11:10 pm
- Wohnort: /home/xin
- Kontaktdaten:
Re: proggen.org Design
Das lässt sich leicht im Forum erfragen.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.
Wohl wahr, aber dennoch gefällt mir die Idee dieses Logos recht gut.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..
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.
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.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.
![Wink ;-)](./images/smilies/icon_e_wink.gif)
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.
Ich beantworte keine generellen Programmierfragen per PN oder Mail. Dafür ist das Forum da.
- Xin
- nur zu Besuch hier
- Beiträge: 8859
- Registriert: Fr Jul 04, 2008 11:10 pm
- Wohnort: /home/xin
- Kontaktdaten:
Re: proggen.org Design
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.
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.
Ich beantworte keine generellen Programmierfragen per PN oder Mail. Dafür ist das Forum da.
Re: proggen.org Design
Gefällt mir eigentlich sehr gut. Es ist vielleicht lediglich etwas zu dunkel bzw. farblos. Hier das ganze etwas heller:Xin hat geschrieben:Mal ein Preview, von dem, was ich bisher so gebastelt habe.
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
OpenGL Tutorials und vieles mehr rund ums Programmieren: http://www.tomprogs.at
- Dirty Oerti
- Beiträge: 2229
- Registriert: Di Jul 08, 2008 5:05 pm
- Wohnort: Thurndorf / Würzburg
Re: proggen.org Design
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^^*
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!![Smile :)](./images/smilies/icon_e_smile.gif)
----------
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.
Ich helfe gerne!
![Smile :)](./images/smilies/icon_e_smile.gif)
----------
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.