• Hallo liebe Userinnen und User,

    nach bereits längeren Planungen und Vorbereitungen sind wir nun von vBulletin auf Xenforo umgestiegen. Die Umstellung musste leider aufgrund der Serverprobleme der letzten Tage notgedrungen vorverlegt werden. Das neue Forum ist soweit voll funktionsfähig, allerdings sind noch nicht alle der gewohnten Funktionen vorhanden. Nach Möglichkeit werden wir sie in den nächsten Wochen nachrüsten. Dafür sollte es nun einige der Probleme lösen, die wir in den letzten Tagen, Wochen und Monaten hatten. Auch der Server ist nun potenter als bei unserem alten Hoster, wodurch wir nun langfristig den Tank mit Bytes vollgetankt haben.

    Anfangs mag die neue Boardsoftware etwas ungewohnt sein, aber man findet sich recht schnell ein. Wir wissen, dass ihr alle Gewohnheitstiere seid, aber gebt dem neuen Board eine Chance.
    Sollte etwas der neuen oder auch gewohnten Funktionen unklar sein, könnt ihr den "Wo issn da der Button zu"-Thread im Feedback nutzen. Bugs meldet ihr bitte im Bugtracker, es wird sicher welche geben die uns noch nicht aufgefallen sind. Ich werde das dann versuchen, halbwegs im Startbeitrag übersichtlich zu halten, was an Arbeit noch aussteht.

    Neu ist, dass die Boardsoftware deutlich besser für Mobiltelefone und diverse Endgeräte geeignet ist und nun auch im mobilen Style alle Funktionen verfügbar sind. Am Desktop findet ihr oben rechts sowohl den Umschalter zwischen hellem und dunklem Style. Am Handy ist der Hell-/Dunkelschalter am Ende der Seite. Damit sollte zukünftig jeder sein Board so konfigurieren können, wie es ihm am liebsten ist.


    Die restlichen Funktionen sollten eigentlich soweit wie gewohnt funktionieren. Einfach mal ein wenig damit spielen oder bei Unklarheiten im Thread nachfragen. Viel Spaß im ngb 2.0.

Webdesign Größe?

BabyRay

NGBler

Registriert
2 Aug. 2014
Beiträge
41
Hallo,

habe jetzt schon ein wenig gegoogled aber unterschiedliche Ergebnisse bekommen.
Könnte wohl auch an den meist veralteten Infos liegen.

Wenn ich ein Webdesign in z.B. Photoshop erstellen möchte, welche Größen sind da zu beachten?

Gängigste Auflösung ist wohl FullHD (1920x1080)

Nimmt man das aus Ausgangformat?

Und wie groß sollte der Header (nennt man das so?) sein?
max. 300px hoch hab ich mal irgendwo gelesen.

Wird alles auf unterschiedlichen Ebenen gemacht?

Das ganze ist zum üben und wird zumindest aus meiner Hand niemals online gehen.
Aber so hab was dazugelernt und der spätere Designer ne kleine Vorlage
 

godlike

Warp drölf
Veteran

Registriert
13 Juli 2013
Beiträge
14.327
Ort
Topkekistan
Hmm, bin mir etwas unschlüssig ob du hie richtig bist oder ins Webdesign gehörst. Geht es dir rein um das grafische Aussehen oder um die spätere Funktionalität im Browser?

Wenn ich ein Webdesign in z.B. Photoshop erstellen möchte, welche Größen sind da zu beachten?
Das es sich dynamisch an gängige Größen anpasst und ggf. auch auf Mobilen Endgeräten bedienbar bleibt. Da kann man nicht einfach Design X auf 1920x1080 anlegen, slicen und so in ein HTML-Tool pasten. Das wird nicht klappen. Du solltest dir zwangsläufig über die Möglichkeiten von CSS + HTML im Klaren sein und darauf dein Design planen + umsetzen (richtig zerteilen).

Hast du denn überhaupt schon mal eine Webseite gemacht?
 

Alero

Neu angemeldet

Registriert
21 März 2015
Beiträge
89
Ort
Ostthüringen
Befasse dich mal mit dem Thema "responsive webdesign". Starre Designs ala Photoshop sind in der heutigen Zeit out.
 

BabyRay

NGBler

Registriert
2 Aug. 2014
Beiträge
41
  • Thread Starter Thread Starter
  • #4
Nein hab davon absolut null Plan.
Das ganze soll auch mehr als "erster Entwurf" dienen.
Und damit ich sehe wie es wohl hinterher aussehen wird, möchte ich das ganze 1:1 vor mir sehen.
Manchmal sagt ein Bild mehr wie tausend Worte.
 

godlike

Warp drölf
Veteran

Registriert
13 Juli 2013
Beiträge
14.327
Ort
Topkekistan
Das wird aber so nicht klappen. Du kannst ein Bild nicht einfach in eine später funktionierende und Skalierende Webseite umwandeln. Du musst bei jedem Grafischen Element aufs Neue entscheiden wie du dieses in deine Seite packst.

Angenommen du willst einen Menübalken haben der von ganz links bis rechts geht. Es wäre Blödsinn jetzt so was zu slicen:



Vielmehr würde sich anbieten einen Container (oder ein anderes passendes Element [z.B. eine UL-Liste] mit einem Hintergrund auszustatten der sich horizontal erweitert. Also folgendermaßen:



+

[src=css]ul {
background-image: url(file:02.png);
background-repeat: repeat-x;
width: 100%;
height: 52px;
}[/src]

Hoffe du verstehst im Ansatz was ich meine...

Nachtrag: Du kannst also quasi durchaus ein Design in Photoshop entwerfen - solltest aber immer im Hinterkopf haben wie du dieses Design später auch korrekt umsetzen kannst. Einen Automatismus gibt es hier m.W. nicht.
 
Zuletzt bearbeitet:

BabyRay

NGBler

Registriert
2 Aug. 2014
Beiträge
41
  • Thread Starter Thread Starter
  • #6
Ich verstehe worauf du hinaus möchtest.
Ich möchte für mich! quasi in PS ein "Webdesign" erstellen, das wenn ich es mir im Vollbild ansehe, der späteren Webseite fast 1:1 gleicht.
Einfach um z.B. zu sehen ob dieses oder jenes Feld da ist wo ich es möchte und ob mir die Proportionen so gefallen.

Mal ein Beispiel:

http://www.vanion.eu/ (auch wenn ich den Knilch nicht mag :D )
Direkt unter dem Menü (News,Guides, Video usw.) kommt ja dieses große Bild.
Ich nenne das jetzt mal Header auch wenn es evtl falsch ist.
Ich persönl. finde das z.B. zu hoch, bevor ich überhaupt was lesen kann, muss ich eine komplette Seite nach unten scrollen.

Wie das ganze dann hinterher umgesetzt wird, soll nicht meine Sorge sein.
Ich möchte nur ein "Bild" der Webseite machen und sagen "So soll es aussehen und nu mach mal"

Und nur mal aus reinen Interesse, mit welcher Programmiersprache fängt man am besten an um später eine Webseite programmieren zu können?
Ist sowas überhaupt in Heimarbeit erlernbar ohne jeglichen Vorwissen?
 

BurnerR

Bot #0384479

Registriert
20 Juli 2013
Beiträge
5.504
Und nur mal aus reinen Interesse, mit welcher Programmiersprache fängt man am besten an um später eine Webseite programmieren zu können?
Ist sowas überhaupt in Heimarbeit erlernbar ohne jeglichen Vorwissen?
Wenn du von a bis z alles selber machen willst könntest du damit anfangen, das Bild mit html und css umzusetzen.
Im zweiten Schritt ziehst du dir rein was responsive webdesign bedeutet und machst deine seite responsive.
Im dritten Schritt könntest du die seite dann testweise irgendwo hosten.
Im vierten Schritt werden dir bis hier viele Dinge begegnet sein, die du gerne haben willst, die sich aber nicht mit html+css umsetzen lassen, logins, dynamische Inhalte etc., dann vllt hier nochmal reinschauen :D.
 

sia

gesperrt

Registriert
26 März 2015
Beiträge
5.931
Ort
FFM (NSFW)
Ich glaube, ihr versteht ihn falsch. Könnte es sein, dass es nur ums Erstellen eines ersten Entwurfs geht? Da braucht man ja keine Programmierkenntnisse, wenn das jemand anderes umsetzt.

Ich würde einfach 1920x1080 für den Desktop und ein Tablet sowie 720x1280 für ein Handy nehmen und dann schauen, wie ich das anordne. Wichtig ist hier viel eher die letztendliche Größe auf dem Display – kleine Buttons und enge Schrift mögen auf dem Desktop funktionieren, mobil wohl eher nicht.

Hilfreich ist es auch, mit einem sog. "Grid" zu arbeiten. Viel früher würde ich allerdings die Ideenfindung ansetzen. Webdesign ist nicht nur das tatsächliche Erstellen der grafischen Darstellung.

Habe auf die Schnelle ein interessantes Video gefunden:
How to Build a Responsive Website From Start to Finish - Discovery & Documentation
 

godlike

Warp drölf
Veteran

Registriert
13 Juli 2013
Beiträge
14.327
Ort
Topkekistan
Ich hab das imho schon richtig verstanden. Es ist trotzdem sehr von Vorteil wenn man weiß wie man so was später umsetzt. Man kann durchaus auch "Designs" bauen die man einfach nicht gescheit umgesetzt bekommt bzw. nur mit sehr unorthodoxen Mitteln :coffee:
 

thom53281

SYS64738
Teammitglied

Registriert
14 Juli 2013
Beiträge
6.908
Ein gutes Beispiel für das, was godlike ausdrücken will, ist unser Board hier im epicorp-Style (Standard). Einfach das Browserfenster von ganz groß bis ganz klein ziehen und Du siehst, wie sich die einzelnen Elemente verändern, von einem Desktop- bis zum Mobilstyle. Damit ist das Board mit sämtlichen gängigen Auflösungen benutzbar.

Bei Deinem Vorhaben ist es zwar noch nicht notwendig, das bis ins letzte Detail zu berücksichtigen. Aber ein grobes Grundgerüst solltest Du dabei schon beachten. Du kannst nicht einfach die Elemente im mobilen Style (ohne Basteleien) ganz anders platzieren als im Desktop-Style ohne zwei komplett unterschiedliche Templates zu bauen (=größerer Mehraufwand, "Endgerätweiche"). Daher musst Du bei der Platzierung von Elementen im Desktopstyle möglichst gleichzeitig auch bereits den Mobilstyle berücksichtigen, damit später ein einfaches Vergrößern, Verkleinern oder Ausblenden von Elementen ausreicht (=geringer Aufwand per CSS, wenn richtig gemacht - aber nicht immer möglich). Sieh Dir einfach das im Board mal an, wenn Du das Browserfenster vergrößerst/-verkleinerst und mache Dir über folgende (und weitere Punkte) Gedanken:

  • Was passiert mit der Seitenbreite?
  • Was passiert mit der Navigation wenn nicht mehr alle Menüpunkte in die Leiste passen?
  • Was passiert in einem Thread mit den einzelnen Beiträgen? Wo landen die Userinformationen?
  • Was passiert im Benutzerkontrollzentrum mit dem linken Menü?
  • Usw.
Im Übrigen bin ich ein Gegner von großen Headern und befürworte schlichte Sachen. Von der Höhe finde ich persönlich max. 150px Höhe für das Logo für vollkommen ausreichend, besser kleiner. Kommt aber auch hier wieder darauf an, was man nun genau machen möchte.
 

BabyRay

NGBler

Registriert
2 Aug. 2014
Beiträge
41
  • Thread Starter Thread Starter
  • #11
Ja es geht mir nur um einen Entwurf.
Und einen Mobilstyle ist auch nicht wirklich vorgesehen.

Habe das mal getestet mit diesem Board. Verkleiner ich den Browser, verändert sich das Board ABER bei Vollbild bzw schon etwas vorher und
bei FullHD Auflösung bleibt das Board auf einer Größe.
Und das ist das was ich meine. Der Header mit dem NGB Logo hat z.B. eine angenehme/passende Höhe und das Board auch eine passende Breite.
Der Rand an den Seiten ist angemessen.

Daher nun meine Frage was da wohl, ich nenn es mal gängige, Maße sind.
Die Höhe der Webseite passt sich ja dem Inhalt an. bis zu einem gewissen Maß.
Das sind z.B. die Sachen die mich im Moment interessieren.
 

Alero

Neu angemeldet

Registriert
21 März 2015
Beiträge
89
Ort
Ostthüringen
Lade dir doch einmal einfach ein Template herunter (Freeware Templates HTML5 und CSS3 gibt es zuhauf im Netz) und dann mach das Ding mit einem Editor auf und guck wie die das gebaut haben. Versuche zu verstehen was die einzelnen Befehle bedeuten und lerne so. HTML und CSS ist nichts, was man mal eben so zwischen Frühstück und Gänsebraten versteht. Gerade heutzutage wird fast die gesamte Steuerung inkl. Design über CSS erledigt und im HTML steht nur bissel Text. Also, so einfach, wie du dir das machst, auch wenn nur für dich, ist das nicht. Das Design muß auf jeden Fall dynamisch angelegt werden, sonst muß einer, der einen kleineren Monitor und kleinere Auflösung hat, deine Seite scrollen. Da sind deine Gäste ganz schnell wieder verschwunden.
Google mal nach selfhtml und selfcss. Da werden sie geholfen.
 

BurnerR

Bot #0384479

Registriert
20 Juli 2013
Beiträge
5.504
Ist auch die Frage wie er sich dem nähern will. Ich habe ja ne Schrittanleitung genannt, die aufgreift was er grad gerne machen will, nämlich eine visuelle Vorlage zu einer page zu bauen.
ImHo hat das auch seinen Reiz/Sinn, je präziser man gegenüber einem Auftragnehmer kommunizieren kann was man will, umso besser, irgendwelche Obskuritäten die man nicht mit html/css bauen will wird man dann schon benennen.
Ich weiß nicht genau was üblich ist bei den Designern, aber sich selber ne Vorlage malen kann kann sicherlich auch hilfreich sein.
 

codec

Pixelschubserin ■

Registriert
12 Juli 2013
Beiträge
6.480
Ort
In Handschellen
Wenn Du per HTML nen Design aufbauen willst, dann schau Dir mal Adobe Muse an. Dort kannste per HTML5 eine Webseite aufbauen mitsamt der ganzen Mobilen Versionen. Individuell.
 

drfuture

Zeitreisender
Teammitglied

Registriert
14 Juli 2013
Beiträge
8.728
Ort
in der Zukunft
Will er doch alles gar nicht...
Ich finde allerdings 1920x1024 zu groß

http://www.webmasterpro.de/portal/webanalyse-systeme.html zeigt immer eine aktuelle Analyse (Die betreiben unter anderem einen Besucherzähler den man auf seine Webseite einbinden kann und nutzen dies als Quelle - denke da ist der Besucherdurchschnitt durch alle Anwender-Kategorien)

Die Bildschirmauflösung ist dann noch nicht der Viewport der Webseite - da sollte man schon noch mal ein gutes Stück drunter bleiben..
Das mit der Größe des Header-Images usw. ist so eine Sache .. das kommt komplett auf das Layout-Design an. Wenn es nunmal gewollt ist das der Besucher erst NUR ein Bild + ein Menü sieht... mag das manchen nicht gefallen... aber ist dann so gewollt ....

Ich würde eine Seite mal auf eine Höhe von ~800px und möglichst Variable Breite Designen.
Du musst dir Überlegen *Was ist das Wichtigste auf der Webseite*, *Welchen Eindruck möchte ich erwecken (Seriös, Misteriös, Auffallend, Verspielt, Kreativ....) und daraufhin auch den Stiel der Seite Auslegen.
 

godlike

Warp drölf
Veteran

Registriert
13 Juli 2013
Beiträge
14.327
Ort
Topkekistan
Das ist halt das Problem wenn man es sich so statisch vorstellt. Ich würde da maximal von 900 oder 1000px (Contentbereich) ausgehen. Ist aber rein subjektiv und natürlich auch Branchenabhängig. Apple-Design-Nerds als Zielgruppe haben da halt mehr an Platz auf ihren 29" 4K Monitoren als Leute die im Shop nach Antiquitäten suchen. Von dem her ist so was schwer zu verallgemeinern.

Ich weiß nicht genau was üblich ist bei den Designern, aber sich selber ne Vorlage malen kann kann sicherlich auch hilfreich sein.
Also ich mach mir auch ne Vorlage in PS. Allerdings hab ich halt immer im Hinterkopf wie ich welches Element später umsetze und gestalte quasi auch gleich in der Art. Wenn da jetzt jemand einen Fließtext in 3 oder 4 Spalten macht, schön Blocksatz, mag das in PS gut aussehen, lässt sich am Ende aber halt beschissen umsetzen. Darauf wollte ich im Wesentlichen hinaus.

Wie hoch der Header ist ist imho ja einfach Geschmackssache da nach Unten eh unendlich Platz ist :D
 

BurnerR

Bot #0384479

Registriert
20 Juli 2013
Beiträge
5.504
Jo, meiner Erfahrung nach versteht man das erst wirklich, wenn man mal selber (in diesem Fall) eine visuelle Vorlage hatte und in html/css nachbauen musste :D, sonst kann man nur ganz abstrakt vom Kopf her aufnehmen, dass bestimmte dinge 'in css nicht gut umzusetzen' sind o.ä.
 

Alero

Neu angemeldet

Registriert
21 März 2015
Beiträge
89
Ort
Ostthüringen
Ich hab mir immer erst mal mit Zettel und Stift ne Skizze gemacht, wie das mal aussehen soll. Und ... in css kannst du heutzutage wahrhaftig fast alles umsetzen. Unglaublich, was man damit alles machen kann.
Nur mal so zum gucken. Ein Mac-ähnliches CSS-Dock.
http://michaelhue.com/cssdock/
 
Oben