Hoe maak je een website te ontwerpen

De 3 basisregels

1. 1
   Regel # 1: Luister naar uw klant. Je mag 'beste website ter wereld ooit in de geschiedenis van het heelal en daarbuiten, "het ontwerpen met veel zwart, verfijnd lettertypen en gewaagde, artistieke kleuren voor een site die schreeuwt' verkennen me nu!" Helaas, uw klant wilde een oranje menubalk met dikke roze en oranje type. Je bent ontslagen, en uw beste website ooit-dat de klant heeft de rechten op-wegkwijnt op hun back-up harde schijf ergens, nooit zichtbaar is voor de sterfelijke mens.
   • Studie van uw klant huisstijl. Hebben de klant laten zien een aantal websites die ze echt willen. Dit zal niet alleen cue u op wat prikkelt hun fantasie, zal het ook geven u enkele ideeën die u misschien niet hebben overwogen.
   • In het geval u dacht dat we een grapje over de oranje en roze website, stel je eens voor dat coolste ooit verfijnde terrein bevorderen van dit product:
     
2. 2
   Regel # 2: Ken uw doelgroep en wat ze zoeken, en dienovereenkomstig te ontwerpen. De reden dat mensen hebben websites is omdat ze willen andere mensen om ze te zien. Het kan informatief, of kan commercieel worden, of het kan voor entertainment doeleinden toegesneden op specifieke demografische. Jouw taak als ontwerper, is om te weten wie je bent ontwerpen voor, en om ze te bewaren op de pagina wanneer ze daar te landen.
   • Je denkt misschien: "Als het er goed uitziet, zullen ze blijven." Maar dit is niet noodzakelijkerwijs het geval. Overwegen vastgoed, bijvoorbeeld. Hier is een site die een schone, leuke ontwerp kenmerkt. Het heeft veel witte ruimte die dingen opent, gedurfde kleuren en een zeer modern uitziende breedbeeldformaat met koppelingen prominent:
     
   • Nu beschouwen deze aanpak van de verkoop van onroerend goed in dezelfde regio: het is rommelig en erg druk, felle kleuren, en slathered met advertenties.
     
   • Raden welke eigenlijk beter werkt voor mensen op zoek naar woningen? Dat klopt, degene die daadwerkelijk lijsten huizen! Als mensen op zoek zijn naar "huizen te koop in Santa Monica," ze niet de zorg over de esthetiek van de site. Ze willen niet weten over de makelaar, of zie mooie foto's van de stad. Ze willen huizen te zien.
3. 3
   Regel # 3: Luister naar jezelf. U begrijpt wat de klant wil, en u weet wat uw markt is op zoek naar. Tot slot, is het tijd om aandacht te besteden aan u, de ontwerper!
   • Opbouwen van een sjabloon in de grafische toepassing van uw keuze. Op afzonderlijke lagen (dus je kunt dingen later te wijzigen zonder het vernietigen van de algemene sjabloon) maken van de elementen die in uw pagina. Die elementen kunnen zijn:
     • Header. Dit is een element dat vaak naar elke pagina op uw website zal zijn. De header bestaat uit de titel en het logo van de site, evenals links naar de andere onderafdelingen van de website (ex. Over, Contact, etc.). Visueel en praktisch, zal dit alles samen te binden. Het is een goede gewoonte om de eerste knop op een menubalk link terug naar de home page te maken.
     • Laten we eens kijken naar Apple, bijvoorbeeld:
       
     • Zoals met de meeste alles wat Apple, hun home page heeft een zeer schone, overzichtelijke vormgeving. Let op de menubalk aan de bovenkant, met een logische onderwerpen voor elke knop, plus een zoekveld-altijd een leuke touch als uw site ondersteunt. Laten we nu eens kijken naar een landing page voor een van de knoppen, de iPad, en laten we een kijkje nemen op een paar van de elementen:
       
     • De menubalk verandert alleen door donkerder de iPad-knop.
     • Het onderwerp van de landing page is in grote zwarte letters in de linkerbovenhoek.
     • Een nieuwe sub-menubalk verschijnt, zodat u meer weten over het product kunt leren. Als u elk van deze submenu rubrieken klikt, ziet u elke pagina zal nieuwe topic-relevante content te bieden, maar identiek in lay-out en het ontwerp zal zijn.
     • Vele malen, elk van de belangrijkste rubriek van uw menubalk zal meerdere subrubrieken die je nodig hebt om rekening te houden. In plaats van het creëren van een tweede menubalk, kunt u gebruik maken van pop-up menu's, zoals dit voorbeeld van Musician's Friend:
       
     • Side bar. Dit zal vaak op vele pagina's van uw site, maar niet noodzakelijkerwijs alle - context is koning. Maar het is een zeer belangrijk element, en moet zorgvuldig worden ontworpen om intuïtief en onnodig rommelig. In tegenstelling tot de menubalk, kan de inhoud van een side bar zijn zeer dynamisch. Overweeg deze twee sidebars van vastgoed marketeer Trulia De eerste is voor kopers:
       
     • En de tweede is voor huurders. Merk de heel andere focus om zeer vergelijkbare informatie, en het lijkt op precies dezelfde plaats op de zijbalk:
       
     • Lichaam. Dit is waar het allemaal gebeurt, en is het meest variabele deel van uw ontwerp. Als u het ontwerpen van een e-commerce site, bijvoorbeeld een pagina kan een product review in het lichaam, terwijl de volgende heeft 20 items te koop. Jouw taak is om de twee samen te binden, zodat ze niet onsamenhangend doen kijken, visueel. Gebruik dezelfde kleuren, lettertypen en interface-elementen om het allemaal samen te trekken.
     • Voettekst. Dit is iets dat niet elke site heeft, of behoeften. Het wordt vaak gebruikt voor dingen die misschien rommel een anders schone interface, of toegang tot delen van de site die niet zijn van de site primaire focus. Hier is een voorbeeld van Groupon:
       

Richtlijnen

1. 1
   Praktijk een goede user interface design. Positioneren van de verschillende elementen van de website, zoals de titel, sidebars, logo's, afbeeldingen en tekst, op dezelfde plaatsen op elke pagina zal uw site bevaarbaar en intuïtief te maken.
   • Houd dezelfde header aan de bovenkant van elke pagina. Of uw content site leent zich voor veel herhalende elementen, en zorg ervoor dat de bovenkant van elke pagina identiek is een must.
   • Gebruik logica in uw ontwerp. De elementen op een pagina moet logisch worden gerangschikt volgens belang of op onderwerp, de verschillende pagina's in de site moet hetzelfde doen.
2. 2
   Maak een consistente stijl. Terwijl de lay-out van uw site moet geven structurele samenhang moet de stijl geven thematische harmonie.
   • Stok met twee of drie hoofdkleuren en zorg ervoor dat ze goed te harmoniseren.
   • Vermijd het gebruik van te veel lettertype stijlen en maten, als je van plan bent om te wisselen tussen een paar, zorg ervoor dat je ze kunt gebruiken op dezelfde manier op elke pagina.
   • Gebruik Cascading Style Sheets (CSS) om een ​​uniforme stijl te beheren, en om het gemakkelijker maken om elementen over een hele website te veranderen zonder te hoeven gaan naar elke individuele pagina.
3. 3
   Maximaliseren leesbaarheid. Om je tekst leesbaarder te maken, breken in kleinere secties.
   • Gebruik onderverdelingen en passende afstand tot elk van de secties te scheiden.
   • Gebruik vet of verschillend formaat lettertypen naar de hiërarchie en het belang van het onderwerp laten zien.
   • Besteed aandacht aan de tekst hanteren. Het lettertype niet te klein te maken, en verbreding van de regelafstand om grote blokken tekst beter leesbaar te maken. Grote blokken tekst zal moeilijker zijn om te lezen, breek deze in kleinere paragrafen plaats.
4. 4
   Maak uw website universeel leesbaar. Gebruik standaard HTML en tags, functies en plug-ins die alleen beschikbaar zijn voor een merk of versie van een browser voorkomen.
   • Hoewel de meeste moderne browsers en computers kan omgaan met complexe beelden, zal alles een beetje vlottere zijn als je houd je afbeeldingen kleiner in omvang en geoptimaliseerd voor het web. De balans van de wens voor kwaliteit tegen de behoefte aan snelheid.
5. 5
   Test uw website. Zorg ervoor dat elke schakel werkt zoals je zou verwachten, en dat afbeeldingen correct worden weergegeven.
   • Misschien wilt u een aantal usability tests uit te voeren door het hebben van de leden van uw doelgroep testen de duidelijkheid en het gebruiksgemak van uw ontwerp, en geven u feedback op uw website.
6. 6
   Publiceren van uw website. Als je dat nog niet hebt gedaan, koopt een domeinnaam. Controleer koppelt regelmatig om te controleren of ze nog bestaan ​​en te luisteren naar suggesties naar u gemaild door bezoekers van de website.