Creëer een gestroomlijnd, zakelijk webontwerp (HD-videoserie dag 3)

In deze videoserie laten we u zien hoe u een gestroomlijnd, professioneel webontwerp kunt maken voor een bedrijfswebsite. Dit is deel 3 van een 4-delige serie - we zullen ook de ondersteuningspagina's afwerken en het hele ding coderen in HTML / CSS!


Over deze lesreeks

Adi Purdila gaat ons een heel project begeleiden - van ontwerp tot codering - allemaal hier op Webdesigntuts deze week! Op dag 1 heeft hij ons laten zien hoe we het basisraamwerk voor het ontwerp kunnen instellen en hoe we de startpagina kunnen inrichten. Op dag 2 liet hij ons zien hoe we de verschillende ondersteuningspagina's konden maken (contact, galerij, enz.). In Dag 3 (vandaag) laat hij ons zien hoe het volledige Photoshop-ontwerp kan worden omgezet in een volledig werkende HTML / CSS-site. We hebben ook een dag 4 gepland voor extra codering, dus houd dat morgen in de gaten!

Om je een algemene routekaart voor de codering te geven, hier is de basisbeschrijving van wat we deze laatste 2 dagen zullen doen:

  • Dag 3, Deel 1: De opmaak voor de startpagina maken
  • Dag 3, Deel 2: De PSD doorsnijden en het CSS-bestand schrijven (ik heb dit onderverdeeld in uur1 en uur2)
  • Dag 3, deel 3: (vervolg) Snijden van de PSD en schrijven van het CSS-bestand (ik heb dit onderverdeeld in uur1 en uur2)
  • Dag 4, Deel 1: Installatie van de Slider, aanpassing en enkele zeer eenvoudige jQuery-functies
  • Dag 4, Deel 2: Maken en stylen van de secundaire pagina's (Services, Galerij en Contact) + browsercontrole

Ik wil ook enkele links delen voor enkele bronnen die ik vandaag ga gebruiken:

  • Schuifplugin: http://www.gmarwaha.com/jquery/jcarousellite/
  • Cufon: http://cufon.shoqolate.com/generate/
  • CSS-browserselectie (voor het maken van stijlen voor verschillende browsers in hetzelfde CSS-bestand): http://rafael.adm.br/css_browser_selector/
  • Reset CSS: http://meyerweb.com/eric/tools/css/reset/

Laten we beginnen!


Dag drie: PSD naar HTML-conversie

In deze volgende reeks video's loopt Adi door het conversieproces van PSD naar HTML / CSS. Zorg ervoor dat je naar HD-weergave switcht als je de bandbreedte hebt!

Dag drie: deel 1

excuses: de eerste van deze? dag 3? video's zijn helaas niet langer beschikbaar.я

Dag drie: deel 2

Dag drie: deel 3


Over de auteur

"Of het nu websites, logo's of gedrukte materialen zijn, mijn werkfilosofie is hetzelfde: neem nooit snelkoppelingen en zet altijd mijn hart en ziel in elk project, want uiteindelijk zijn het de kleine details die tellen en hoe meer moeite ik in een project stop. project, hoe beter het mijzelf als persoon en ontwerper vertegenwoordigt en tegelijkertijd vertegenwoordigt het mijn cliënt op een manier die bij zijn behoeften past.

Als u geïnteresseerd bent in de HTML-sjablonen en bestemmingspagina's die ik aan het ontwikkelen ben, kunt u ze bekijken op mijn portfolio-pagina op ThemeForest. "- Adi