Share
In de afgelopen jaren is platte vormgeving steeds populairder geworden en blijft het de wereld van web- en grafisch ontwerp domineren.
Wat is een plat ontwerp? In wezen is een vlak ontwerp gericht op bruikbaarheid en gebrek aan schaduwen, schuine kanten, verlopen en andere esthetische elementen die de aandacht afleiden van wat echt belangrijk is: uw inhoud. Het wordt meestal gekenmerkt door grote en krachtige typografie, lijnpictogrammen en effen achtergrond in heldere kleuren.
Vlak ontwerp werd populair gemaakt door Microsoft, toen ze hun volledige gebruikersinterface in Windows 8 opnieuw vormgaven. Het werd snel door Google en Apple overgenomen en werd langzaam mainstream en wordt nu gebruikt in tal van webdesignsjablonen..
In deze zelfstudie leert u hoe u snel een plat eigen websiteontwerp maakt met behulp van een plat WordPress-thema. Maar eerst een paar geweldige voorbeelden van het ontwerp van platte sites:
Voordat we dieper in deze zelfstudie duiken, zijn hier vijf voorbeelden van platte websites om u te inspireren voor uw volgende project:
Blocklevel is een digitaal ontwerpbureau uit Nederland. Hun website heeft een plat website-ontwerp met een donkere achtergrond en veel levendige kleuren op hun homepage. De site heeft ook veel witte ruimte rondom de elementen, waardoor de hele site er schoon uitziet. Hierdoor is de site eenvoudig te navigeren en worden bezoekers direct aangetrokken door verschillende secties op de startpagina.
Gemaakt door FibbGemaakt door Fibb is een ander voorbeeld van een bureau dat een plat ontwerp gebruikt. Je ziet meteen de heldergele kleur, een navigatiemenu dat opzij is geschoven, zodat het de rest van de pagina niet opruimt, en gedurfde typografie die gemakkelijk te lezen is.
Speeltuin Inc.Playground Inc. koos voor een felrode achtergrond in combinatie met witte typografie in hun kop en een witte achtergrond met een zwart en vet lettertype. De site maakt ook gebruik van een vlakke websiteontwerp met geanimeerde pictogrammen die perfecte aandachttrekkers zijn.
GeckoboardDe specialiteit van Geckoboard is het maken van aangepaste dashboards, zodat bedrijfseigenaren en teammanagers belangrijke statistieken kunnen bijhouden. Hun website gebruikt een donkergrijze achtergrond met veel levendige groene en elegante typografie in een platte ontwerpstijl.
TripIAgentReisagentschap TriplAgent koos voor een plat ontwerp met paarse kleuren en prachtige fotografie om verschillende gidsen te illustreren die ze op hun site hebben. Het hoofdmenu is naar de zijkant geduwd en een witte typografie gecombineerd met ghostknoppen maakt oproepen tot actie gemakkelijk op te merken.
Als u een moderne website voor uw bedrijf, portfolio of blog wilt maken, is het kiezen van een plat thema een goede keuze. In het bericht van vandaag laten we u zien hoe u een van onze platte WordPress-websitesjablonen gebruikt om een prachtige website te maken die zeker de aandacht van uw bezoekers trekt.
Ik zal het Kirion-thema gebruiken, een veelzijdige WordPress-websitesjabloon met een stijlvol plat ontwerp. Dankzij zijn veelzijdigheid kan het worden gebruikt voor bedrijfssites en portfoliosites. Het biedt verschillende vooraf gemaakte demo's, een gebruiksvriendelijke paginabuilder en veel aanpassingsmogelijkheden om het echt van u te maken.
Kirion platte WordPress website ontwerpsjabloon.Voordat u begint met het bouwen van uw platte website-ontwerp, is het noodzakelijk om een domeinnaam te kiezen en deze te kopen, evenals een pro-hostingplan te ontvangen waarin al uw websitebestanden worden ondergebracht.
Het is ook een goed idee om een WordPress-thema te kiezen en de tekst en afbeeldingen voor te bereiden die op uw website worden weergegeven. Dit maakt het gemakkelijk om eenvoudig uw inhoud te kopiëren en te plakken, in plaats van deze helemaal opnieuw te schrijven terwijl u uw site bouwt.
Het kiezen van de juiste domeinnaam is zeker niet eenvoudig. Er zijn echter een paar dingen die u in gedachten moet houden die u zullen helpen uw keuzes te beperken.
Denk na over het doel van uw site. Is het een bedrijfssite voor een reeds gevestigd bedrijf? Ben je een persoonlijke portfolio aan het maken? Misschien wil je je eigen blog starten?
Voor bedrijfssites is het een goed idee om bij uw bedrijfsnaam te blijven, terwijl eigenaars van persoonlijke portefeuilles meestal met hun eigen naam meegaan. Als je een blogger bent, overweeg dan de onderwerpen van je blog en kies een naam die gerelateerd is aan waar je over gaat schrijven. Dit maakt het gemakkelijk voor lezers om te weten wat ze kunnen verwachten in termen van inhoud.
Probeer indien mogelijk een .COM-extensie te gebruiken en vergeet niet de naam gemakkelijk te spellen en gemakkelijk uit te spreken te houden.
U moet een hostingbedrijf kiezen zodat u WordPress op hun server kunt installeren en uw site beschikbaar kunt maken voor bezoekers. Er zijn tal van hosting-bedrijven die er zijn en WordPress heeft zelfs aanbevelingen voor gerenommeerde hosts.
De volgende stap is om een thema voor uw site te kiezen en aan te schaffen. Zoals eerder vermeld, zijn er veel platte WordPress-thema's en het beste deel over het kiezen van een premium WP-thema is de gegarandeerde ondersteuning door de auteur. Je kunt er ook zeker van zijn dat het thema regelmatig zal worden bijgewerkt, zodat je niet zult vastzitten met een verouderd websitethemaontwerp.
De laatste voorbereidingsstap is het uitschrijven van de inhoud en het verzamelen van alle afbeeldingen en visuele middelen zoals uw logo, uw favicon, eventuele achtergrondafbeeldingen of -patronen en deze ergens gemakkelijk toegankelijk te hebben.
Nu u uw domeinnaam, een hostingplan, een pro-thema en al uw inhoud klaar heeft, is het tijd om aan de slag te gaan met het maken van uw websiteontwerp. U moet WordPress installeren, het thema, vereiste plug-ins, uw pagina's instellen en uw site aanpassen. Laten we beginnen!
Wanneer u uw hostingplannen koopt, stuurt de hostingprovider u een welkomstmail met de informatie over uw account. Je hebt de gebruikersnaam en het wachtwoord nodig die ze je hebben gegeven, zodat je je kunt aanmelden bij het dashboard van je account. Nadat u bent ingelogd, bladert u naar de sectie Website of Scripts en zoekt u naar WordPress. Selecteer het en volg de stappen om WordPress op uw site te installeren.
In de meeste gevallen moet u de titel en beschrijving van uw site invoeren, uw gewenste gebruikersnaam en wachtwoord instellen en uw e-mailadres invullen. Nadat u alle informatie hebt ingevuld, klikt u op Installeren knop.
Het installatieproces duurt meestal een paar minuten. Hierna ziet u een bericht dat WordPress is geïnstalleerd. Om in te loggen op uw dashboard gaat u naar www.yoursitename.com/wp-admin en voert u de gebruikersnaam en het wachtwoord in die u tijdens de installatie hebt gemaakt.
Nu dat u bent ingelogd op uw dashboard, moet u het platte WordPress-thema installeren dat u hebt gekocht. Ga naar Uiterlijk> Thema's> Nieuw toevoegen. Dan klikken Thema uploaden.
Zoek daarna de gecomprimeerde map met de bestanden van het WP-thema en upload deze. Nadat de installatie is voltooid, klikt u op Activeren.
Als je het Kirion-thema gebruikt zoals in deze tutorial, moet je het bovenliggende thema, LayersWP, gratis downloaden en je hoeft het niet te activeren. Upload eenvoudigweg LayersWP, upload vervolgens het Kirion WordPress-thema en activeer het.
De volgende stap is om alle vereiste plug-ins te installeren. U ziet een melding in uw dashboard die aangeeft welke plug-ins vereist zijn, samen met een koppeling die u rechtstreeks naar het installatiescherm brengt.
De vereiste WordPress-plug-ins installeren.Selecteer alle plug-ins en kies Installeren in het vervolgkeuzemenu. Ga naar wanneer de plug-ins zijn geïnstalleerd Plug-ins> Alle plug-ins en selecteer Inactieve plug-ins kies dan Activeren in het vervolgkeuzemenu.
Nu het WordPress-themaontwerp en de plug-ins zijn geïnstalleerd en geactiveerd, kunt u beginnen met het instellen van uw websitepagina's en het aanpassen van kleuren, lettertypen en meer. In de meeste gevallen is het importeren van de demo-inhoud de beste manier om de insteltijd van uw thema te versnellen en de inhoud gemakkelijk te kunnen bewerken..
Als je gebruik wilt maken van de demo-inhoud, dan moet je naar je dashboard gaan en het submenu vinden Hulpmiddelen> Importeren. Daar, vind WordPress Importer, installeer het en klik vervolgens op Voer de importeur uit. Gewoonlijk krijgt u in uw themamap een submap met de naam Demo importeren of Voorbeeldgegevens. Gebruik de XML-bestanden in een van deze mappen om alle berichten, pagina's, lay-outs en afbeeldingen te importeren.
Als alternatief, als u het Kirion-thema gebruikt, gaat u naar Lagen> Nieuwe pagina toevoegen. Zoals je kunt zien aan de hand van de onderstaande screenshot, bevat Kirion verschillende paginasjablonen die je kunt gebruiken om je website te bouwen. Ik koos voor de Kirion Home Layout One voor de startpagina.
Voer de paginanaam in en klik vervolgens op ga verder met aanpassenr. Uw pagina wordt onmiddellijk aangemaakt en u wordt doorgestuurd naar de Customizer scherm.
Wanneer de Customizer wordt geladen, ziet u alle beschikbare opties. U kunt de lay-out bewerken door op de te klikken Bewerk lay-out keuze. De editor is vrij eenvoudig en gemakkelijk te gebruiken. Het enige dat u hoeft te doen, is het gewenste element selecteren en de inhoud vervangen door uw eigen element. U kunt ook de achtergrond bewerken, uw eigen aanbevolen afbeeldingen uploaden, schuifregelaarafbeeldingen vervangen en nog veel meer.
Layout bewerken.Ga naar als u nog meer pagina's wilt maken en bewerken Lagen> Nieuwe pagina toevoegen en kies de lay-out waarmee je wilt werken.
Nieuwe webpagina's toevoegen in Kirion.Selecteer als u de stijlen wilt bewerken Site-instellingen. Hier kunt u kleuren, lettertypen bewerken, uw eigen logo uploaden en meer.
De kleuren aanpassen in uw platte website.Ten slotte moet u een menu voor uw site maken. In de Customizer, Klik op Menu's> Hoofdmenu. Kies eerst een locatie voor het menu. ik heb gekozen hoofd menu. Klik vervolgens op Items toevoegen. Voeg alle pagina's toe die u hebt gemaakt en sla vervolgens het menu op.
Als u meer wilt weten over platte ontwerpen en de principes ervan op uw site wilt toepassen, hebben we een aantal zelfstudies en cursussen verzameld om u op weg te helpen:
Deze tutorial bevat de beste tips voor het maken van grafische afbeeldingen die goed werken met elke platte type website. U leert iets van de platte ontwerpgeschiedenis en hoe u eenvoudige maar toch indrukwekkende pictogrammen maakt, hoe u kleuren gebruikt en meer.
Deze cursus is een diepgaande rondleiding door de platte esthetiek en hoe je dit kunt bereiken in je eigen ontwerpen. U leert hoe u uw Photoshop-bestand instelt, een lay-out maakt voor een platte website en alle elementen ontwerpt die zullen worden gebruikt, zoals pictogrammen, formulieren, menu's en meer.
Als je graag met Affinity Designer werkt, ben je dol op deze cursus. Je leert alles over het maken van platte vectorpictogrammen; handige tips en trucs om met geometrische basisvormen te werken, deze aan te passen en verschillende bewerkingen te gebruiken om de vormen te combineren. De cursus behandelt ook hoe de objecten en de hoofdfuncties van het programma moeten worden uitgelijnd en gerangschikt.
Probeer deze cursus als u van plan bent UI-ontwerpelementen te maken. De cursus behandelt hoe u menu's, knoppen, tabbladen, videospelers, datumkiezers en andere elementen van de gebruikersinterface maakt met behulp van een platte ontwerpstijl.
Deze cursus behandelt zowel Adobe Photoshop als Adobe Illustrator, twee krachtige programma's die als de industriestandaard worden beschouwd als het gaat om ontwerp. In de cursus leert u hoe u platte pictogramontwerpen maakt, hoe u ze exporteert en hoe u inkomsten kunt genereren met uw creatieve inspanningen.
Het creëren van een platte website is nog nooit zo eenvoudig geweest dankzij WordPress en prachtige, hoogwaardige platte thema's van hoge kwaliteit. Ga vandaag nog aan uw platte website werken door onze verzameling platte WordPress-thema's te bekijken.
Accentsconagua