Maak een schone website-indeling in Photoshop - Een website-indeling ontwerpen is meer dan het ordenen van kleurrijke afbeeldingen en het vullen van tekst in de tekstkaders. Het is een benadering die de volumes van uw klant spreekt. De kleuren en afbeeldingen van de website bepalen de aard van het bedrijf, terwijl de kwaliteit van het ontwerp en de gemakkelijke navigatiestroom van de website de gebruiker met de organisatie moeten verbinden en hem tot een potentiële klant moeten maken.
Het ontwerpen van een mooie en gemakkelijk toegankelijke website-indeling is verplicht voor elke wannabe-webdesigner. Deze zelfstudie is bedoeld om u door het proces te leiden om een eenvoudige en schone website te maken vanaf het begin. Tijdens het proces kom je belangrijke punten te weten die je verder helpen bij het verkrijgen van meer kennis over webdesign. 
Schrijf uw vereisten op voordat u een website-indeling ontwerpt
Voordat u begint met het ontwerpen van een website-indeling, moet u weten hoe uw website eruit zal zien en wat de onderwerpen zijn die u op de website moet opnemen. Het is cruciaal om op zijn website een lijst te maken met elementen van de website-indeling die uw klant nodig heeft. Samen met dat, is de kwaliteit van een goede ontwerper om een proef van de hele website voor te bereiden voordat hij aan de definitieve sjabloon begint te werken.
Verschillende ontwerpbedrijven passen verschillende niveaus van pre-ontwerpstrategieën aan, waaronder draadomlijsting, prototyping, mockup, bètaversies en nog veel meer. In deze zelfstudie maken we een mock-upversie voordat we het oorspronkelijke sjabloonontwerp starten. Ik gebruik de grijze tinten waarmee het mockup-blok kan worden geïdentificeerd
Canvas
Jaren eerder waren er maar weinig besturingssystemen en beperkte apparaten om toegang te krijgen tot websites, maar de afmetingen van de pagina waren vastgesteld op één of twee formaten. Vandaag is het scenario helemaal anders. Eindgebruikers bezoeken sites op desktops van verschillende formaten, mobiele telefoons, iPads en tablets. In deze gevarieerde situatie is er geen kans dat u uw webpagina kunt aanpassen aan een bepaalde grootte. Maar er zijn enkele industriestandaardgroottes toegepast voor elk apparaat. U zult langzaam uw favoriete maat vinden of uw klant kan u een website doorverwijzen om de maten na te bootsen.
In dit geval werken we aan de volgende dimensies. Maak je geen zorgen over de hoogte, want deze zal in de loop van de tijd veranderen. Hoe meer inhoud u aan uw website toevoegt, hoe groter de hoogte zal zijn.
Vergeet niet dat het gebruikelijk is om verticaal over de pagina te scrollen, dus u kunt niet op een bepaalde hoogte voor uw webpagina instellen, tenzij u niet wilt dat de gebruiker op uw startpagina als Google schuift. Maar het is noodzakelijk om niet horizontaal te scrollen. Beperk dus uw breedte volgens de industrienormen en word niet creatief met horizontaal scrollen.
Voor internet is de resolutie beperkt tot 72. Er zijn recentelijk afbeeldingen en pagina's met een hogere resolutie gevonden op iPads en enkele tablets. Maar het komt zelden voor en het is beter om bij 72 te blijven, rekening houdend met de internetsnelheid over de hele wereld.
Selecteer de bestanden met de opdracht Ctrl + A en teken hulplijnen gelijkmatig door de sjabloon. Een website moet netjes worden georganiseerd met elk element in samenhang met elkaar gerangschikt. En richtlijnen voor de lay-out van de website helpen u deze eenvoudig te verkrijgen.
Maak je mockup klaar
Door uw mockup-bestand op uw oorspronkelijke sjabloon te plaatsen, kunt u veel tijd besparen. Het ontwerpen van uw website wordt zo eenvoudig dat u het raamwerk binnen enkele minuten zult voltooien. Het model helpt u echter alleen om de frames te ontwerpen. Het voltooien van de elementen van het ontwerp met details, typeschikking en uitlijning kost meer tijd dan het tekenen van de lay-out van de website.
Kleurenschema en andere keuzes
Het volgende dat u moet doen nadat u uw framework gereed hebt gemaakt, is een kleurenschema kiezen. Maar het is beter om je kleuren klaar te maken voordat je aan het ontwerp begint te werken.
Het komt allemaal neer op de boodschap dat je je wapens gereed moet maken voordat je aan het ontwerp begint. Alles, inclusief pictogrammen, afbeeldingen en kleurkeuzes, moet gereed zijn voordat u begint te werken. Het organiseren en plannen van uw werk bespaart meer tijd en is gericht op ontwerp zonder tussendoor.
Het kiezen van kleuren kan de keuze van de ontwerper zijn als het bedrijf nieuw is en nog niet eerder een huisstijl heeft. In sommige gevallen geven klanten een idee van welke tinten het logo of de achtergrond moet zijn. In het geval van bestaande bedrijven waar u mogelijk een hele website opnieuw moet ontwerpen, moet u mogelijk dezelfde kleuren kiezen als de behoeften van de klant.
Er zijn talloze websites die u kunnen helpen om miljoenen kleurenschema's uit de archieven te kiezen. Probeer de volgende websites uit om te genieten van een ruime keuze aan kleurencombinaties.
Color.adobe.com
Colourlovers.com
Hier koos ik enkele tinten blauw om te gebruiken voor de website. De hele website wordt gepland in het volgende kleurenschema. Vergeet niet om drie of vier verschillende kleurencombinaties te kiezen, omdat we niet weten welke kleurclient de voorkeur heeft. Zodra de klant een kleurenschema heeft voltooid, slaat u de schaduwwaarden op en zorgt u ervoor dat de kleuren een cruciale rol spelen in elke verticale van de organisatie. Vooral in de huisstijl.
Ontwerpproces
Er zijn veel manieren om je ontwerpers verder te helpen. Er zijn geen harde en snelle website-indelingsregels om het ontwerpproces te definiëren of te volgen, het is meestal een proces dat de ontwerper voor zijn gemak zal kiezen.
Sommige ontwerpers willen de hele blokken en frames bouwen en in de tweede fase aan details werken, gevolgd door het type en uiteindelijk uitlijningen en aanpassingen. Sommigen vinden het leuk om een deel van de pagina in één keer af te werken en naar het volgende deel te gaan. We volgen de tweede stijl.
We zullen de website in de volgende stappen voltooien
- Koptekst en voettekst
- Wat we doen
- Diensten
- Het formulier
- Nieuws
- footer
Koptekst en voettekst
De vuistregel om de afmetingen van uw koptekst of banner te definiëren, wordt aan uw creativiteit overgelaten. Volgens de laatste trends verschijnen websites met een enorm beeld dat uw hele computerscherm bedekt. De stijl wordt Hero-afbeelding genoemd, die de laatste tijd behoorlijk populair werd.
In dit geval zijn we begonnen met een kop met een hoogte van 120 pixels en een hoogte van 550 pixels voor de banner. De breedte moet overeenkomen met de documentgrootte.
Ontwerpen met effen kleuren hebben een platte uitstraling die niet goed past bij grotere kaders of afbeeldingen. Om de platte look te voorkomen, heb ik een gradiënt-overlaylaag bovenop de banner toegepast. Het geeft de banner een diepte die langzaam transformeert van de ene tint naar de andere.
Vervolgens begonnen we het logo te importeren en in de linkerbovenhoek van de kop te plaatsen en nog een groter logo in het midden van de banner. U kunt ook de vectorvormen van de lay-out van de website in de rechterbovenhoek bekijken, die worden gebruikt om de links naar sociale media te delen.
In dit stadium ben ik klaar met het toevoegen van het type in het gedeelte Koptekst en banner. Bedrijfsnaam, merkboodschap, met links en diensten, worden aan de tekst toegevoegd. U kunt ook een transparante knop op de banner bekijken.
Tekst zonder opmaak of teveel tekst zonder speciale functies zal het uiterlijk van uw webpagina bederven; de pagina zal de gebruiker snel vervelen, waardoor hij uw site snel kan verlaten. Bekijk de vectorvorm die ik heb toegevoegd aan de links voor services rechtsboven op de banner. De stijl is eenvoudig, maar vult de leegte en vermijdt de alledaagse look.
Kies een afbeelding die geschikt is voor het bedrijf. Er zijn miljoenen stockafbeeldingen beschikbaar op het web en het zal niet te lang duren om een afbeelding te vinden die aan uw eisen voldoet.
In mijn geval vond ik een afbeelding van hoge kwaliteit die volgens mij goed bij mijn website past. Ik heb geen zakelijk thema voor de website, dus ik ben vrij om elke afbeelding te kiezen die er goed uitziet op de bannerpost.
Probeer enkele HD-afbeeldingen te downloaden van gratis stockafbeeldingenites hieronder
www.pixabay.com
Blending is een kunst die je moet beheersen om prachtige banners te produceren. Hier heb ik drie lagen gemengd om het effect te bereiken dat in de bovenstaande afbeelding wordt getoond. Hier is wat ik deed
- Plaats de afbeeldingslaag op de blauwe banner
- Plaats de verloopoverlay boven de afbeelding
- Verander de dekking van de afbeelding 40 procent en verander de mengmodus in verschil.
- Bekijk het lagenpalet in de bovenstaande afbeelding om te begrijpen hoe de lagen op elkaar zijn gestapeld.
Dit is hoe uw koptekst en banner eruit zullen zien als we net klaar zijn met eraan te werken. We werken aan één onderdeel tegelijk en het is tijd om door te gaan naar het volgende niveau.
Afstemming van cruciaal belang als het gaat om type; heb een idee van hoe uw site eruit moet zien en tekst moet worden uitgelijnd voordat u begint. Op dit niveau gebruikte ik twee verschillende tekstkaders, beide links uitgelijnd.
De volgende stap is het ontwerpen van het dienstengedeelte van de webpagina. Ik ontwierp een metalen ster in grijze tinten om verschillende diensten van het bedrijf onder de aandacht te brengen. De bedoeling van het gebruik van het stersymbool is 5 Star-services.
Als het gaat om het uitlijnen van de tekst, zijn gidsen je beste vrienden. Coherentie binnen type en objecten kan worden verkregen door goed gebruik te maken van de witte ruimte en gelijke openingen tussen de elementen van het ontwerp. Ik heb veel richtlijnen voor de lay-out van de website gebruikt om te zien dat alle objecten in het frame de juiste openingen en afstanden moeten behouden die een behoorlijke hoeveelheid witruimte opleveren.
De volgende stap van ons ontwerp is het maken van het formulierveld. In dit geval werk ik tegengesteld aan de methode die we hebben gebruikt bij het ontwerpen van de banner. We zullen de afbeeldingslaag onder de effen gekleurde laag plaatsen en een gradiëntlaag bovenop de twee lagen aanbrengen om een betere look te krijgen. Spelen met de overvloeimodi is altijd essentieel bij het plaatsen van grotere afbeeldingen.
De keuze van de afbeeldingen voor deze site heeft geen specifiek thema. Ik denk dat deze afbeelding de site zal helpen er beter uit te zien.
Plaats de afbeelding onder de gekleurde achtergrondlaag. Gebruik de maskeeropties voor lagen om de afbeelding exact op de grootte van de gekleurde laag te fixeren.
Bekijk het lagenpalet in de bovenstaande afbeelding. De effen blauw gekleurde laag bevindt zich bovenaan de afbeelding, de overvloeimodus wordt omgezet in overlay en de dekking wordt verlaagd tot 65 procent.
Ik gebruikte de verloopkaart bovenop de twee lagen. De overvloeimodus wordt gewijzigd in tint en de dekking blijft hetzelfde.
Het formuliervak is klaar, wat ons naar het einde van het vierde niveau in ons websiteontwerp brengt.
Ons volgende niveau bestaat uit twee eenvoudige tekstframes. Het lijkt op niveau twee van de webpagina en ik heb de twee vakken op dezelfde manier uitgelijnd. Coherentie handhaven in uitlijning is een goede manier om de witte ruimte te gebruiken.
Wanneer we het laatste deel van de pagina hebben bereikt, is het tijd om de afmetingen van de voettekst opnieuw te bekijken. De ontwerper moet de hoogte van de voettekst plannen op basis van de links die hij daar moet gebruiken. In dit geval gaf ik een hoogte van 170 pixels aan mijn voettekst. Breedte blijft hetzelfde als de website.
Plaats de links en afbeeldingen volgens uw vereiste.
Hiermee hebben we het ontwerpgedeelte van onze website afgesloten. De gebruikte kleurencombinaties zijn minimaal, we gebruiken veel witruimte in ons ontwerp en hebben eenvoudige tekst toegevoegd met minimale lettertypen. De bedoeling is om een schone webpagina te ontwerpen, waarvan we hopen dat deze wordt vervuld.
Bekijk nogmaals het ontwerp van de hele pagina hieronder
