Entwerfen von Killer-Web-UI-Layouts mit Freebies - Ultimate Guide

Der Bereich Webdesign hat in wenigen Jahren einen ganz eigenen Atemzug bekommen. Heute gibt es weltweit mehr aktive Designer, die alle an innovativen Projektideen zusammenarbeiten. Die Konzepte hinter vielen dieser Trends wurden von professionellen Grafikdesignern entwickelt.

Es kann Monate oder sogar Jahre dauern, bis Sie die technischen Aspekte des Aufbaus einer Benutzeroberfläche vollständig verstanden haben. Sie müssen die Größe und Platzierung von Seitenelementen sowie die Lesbarkeit von Text und Beschriftungen berücksichtigen. Mit etwas Freizeit können Sie einen minimalistischen Ansatz für das Erstellen von Websites mit weniger und weniger Verwirrung suchen. Und selbst dann gibt es Dutzende anderer Designtechniken, die ebenfalls zu berücksichtigen sind.

Für diese Anleitung habe ich einige zusammengestellt moderne User Interface Design-Techniken mit Werbegeschenke, die Sie herunterladen können und mit spielen. Ich hoffe, dass dies eine Motivation für diejenigen bietet, die an einer Karriere im Bereich Grafik / Webdesign interessiert sind. Sogar professionelle Webdesigner könnten einige dieser Trends für Ihr nächstes Projekt hilfreich finden.

Üben Sie mit vollständigen Vorlagen

Wenn Sie die Fähigkeiten haben, Ihr eigenes Layout von Grund auf zu entwerfen, müssen Sie nicht mit Vorlagen beginnen. Anfänger hingegen fühlen sich von einem vollständigen Design bis zu feineren Details wohler.

Es gibt einige ausgezeichnete kostenlose Downloads von vollständigen PSD-Website-Vorlagen für Portfolios, Homepages, Blogs und viele andere Kategorien. Dies sind die perfekten Designs, mit denen Sie sich mit a vertraut machen können “Allgemeines” Web-Layout. Jede Website hat unterschiedliche Anforderungen an Seitenelemente und Sie müssen bestimmen, welche Elemente wichtig sind.

Hier ist ein PSD-Beispiel namens "AppCivilization", das von Martin Fabricius entworfen wurde. Das Layout ist für ein Kreativstudio vorgesehen, das mobile Apps und möglicherweise Websites gestaltet. Unten finden Sie ein kleines Panel mit App-Symbolen, die in einem Portfolio angezeigt werden. Sie werden auch feststellen, dass das gesamte Design horizontal in eine Kopfzeile, eine Diashow, einen Hauptinhalt und eine dunkle Fußzeile unterteilt ist.

Originalquelle - Herunterladen

Landing Pages entwerfen

Schauen wir uns ein anderes Freebie an, das ebenfalls von Martin entworfen wurde. Das nächste Beispiel ist eine Landing Page, auf der Sie beliebige Produkte verkaufen können. Im Allgemeinen handelt es sich dabei um digitale Waren, die vom Benutzer heruntergeladen werden können, d. H. Apps, Fotos, Icons, Vorlagen usw..

Originalquelle - Herunterladen

Das Beste an seinem Design ist jedoch, dass es für Anfänger sehr flexibel ist. Die Kopfzeile verwendet immer noch eine kleine obere Navigation mit einem großen Bild. Die erwarteten Benutzeraktionen sind jedoch unterschiedlich. Er hat einen großen “Kauf es!” Knopf, der direkt über der Falte hervorsteht. Auf einer Produktlandeseite würde dies mehr Aufmerksamkeit erregen als eine jQuery-Diashow.

Eine weitere großartige UI-Technik ist die kleine iPhone-Funktionsanzeige in der Mitte der Seite. Martin bietet eine iPhone-Vorschau, eine App Store-Schaltfläche und eine kleine Liste der wichtigsten Funktionen. Wenn Besucher nach Produktdetails suchen, können Sie es nicht einfacher machen als über eine formatierte Liste.

Weitere Vorlagen:

Hier sind ein paar kostenlose PSD-Vorlagen, die wir im Pass veröffentlicht haben:

"BiZ" Business Website PSD-Vorlagen
PSD-Vorlage "ThinkJuice"
PSD-Vorlage für professionelle Business-Sites
"Polo360" Portfolio-Site-PSD-Vorlage

Möglicherweise interessieren Sie sich auch für Folgendes:

Business-Website-Vorlagen
Tutorials "In Kürze verfügbar" + Vorlagen

Hauptnavigationsnavigation

Menüs und Schaltflächen sind nur Werkzeuge, um sehr viel größere Seitenelemente zu erstellen. Es ist nicht zu leugnen, dass die Hauptnavigation Ihrer Website einen sehr wichtigen Zweck erfüllt. Sie benötigen es, damit Ihre Website mit möglichen Fallback-Methoden für mobile Benutzer leicht zugänglich ist.

Unten ist eine coole Navigationsleiste mit einem Stitching-Textur-Effekt. Der Hervorhebungsstil kann als abgedunkelte Box oder als nach unten gerichteter Hinweis in den Seiteninhalt angezeigt werden. Dieser Stil hat sich im Laufe der Jahre herausgestellt und macht sich im richtigen Umfeld gut.

Originalquelle - Herunterladen

Ein weiteres ähnliches Werbegeschenk ist diese strukturierte Headernavigation, die von erstellt wurde Edi Gil. Ich finde es sehr gut, wie diese zweite Navigationsleiste sowohl eine Liste von Links als auch einige zusätzliche Seitentasten enthält. Sie möchten sekundäre Links für Besucher anbieten, wo sie Ihre Profile im Web finden können.

Originalquelle - Herunterladen

Alternative Menüstile

Abgesehen von der typischen horizontalen Navigationsleiste sind andere Designstile zu berücksichtigen. Vertikale Links können in verschiedene Untertitel unterteilt werden, wodurch mehr Platz für den Seiteninhalt bleibt.

Nehmen Sie zum Beispiel die Menüfreigabe unten, die von der Website Icojam entworfen wurde.

Jede Überschrift ist so aufgebaut, dass sie basierend auf dem ausgewählten Objekt erweitert und reduziert wird. Zusätzlich ermöglicht das Design, dass eine kleine Zahlentheke auf der rechten Seite jeder Kategorie sitzt. Am besten füllen Sie dies als Blognavigation aus, um zu zählen, wie viele Beiträge unter jedem Thema abgelegt werden.

Originalquelle - Herunterladen

Navigationstipps / Tutorials:

50+ Clean-CSS-Tab-basierte Navigationsskripts
Breadcrumb-Navigation - Best Practices & Beispiele
Mobile Navigation mit jQuery erstellen
Codierung der Breadcrumb-Navigation in CSS3
Entwerfen der Navigation mit weniger CSS

Cleaner-Webformulare

Das moderne Zeitalter des Internets ist weit entfernt von einem statischen Treffpunkt. Die Benutzer tauschen ständig Informationen aus und interagieren täglich miteinander. Der größte Teil dieser Text- und Medienfreigabe wird über Webformulare verwaltet.

Wir sollten uns nur ein paar Beispiele ansehen, wie Sie Formulareingaben und Schaltflächen gestalten können. Die Gestaltung Ihrer Elemente kann dazu beitragen, Ihre Besucher dazu einzuladen, sie tatsächlich zu verwenden. Dies wiederum erhöht die Glaubwürdigkeit Ihrer Website und sorgt für mehr Seitenzugriffe.

Login-Felder

Es gibt einige großartige Beispiele für Anmeldeformular-PSDs, die Sie auschecken können. Dieses Login kostenlos via WP Scientist hat alle Ihre Standardelemente. Zwei Eingabefelder für Login / Passwort, eine Schaltfläche zum Senden und Kontrollkästchen zum Verwalten von Sitzungscookies.

Dieses Entwurfsmodell ist perfekt, wenn Sie die Effekte über jQuery implementieren können. Der obere rechte Pfeil lässt Sie an ein Popup-Fenster denken. Dies ist eine wunderbare Technik, um Platz auf Ihrer Website zu sparen, indem Sie das Formular so lange verbergen, bis ein Benutzer auf den Registrierungslink klickt.

Originalquelle - Herunterladen

Das folgende Formular kann von Designer kostenlos heruntergeladen werden Gil Huybrecht. Er verwendete ein ähnliches Muster mit einem körnigen Hintergrund und einer Papierstruktur. Was ich an Gils Design besonders schätze, sind die "übergroßen" Elemente. Es ist viel freundlicher, auf einem Anmeldeformular zu landen, das die gesamte Seite ausfüllt. Benutzer können leicht sehen, was sie tippen, und es gibt weniger Unordnung.

Originalquelle - Herunterladen

Wenn Sie als Frontend-Entwickler mit CSS3 vertraut sind, können Sie diese Grafik sehr einfach in Code umwandeln. Sie können sogar den ausgewählten äußeren Leuchteffekt und abgerundete Ecken für die Schaltflächen- und Eingabefelder implementieren.

Kontakte

Ein weiteres Formular, das Sie auf praktisch jeder Website finden, ist ein Kontaktformular. Dies umfasst normalerweise Felder für den Namen des Absenders, die E-Mail-Adresse und den Nachrichteninhalt.

Das folgende Freebie ist ein hervorragendes Beispiel für die Verwendung von benutzerdefinierten Texturen und Symbolen.

Das Design verwendet auch Platzhaltertext anstelle von Etiketten. Dies bedeutet, dass beim ersten Laden des Formulars jedes Feld mit einem Standardwert (z. B. Ihr Name) festgelegt wird. Wenn Sie jedoch mit der Eingabe beginnen, wird der Platzhalter gelöscht und Ihr Inhalt wird stattdessen angezeigt. Alle standardkonformen Browser unterstützen diesen Effekt und sparen Platz auf der Seite.

Originalquelle - Herunterladen

Ein weiteres wunderbares Werbegeschenk ist dieses tabellierte Kontaktformular, das von den Talenten entworfen wurde Jonno Riekwel. Dieses Design ist viel einfacher und hat über jeder Eingabe Beschriftungen. Dies ist eine großartige Lösung für größere Unternehmen oder Startups, die Nachrichten durch verschiedene Abteilungen des Unternehmens versenden müssen.

Originalquelle - Herunterladen

Tutorials zu Kontaktformularen:

Anmelde- / Registrierungsformular: Ideen und schöne Beispiele
Erstellen Sie ein Anmeldeformular für gestapelte Papiereffekte
Erstellen Sie ein Ajax-basiertes HTML5 / CSS3-Kontaktformular

Bänder und Banner

Erst vor 6 oder 7 Jahren begannen abgerundete Ecken in beliebten Designtrends zu steigen. Jetzt sind wir mit Schlagschatten und Eckbändern noch weiter gekommen.

Originalquelle - Herunterladen

Einige dieser Elemente können als Design-Highlights verwendet werden, z. B. als Kommentarzähler oder als Veröffentlichungsdatum für ein Blog. Das geheftete Farbband oben eignet sich ideal für Portfolios oder Projektseiten, auf denen Sie die Aufmerksamkeit Ihrer Besucher gewinnen möchten. Sie können auch ein ähnliches vertikales Farbband versuchen, bei dem das Design von oben nach unten fällt.

Diese winzigen Seiteneffekte verbessern das Layout erheblich. Die Besucher werden aufmerksam und lieben diese ästhetischen Angenehmen. Bedenken Sie jedoch, dass kleine Eckbänder nur einen Teil dieses Designtrends bilden.

Originalquelle - Herunterladen

Darüber hinaus sind Full-On-Banner-Designs für den Aufbau von Markenbekanntheit wahnsinnig beliebt geworden. Sie können diese in Ihrem Logo, in der Navigation, auf der Startseite oder sogar in den vorgestellten Blogbeiträgen verwenden. Die Auswirkungen sind bei guten Designfähigkeiten praktisch unbegrenzt.

Die Ecke einwickeln

Ein weiterer sehr spezifischer Ribbon-Banner-Effekt wird ausgeführt, indem Sie das Design um Ihre Seitenecke wickeln. Dadurch entsteht die Illusion, dass Ihre Seite 3-D ist und das Band um den oberen Teil Ihrer Website gewickelt ist.

Das folgende Design ist zu 100% kostenlos zum Download und kann für Ihre eigenen Projektideen verwendet werden. Sie können sehen, wie dies die Aufmerksamkeit der Besucher auf sich ziehen würde und warum dieser Trend zu einer solchen Raserei geworden ist. Achten Sie darauf, die Banner nicht zu überbeanspruchen. Im großen und ganzen können diese sehr ärgerlich sein, ähnlich wie bei den älteren "Web 2.0" - Hochglanz- / Spiegeleffekten.

Originalquelle - Herunterladen

Mit Knöpfen gestalten

Abgesehen von Hyperlinks erhalten Sie die meisten Interaktionen von Besuchern mit Schaltflächen. Diese Seitenelemente können mit Hilfe von jQuery- und Ajax-Aufrufen alles ausführen. Sie können jedoch auch Schaltflächen zum Verknüpfen von statischem Inhalt verwenden, z!

Das unten dargestellte UI-Kit wurde von entworfen Matt Gentile hat viel mehr als nur Knöpfe. Sein PSD-Set ist ideal für Anfänger, die Steigungen und Texturen für ähnliche Formen suchen. In UI-Kits finden Sie häufig wesentlich hochwertigere Tasten als bei einzelnen PSDs.

Originalquelle - Herunterladen

So erstellen Sie Variationen

Beim Üben dieser Techniken sollten Sie im Laufe der Zeit viele verschiedene Stile erstellen. Dies kann dazu führen, dass ähnliche Schaltflächen zwischen verschiedenen Projekten und Layouts umgeschaltet werden. Ein gutes Beispiel sind die milchigen Knöpfe, die der Designer anbietet Robert van Klinken.

Originalquelle - Herunterladen

Jede der drei ursprünglichen Schaltflächen hat einen anderen Verlaufsstil, mit Ausnahme der Schwebeflug- und Aktivzustände, die ähnlich aussehen. Wenn Sie in Photoshop arbeiten, müssen Sie die Farben zwischen den Farbverläufen anpassen oder die Farben auf eine Effektebene verschieben. Mit diesem Verständnis können Sie sogar Ihre eigenen Schaltflächen zum Download erstellen!

Originalquelle - Herunterladen

Holz + Papier Texturen

Wenn Sie Ihre grundlegenden Layoutdesigns aufpeppen müssen, müssen Sie sich auf geschicktere Methoden konzentrieren. Texturen sind immer willkommen, wenn Sie sie durch CSS-Hintergründe oder Inhalt mit fester Breite richtig implementieren können. Und zwei der beliebtesten Texturen, die ich gesehen habe, sind Holz- und Blankopapiere.

Die Notizblock-Idee ist sehr einfach, kann jedoch zu einem coolen Branding-Design werden, entweder als Teil eines Benutzeroberflächenelements oder in das gesamte Layout integriert. Papier sieht jedoch nicht immer am besten aus, und eine andere Textur kann dazu beitragen, dass sich die Stile einfügen. Hier können detailliertere Texturen von Holz ins Spiel kommen.

Originalquelle - Herunterladen

Bilder werden hervorstechen und sehen wunderbar in einer äußeren Hülle aus. Das gesamte Konzept der Textur ist, Ihrer Website ein bestimmtes Gefühl oder eine bestimmte Emotion zu verleihen. Holzthemen können ein Gefühl von Zuhause und Natur hervorrufen. Es gibt sogar ein großartiges Web-UI-Kit aus Holz zum Herunterladen von Jeremiah Wingett. Wenn Sie sich kreativ fühlen, stellen Sie Ihre eigenen Texturen zusammen und sehen Sie, wie sie in einer webbasierten Umgebung funktionieren.

28 Holzstrukturen mit hoher Auflösung

Fazit

Die besten Webdesigner sind diejenigen, die täglich üben und es niemals zulassen, dass ihre Fehler von ihren endgültigen Zielen abhängen. Sie müssen reaktionsschnell sein und sich schnell von erfolgreichen und fehlgeschlagenen Versuchen erholen. Die Tipps und Werbegeschenke in diesem Handbuch sollten ein guter Ausgangspunkt sein, um zu lernen, wie man unterschiedliche Seitenkonzepte für ein Webprojekt erstellt. Und wir möchten Ihre Gedanken zu diesem Thema im Post-Diskussionsbereich lesen.