Share
Eerder in Web Design Week zagen we hoe een eenvoudige lay-out kan worden gemixt en gecombineerd met verschillende achtergronden, patronen en foto's, vandaag gaan we een stap verder gaan. We gaan het uiterlijk van een website volledig veranderen door niet alleen de achtergrond, maar ook de algemene stijl van het ontwerp te veranderen.
We beginnen met de Grungy Paper Texture Site die we in een eerdere tutorial hebben gemaakt, waarna we het ontwerp veranderen in minimal, metallic, abstract en web2! En daarna zullen we het hebben over het leren van een bibliotheek met webontwerpstijlen. Dus laten we beginnen…
Dit bericht is dag 8 van onze webdesignsessie. Sessiedag 7 van Creative Sessions op sessiedag 9Dus zoals u zich herinnert uit onze originele zelfstudie ziet het site-ontwerp er als volgt uit:
Het is een grungy ogend, gestructureerd ontwerp op basis van een eenvoudige, solide, onderliggende lay-out. Wat we gaan doen, is die onderliggende lay-out nemen en behandelen als een coathanger, verschillende stijlen uitwisselen en kijken waarom elke look werkt.
In elke stijl is er veel variatie, maar hier zijn een paar kenmerken van een soort grungy uiterlijk:
Een relatief schoon ontwerp getrouwd met een aantal grungy elementen - papier, texturen.
Bezoek Site
Tekst voor uit plaatsing, collaged elementen en texturen.
Bezoek Site
Een goed voorbeeld van een grungy blik gericht op geordend gebruik in een blogstructuur.
Bezoek Site
Plenty More Voorbeelden van alle dingen grungy!
Bezoek Site
Onze eerste ontwerpstap is om onze look volledig terug te draaien en alles te verwijderen wat niet essentieel is. We willen dit doen zodat we een startpunt hebben voor de andere ontwerpen, maar onderweg zullen we een soort minimale look creëren.
Dit zijn de te nemen stappen:
Hier is onze minimale versie:
Van alle looks die we vandaag gaan doen, is dit het minst geschikt voor deze lay-out, met name voor het gebied met tabbladen. Toch is het een goede benadering ...
In elke stijl is er veel variatie, maar hier zijn een paar kenmerken van een minimale look:
Echt minimaal met een kleurenschema
Bezoek Site
Minimale typografie en strakke lijnen gemengd met een vleugje gewaagde fotografie / designelementen
Bezoek Site
Minimal meets Flash - en bekijk de portfolio met werk met veel meer voorbeelden van minimale ontwerpen.
Bezoek Site
Veel meer minimaal ontwerp om uit te checken
Bezoek Site
Met de minimale look die we zojuist hebben gecreëerd, kunnen we nu weer wat stijl toevoegen. Deze keer willen we een metaalachtige look maken. Daarvoor hebben we wat lichte grijstinten nodig, en deze zien er vooral geweldig uit op een donkere achtergrond.
Dit zijn de te nemen stappen:
Dit is onze metallic versie:
En hier zijn enkele opmerkingen:
In elke stijl is er veel variatie, maar hier zijn een paar kenmerken van een metaalachtige look:
Apple gebruikt al een tijdje een metalen top-navigatiebalk, met lichte schuine randen op de tekst, een ingebed Apple-pictogram en een paar andere metallic effecten.
Bezoek Site
Lance is een meester in het interfaceontwerp van Photoshop, bekijk zijn portfolio van metalen interfaces
Bezoek Site
Een zeer glad uitziend metalen ontwerp.
Bezoek Site
Een look die altijd populair is, is om een abstracte achtergrond, wat transparantie en een aantal super schone typografie te gebruiken. Dus dat gaan we nu doen!
Dus, opnieuw uitgaande van het minimale ontwerp:
Hier is onze abstracte versie:
En hier zijn enkele opmerkingen over het ontwerp:
In elke stijl is er veel variatie, maar hier zijn een paar kenmerken van deze look:
Prachtige rokerige achtergrondlook.
Bezoek Site
Combineert een schitterende grungy achtergrond met lagen en secties voor een geweldig effect
Bezoek Site
Onze laatste stijlstop bevindt zich in het clichéland van Web 2.0-ontwerp. Ik moet toegeven dat ik niet eens echt zeker weet wat web2-ontwerp echt is, maar ik heb geprobeerd deze versie vriendelijk en benaderbaar te maken - wat volgens mij het belangrijkste kenmerk van de stijl is.
Opnieuw beginnen met het minimale ontwerp:
Dit is onze web 2.0-versie:
En hier zijn enkele opmerkingen!
In elke stijl is er veel variatie, maar hier zijn een paar kenmerken van een web 2.0-achtige look:
Voor mij begonnen deze jongens echt veel van wat ik associeer met Web 2.0
Bezoek Site
Ik hou van die kleine man! Een aasontwerp door SimpleBits.
Bezoek Site
Een super heldere gradiënt maakt deze website.
Bezoek Site
Dus hier zijn ze allemaal, je kunt op de afbeelding hieronder klikken om ze op ware grootte te zien. Ook als u een Plus-lid bent, kunt u alle vijf PSD-bestanden uit het Plus-gebied halen.
Dus laten we eerlijk zijn, de vijf lay-outs zijn niet per se bijzonder goede voorbeelden van hun respectieve stijlen. Mijn doel in deze tutorial is om je te laten zien hoe je een ontwerp een bepaalde look of stijl kunt geven door bepaalde visuele aanwijzingen te volgen. Je zou in staat moeten zijn om te zien dat je dezelfde lay-out op verschillende manieren kunt kleden.
Om echt een goed voorbeeld van een bepaalde ontwerpstijl te produceren, zou je waarschijnlijk je lay-out meer specifiek aanpassen aan die stijl. En natuurlijk hadden ze allemaal veel meer tijd nodig dan ik :-) Toch hoop ik dat deze ruil van stijlen illustreert hoe je naar webontwerpen kunt kijken om verschillende ontwerpstijlen te leren.
In ons vorige artikel - 8 Ideeën, technieken en trucs voor uw Web Design Toolkit, zei ik dat het een goed idee is om een bibliotheek met stijlen te hebben om op te tekenen.
Wanneer u een lege tekening tekent bij het starten van een nieuw project, kan het soms goed zijn om gewoon terug te vallen op een vooraf gedefinieerde stijlkeuze en u vervolgens te laten begeleiden. Onvermijdelijk zul je eindigen met iets totaal anders dan alles wat je eerder hebt ontworpen, en het zal je op zijn minst helpen om aan de slag te gaan. Maar wees voorzichtig met het gebruik van de verkeerde stijl, alleen omdat het er cool uitziet, en niet omdat het geschikt is voor de client / bericht / inhoud. Het enige tegengif om dit te doen is om te weten en veel verschillende ontwerpstijlen te hebben.
In dit artikel hebben we kort naar vijf looks of stijlen gekeken, en er zijn miljoenen stijlen, substyles, combinaties, aanpassingen en looks die gewoon allemaal stijl trotseren.
De enige echte manier om ontwerpstijlen te leren, is door ernaar te kijken. Nu is er kijken en dan is er op zoek! Een gewoon persoon kijkt meestal naar een website, poster of een ander ontwerp en ziet gewoon de inhoud, het bericht en misschien het gevoel van het ontwerp. Als ontwerper moet je alles op een analytische manier bekijken, kijken waarom een ontwerp een bepaald gevoel heeft, welke boodschap het ontwerp zelf geeft, welke lettertypen zijn gebruikt, welke visuele elementen en technieken de ontwerper heeft gebruikt, hoe het is gecombineerd en hoe het is geregeld.
Je moet altijd naar ontwerp kijken - niet alleen online, maar overal - omdat ontwerpstijlen op geen enkele manier beperkt zijn tot websites. Posters, advertenties, televisiecredits, flyers en overal waar ontwerp is, er is een mogelijkheid om te leren.
Hoe meer u eruit ziet en leert, hoe meer u op uw bevel zult hebben. Wanneer u gaat zitten om een nieuw project te ontwerpen, kunt u nieuwe visuele ideeën opdoen, zelfs wanneer u wordt geconfronteerd met een leeg canvas. Wanneer u materiaal of merken van het ontwerp krijgt, zullen dingen zoals letterbeelden, logo's en berichten stilistische keuzes genereren, zoals aanwijzingen voor een mysterie.
Wanneer je gebruik maakt van stijlen die je eerder hebt gezien, moet je er altijd naar streven om je eigen ontwerpstem te laten horen. Geef het je eigen draai, je bent een specifieke mix of uiterlijk, zodat je ontwerpstem klinkt. En altijd, altijd, zorg ervoor dat je een ontwerp toepast dat past bij de boodschap - val niet in de val van alleen denken aan de esthetiek.
Onthoud dat vorm de functie volgt. De stijl en esthetische keuzes die u maakt, zijn er om de website te helpen zijn functie te vervullen.
Dit bericht is dag 8 van onze webdesignsessie. Sessiedag 7 van Creative Sessions op sessiedag 9
Accentsconagua