Het ontwerpen van Killer Web UI-lay-outs met Freebies - Ultimate Guide
Het vakgebied van het webontwerp heeft zichzelf in slechts een paar jaar tijd op zijn kop gezet. Er zijn nu meer actieve ontwerpers wereldwijd dan ooit tevoren, allemaal samenwerkend aan innovatieve projectideeën. En de concepten achter veel van deze trends zijn ontwikkeld door professionele grafische ontwerpers.
Het kan maanden of zelfs jaren duren voordat u de technische details van het bouwen van een gebruikersinterface volledig begrijpt. U moet rekening houden met de afmetingen en plaatsing van pagina-elementen, ook de leesbaarheid van tekst en labels. Met een beetje vrije tijd kunt u een minimalistische aanpak kiezen voor het bouwen van websites met minder en minder verwarring. En zelfs dan zijn er nog tientallen andere ontwerptechnieken om te overwegen.
Voor deze gids heb ik een paar gekoppeld moderne ontwerptechnieken voor gebruikersinterfaces met freebies die je kunt downloaden en speel met. Ik hoop dat dit enige motivatie zal bieden aan diegenen die geïnteresseerd zijn in een carrière in het bouwen van grafische vormgeving / webdesign. Zelfs professionele webontwerpers kunnen een paar van deze trends nuttig vinden voor uw volgende project.
Oefen met volledige sjablonen
Als u de vaardigheden hebt om uw eigen lay-out vanaf nul te ontwerpen, hoeft u niet te beginnen met sjablonen. Beginners daarentegen voelen zich meer op hun gemak bij het starten van een volledig ontwerp en het werken aan de fijnere details.
Er zijn enkele uitstekende gratis downloads van volledige PSD-websitesjablonen voor portefeuilles, homepages, blogs en vele andere categorieën. Dit zijn de perfecte ontwerpen om mee te beginnen om vertrouwd te raken met een “algemeen” web layout. Elke website heeft verschillende behoeften aan pagina-elementen en je zult moeten bepalen welke items belangrijk zijn.
Hier is een PSD-voorbeeld genaamd "AppCivilization", ontworpen door Martin Fabricius. De lay-out is bedoeld voor een creatieve studio die mobiele apps en mogelijk websites ontwerpt. Op de achtergrond vind je een klein aantal app-pictogrammen die in een portfolio worden getoond. Je zult ook opmerken dat het hele ontwerp horizontaal wordt opgedeeld in een koptekst, diapresentatie op de bovenkant, hoofdinhoud en donkere voettekst.
Oorspronkelijke bron - Download
Ontwerp bestemmingspagina's
Laten we naar een andere freebie kijken die ook door Martin is ontworpen. Het volgende voorbeeld is een bestemmingspagina die u kunt gebruiken om elk type product te verkopen. Over het algemeen zijn dit digitale goederen die door de gebruiker kunnen worden gedownload, d.w.z. apps, foto's, pictogrammen, sjablonen enz.
Oorspronkelijke bron - Download
Maar het beste deel van zijn ontwerp is dat het erg flexibel is voor beginners om rond te werken. De header gebruikt nog steeds een kleine navigatie bovenaan met een grote afbeelding, maar met name de verwachte acties van de gebruiker zijn anders. Hij heeft een grote “Koop het!” knop die opvalt net boven de vouw. Op een productlandingspagina zou dit meer aandacht trekken dan een jQuery-diavoorstelling.
Een andere geweldige UI-techniek is het kleine display van de iPhone-functie halverwege de pagina. Martin heeft een voorvertoning van een iPhone, een App Store-knop en een kleine lijst met belangrijke functies. Wanneer bezoekers op zoek zijn naar productdetails, kunt u het niet eenvoudiger maken dan via een opgemaakte lijst.
Meer sjablonen:
Hier zijn enkele gratis PSD-sjablonen die we in de pas hebben vrijgegeven:
- "BiZ" Zakelijke website PSD-sjablonen
- Productnieuws PSD-sjabloon "ThinkJuice"
- Professionele bedrijfs-site PSD-sjabloon
- "Polo360" Portfolio Site PSD-sjabloon
Mogelijk bent u ook geïnteresseerd in de volgende:
- Sjablonen voor zakelijke websites
- "Binnenkort" pagina-tutorials + sjablonen
Hoofdsite navigatie
Menu's en knoppen zijn slechts hulpmiddelen voor het bouwen van veel grotere pagina-elementen. Het valt niet te ontkennen dat de belangrijkste navigatie van uw website een zeer belangrijk doel heeft. U hebt het nodig om uw site gemakkelijk toegankelijk te maken met mogelijke fallback-methoden voor mobiele gebruikers.
Hieronder ziet u een coole navigatiebalk met een stiktextuureffect. De highlight-stijl kan worden weergegeven als een verduisterde doos of als een neerwaartse punt die naar de pagina-inhoud wijst. Deze stijl is in de loop der jaren prominent aanwezig en ziet er geweldig uit in de juiste setting.
Oorspronkelijke bron - Download
Een andere soortgelijke freebie is deze getextureerde kopernavigatie ontworpen door Edi Gil. Ik vind het echt leuk hoe deze tweede navigatiebalk zowel een lijst met koppelingen als enkele extra paginaknoppen bevat. U wilt secundaire links aanbieden aan bezoekers waar ze uw profielen op internet kunnen vinden.
Oorspronkelijke bron - Download
Alternatieve menustijlen
Afgezien van de typische horizontale navigatiebalk zijn er andere stijlen van design te overwegen. Verticale links kunnen worden opgesplitst in verschillende subrubrieken waardoor er meer ruimte is voor pagina-inhoud.
Neem bijvoorbeeld het menu hieronder, ontworpen door de website Icojam.
Elke kop is gemaakt om uit te vouwen en samen te vouwen op basis van het geselecteerde object. Bovendien staat het ontwerp een kleine teller toe om aan de rechterkant van elke categorie te zitten. Dit zou het best kunnen worden ingevuld als een blognavigatie om te tellen hoeveel berichten onder elk onderwerp zijn gearchiveerd.
Oorspronkelijke bron - Download
Navigatietips / Handleidingen:
- 50+ Schone op CSS-tabbladen gebaseerde navigatiescripts
- Breadcrumb Navigatie Best Practices & Examples
- Mobiele navigatie opbouwen met jQuery
- Coding Breadcrumb Navigation In CSS3
- Navigatie ontwerpen met MINDER CSS
Schonere webformulieren
De moderne tijd van internet is verre van een statische ontmoetingsplaats. Gebruikers delen voortdurend informatie en communiceren dagelijks met elkaar. Het grootste deel van deze delen van tekst en media wordt beheerd via webformulieren.
We moeten slechts een paar voorbeelden bekijken van hoe u fraaie vorminvoer en knoppen kunt ontwerpen. Het ontwerp van uw elementen kan een grote bijdrage leveren aan het uitnodigen van uw bezoekers om ze daadwerkelijk te gebruiken. En dit bouwt op zijn beurt weer de geloofwaardigheid van uw site op en genereert meer pageviews.
Aanmeldvelden
Er zijn enkele geweldige voorbeelden van PSD's voor inloggen om uit te checken. Deze inlogfeedback via WP-wetenschapper heeft al je standaardelementen. Twee invoervelden voor aanmelding / wachtwoord, een verzendknop en selectievakjes om sessiecookies te beheren.
Dit ontwerpmodel is perfect als je de effecten via jQuery kunt implementeren. De rechterbovenhoek van de pijl doet denken aan een vensterinstelling in pop-upstijl. Dit is een geweldige techniek om ruimte op uw website te besparen door het formulier verborgen te houden totdat een gebruiker op de registratielink klikt.
Oorspronkelijke bron - Download
Het onderstaande formulier kan gratis worden gedownload dankzij de ontwerper Gil Huybrecht. Hij gebruikte een vergelijkbaar patroon met een korrelige achtergrond en papierstructuur. Wat ik vooral leuk vind aan het ontwerp van Gil zijn de 'extra grote' elementen. Het is veel vriendelijker om te landen op een inlogformulier dat de hele pagina vult. Gebruikers kunnen eenvoudig zien wat ze typen en er is minder rommel.
Oorspronkelijke bron - Download
Als je ervaren bent als een frontend ontwikkelaar met CSS3 dan is het super eenvoudig om deze afbeelding in code te vertalen. U kunt zelfs het geselecteerde buitenste gloei-effect en afgeronde hoeken voor de knop en invoervelden implementeren.
Contacten
Een ander formulier dat u op vrijwel elke website vindt, is een contactformulier. Dit bevat normaal gesproken velden voor de naam van de afzender, e-mail en berichtinhoud.
De onderstaande freebie is een geweldig voorbeeld van het gebruik van aangepaste texturen en pictogrammen.
Het ontwerp maakt ook gebruik van plaatsaanduidingstekst in plaats van labels. Dit betekent dat wanneer het formulier voor het eerst wordt geladen, elk veld wordt ingesteld met een standaardwaarde (bijv. Uw naam). Maar als je begint te typen, verdwijnt de tijdelijke aanduiding en wordt je inhoud weergegeven. Alle browsers die voldoen aan de standaarden ondersteunen dit effect en het kan u wat ruimte op de pagina besparen.
Oorspronkelijke bron - Download
Een andere prachtige freebie om te grijpen is dit contactformulier met tabbladen, ontworpen door de getalenteerde Jonno Riekwel. Dit ontwerp is veel eenvoudiger en bevat labels boven elke invoer. Dit is een geweldige oplossing voor grotere bedrijven of startups die berichten moeten verzenden via verschillende afdelingen binnen het bedrijf.
Oorspronkelijke bron - Download
Contact Formulieren tutorials:
- Login / Registratieformulier: Ideeën en mooie voorbeelden
- Maak een log-in formulier voor gestapeld papier
- Maak een op Ajax gebaseerd HTML5 / CSS3-contactformulier
Linten en banners
Slechts 6 of 7 jaar geleden begonnen afgeronde hoeken te stijgen in populaire designtrends. Nu zijn we nog verder gekomen met slagschaduwen en hoeklinten.
Oorspronkelijke bron - Download
Sommige van deze elementen kunnen worden gebruikt als ontwerphoogtepunten, zoals een commentaarteller of als publicatiedatum voor een blog. Het genaaide lint hierboven is perfect voor portefeuilles of projectpagina's waar u de aandacht van uw bezoekers wilt vastleggen. Je zou ook een vergelijkbaar verticaal lint kunnen proberen waarbij het ontwerp vanaf de bovenkant naar binnen valt.
Deze kleine pagina-effecten doen een lange weg om je lay-out te verbeteren. Bezoekers merken aandacht en zullen houden van deze esthetische beleefdheden. Maar bedenk dat kleine hoeklinten slechts deel uitmaken van deze designtrend.
Oorspronkelijke bron - Download
Bovendien zijn full-on bannerontwerpen waanzinnig populair geworden voor het opbouwen van merkherkenning. U kunt deze gebruiken in uw logo, navigatie, startpagina of zelfs op gekenmerkte blogposts. De implicaties zijn praktisch onbeperkt met goede ontwerpmogelijkheden.
De hoek omwikkelen
Een ander zeer specifiek lintbannereffect wordt uitgevoerd door het ontwerp rond de hoek van uw pagina te wikkelen. Dit bouwt de illusie op dat uw pagina 3-D is en dat het lint rond het bovenste gedeelte van uw website is gewikkeld.
Het onderstaande ontwerp is 100% gratis te downloaden en kan worden gebruikt voor uw eigen projectideeën. U kunt zien hoe dit de aandacht van bezoekers zou trekken en waarom deze trend zo waanzinnig is geworden. Zorg ervoor dat je de banners niet te veel gebruikt. In bulk kunnen deze erg vervelend lijken, net als de oudere "web 2.0" glanzende / gespiegelde effecten.
Oorspronkelijke bron - Download
Ontwerpen met knoppen
Naast hyperlinks krijg je de meeste interactie van bezoekers met knoppen. Deze pagina-items kunnen alles uitvoeren met behulp van jQuery- en Ajax-oproepen, maar je kunt ook knoppen gebruiken om een koppeling te maken met statische inhoud, zoals freebie-downloads bijvoorbeeld!
De UI-kit hieronder, ontworpen door Matt Gentile heeft veel meer dan alleen knoppen. Zijn PSD-set is fantastisch voor beginners die op zoek zijn naar hellingen en structuren voor het maken van vergelijkbare vormen. Vaak vind je veel hogere kwaliteit knoppen in UI-kits dan met singuliere PSD's.
Oorspronkelijke bron - Download
Variaties maken
Terwijl je tijd besteedt aan het oefenen van deze technieken, wil je in de loop van de tijd veel verschillende stijlen maken. Dit kan ertoe leiden dat vergelijkbare knoppen worden geschakeld tussen verschillende projecten en lay-outs. Een goed voorbeeld is de melkachtige knoppen set aangeboden door de ontwerper Robert van Klinken.
Oorspronkelijke bron - Download
Elk van de oorspronkelijke drie knoppen heeft een andere verloopstijl, behalve de hover- en actieve statussen die er hetzelfde uitzien. Wanneer u in Photoshop werkt, moet u de kleuren afstemmen tussen verlopen of de kleuren verplaatsen naar een effectlaag. Met dit inzicht zou je zelfs je eigen gratis freebie-set kunnen bouwen om te downloaden!
Oorspronkelijke bron - Download
Wood + Paper Textures
Wanneer u uw basis lay-outontwerpen moet opfleuren, moet u op weg naar slimmere methoden. Texturen zijn altijd welkom als u ze op de juiste manier kunt implementeren via CSS-achtergronden of inhoud met een vaste breedte. En twee van de meest populaire texturen die ik heb gezien zijn houten en blanco papieren.
Het notepad-idee is heel eenvoudig, maar het kan worden verwerkt tot een cool merkontwerp, als onderdeel van een gebruikersinterface-element of ingebouwd in de volledige lay-out. Maar papier ziet er op zichzelf niet altijd het beste uit, en een andere textuur kan helpen de stijlen te integreren. Dit is waar meer gedetailleerde texturen van hout in het spel kunnen komen.
Oorspronkelijke bron - Download
Afbeeldingen zullen opvallen en er prachtig uitzien, gewikkeld in een buitenste schil. Het hele concept van textuur is om uw website een specifiek gevoel of emotie te geven. Houten thema's kunnen een gevoel van thuis en de natuur oproepen. Er is zelfs een geweldige houten web-gebruikersinterface om te downloaden door Jeremiah Wingett. Als je je creatief voelt, probeer dan wat van je eigen texturen samen te stellen en kijk hoe ze presteren in een webgebaseerde omgeving.
28 Hoge resolutie houtstructuren
Conclusie
De beste webontwerpers zijn degenen die dagelijks oefenen en hun mislukkingen nooit laten afleiden van hun uiteindelijke doelen. Je moet snel reageren en snel terugkeren van zowel succesvolle als mislukte pogingen. De tips en freebies in deze handleiding moeten een goed startpunt zijn om te leren hoe je verschillende paginaconcepten kunt bouwen voor een webproject. En we willen graag uw gedachten over de kwestie in het postdiscussiegebied lezen.
