Hoe maak je zelf een ontwerpproject voor een appartement: bij het maken van een interieur houden we rekening met alle nuances, advies van ontwerpers. Bedrukking van bedrijfslogo's op kleding. Wat is genoeg voor een beginner om onder de knie te krijgen?

Het bouwen van een geweldige website kan een ontmoedigende taak lijken, maar als u de basisprincipes in gedachten houdt, zult u het proces interessant en vermakelijk vinden. Een goede website moet er niet alleen waardig uitzien! We zullen je de basis vertellen en Basisprincipes om u te helpen sites te maken waar bezoekers steeds weer naar terug willen komen.

Stappen

Deel 1

Je eigen ontwerp vinden

Maak je eigen website. Als coderen en webdesign nieuw voor je is, maar echt je eigen website wilt maken, heb je talloze opties. U kunt zelf een eenvoudige website schrijven door de basis van HTML en CSS te leren. Vertrouw erop dat het resultaat van uw werk er mooi en professioneel uit kan zien!

We gebruiken een kant-en-klaar sjabloon. U kunt gratis online kopen of vinden kant-en-klare sjablonen websites. Dit is al geschreven code die u eenvoudig kunt gebruiken of aanpassen aan uw behoeften. Er zijn nogal wat geverifieerde ontwikkelaars kwaliteitssjablonen een van hen is Wix.

Huur een webdesigner in. Als je een professioneel gemaakte website en een feilloos werkende website nodig hebt, is het misschien de beste optie om een ​​webdesigner in te huren. Dit brengt natuurlijk bepaalde kosten met zich mee, maar niet zo groot als men zou denken. U kunt een aspirant-ontwerper vinden door een advertentie te plaatsen bij uw plaatselijke technische universiteit. Hun ervaring zal je helpen om een ​​betere en professionelere website te maken.

Deel 2

Nadenken over de belangrijkste ontwerpideeën

1. Maak je site niet rommelig. Het is wenselijk dat alles zo snel mogelijk en probleemloos werkt. Beperk het aantal menu-items tot een minimum door sitenavigatie eenvoudig en duidelijk te maken, wat de sitebezoeker helpt.

   Gebruik een gebruiksvriendelijke gebruikersinterface. Door site-elementen zoals de sitetitel, het logo, knoppen, afbeeldingen en tekst op elke pagina op dezelfde plaats te plaatsen, kunt u uw sitenavigatie aanzienlijk vereenvoudigen.

   • Plaats uw sitetitel bovenaan elke pagina. Het maakt niet uit hoeveel dubbele elementen uw site bevat, zorg ervoor dat u bovenste deel site is identiek op alle pagina's.
   • Het ontwerp moet logisch zijn. Elementen op elk aparte pagina moet in een logische volgorde worden gerangschikt, in afnemende volgorde van belangrijkheid van het onderwerp; alle pagina's moeten op dezelfde manier worden gestructureerd.

2. Houd vast aan een consistente stijl. Het ontwerp van de webpagina moet de site structurele integriteit geven, en het ontwerp - thematische harmonie. Houd het gamma van de site in twee of drie bijpassende kleuren. Vermijd het gebruik van lettertypen in alle formaten en kleuren. Als u van plan bent verschillende lettertypen te gebruiken, moet de stijl waarin ze worden gebruikt identiek zijn op elke pagina van de site.

   • Gebruik CSS om uw site op te maken en het gemakkelijker te maken om site-elementen te beheren door de noodzaak te elimineren om elementen op elke pagina afzonderlijk te wijzigen.

3. Maak uw site zo leesbaar mogelijk. Om de tekst gemakkelijk leesbaar te maken, verdeelt u deze in kleine delen. Gebruik tussenkopjes en spatiëring om delen van uw tekst van elkaar te scheiden. Gebruik selectie vetgedrukt of lettertype grotere maat om de structuur en het belang van de tekst te benadrukken.

   • Let op de opmaak van de tekst. Maak het lettertype niet te klein en vergroot de letterafstand om grote blokken tekst beter leesbaar te maken. Lange tekst Het is vrij moeilijk te lezen, dus verdeel het in alinea's.

4. Maak een website in een universeel formaat. Gebruik maken van standaard HTML en vermijd het gebruik van tags, functies en plug-ins die alleen door een bepaalde browser worden ondersteund.

   • hoewel de meeste moderne browsers complexe afbeeldingen gemakkelijk kan verwerken, zal de site sneller werken als u afbeeldingen voor het web optimaliseert en ze klein maakt. Breng uw inzet voor kwaliteit en snelheid in evenwicht.

5. Test uw website. Zorg ervoor dat alle links werken en dat afbeeldingen correct worden weergegeven.

   • Het is wenselijk om vast te houden kleine test"usability" (gemak voor de gebruiker): verleen toegang tot de site aan vertegenwoordigers van uw doelgroep om de duidelijkheid en het gebruiksgemak van het siteontwerp te testen en feedback te krijgen van testdeelnemers.

   Deel 3

   Website-ontwerp voor mobiele apparaten

   1. Overweeg mobiel browsen. Tegenwoordig vindt internettoegang steeds meer plaats vanaf mobiele apparaten. Als u bezoekers naar uw site wilt trekken en behouden, moet u uw site zo ontwerpen dat hij er goed uitziet en gemakkelijk te gebruiken is op mobiele apparaten. De beste optie is om hiervoor een aparte site te maken, maar er zijn andere manieren.

      • Bekijk enkele voorbeelden van mobiele sites. Vaak door de letter "m" in te voegen. in plaats van "www" in het webadres van de website, wordt u naar: mobiele versie plaats. Je kunt iets soortgelijks doen.

   2. Maak de site niet te ingewikkeld. Het ontwerp van uw website moet eenvoudig en to the point zijn. Complexe websites met knipperende banners behoren tot het verleden. Gebruikers houden van eenvoudige sites. En dat betekent: eenvoudige vormgeving, het minimum aantal kolommen, de minimale hoeveelheid tekst die je moet lezen om de nodige informatie op de site te vinden.

      Gebruik een responsieve lay-out. Responsieve lay-out- een methode voor het coderen van een site waarbij deze zich aanpast aan de grootte van het scherm waarop deze wordt weergegeven (in plaats van vaste maten). Om dit effect te bereiken, wordt meestal de kolombreedte als een percentage gebruikt, in plaats van in pixels, maar er zijn meer geavanceerde oplossingen.

   3. Schakel achtergrondafbeeldingen uit bij het instellen van afdrukopties.
   4. Gebruik zwarte tekst op een witte achtergrond.
   5. Menu's en onnodige afbeeldingen verwijderen
6. Je kunt je altijd ontwikkelen eigen sjabloon site gebaseerd op uw eigen ideeën over de site, maar soms is het makkelijker om een ​​kant-en-klaar sjabloon te kopen.
7. Verveel gebruikers niet met fantasievolle graphics. In de jaren 90 was het in de mode om te experimenteren met Flash-animatie, felle kleuren en achtergronden, zet muziek zodra de pagina wordt geladen, maar vandaag zal het bezoekers alleen maar afschrikken. Gebruik een eenvoudige achtergrond die contrasteert met de kleur van de tekst.
8. U kunt CSS (Nested Style Sheets) gebruiken om de afstand tussen alinea's naar wens in te stellen.
9. Voor visueel gehandicapte bezoekers kunt u video en audio gebruiken met ondertiteling, om hun beschikbaarheid aan te geven. De tafels zijn effectieve manier overdracht van informatie, maar visueel gehandicapte gebruikers die schermlezers gebruiken, kunnen niet naar de informatie in de kolomvolgorde luisteren.

Waarschuwingen

• Vermijd plagiaat en respecteer de auteursrechtwetten. Voeg geen afbeeldingen of andere elementen toe aan de site zonder toestemming van de auteur. Alles wat u op de site plaatst, moet binnen het kader van ethiek en wet vallen.

Op veler verzoek van onze lezers gaan we vandaag het ontwerp, of liever de lay-out van de site in Photoshop doen. Natuurlijk, als je dit nog nooit bent tegengekomen, is het niet gemakkelijk om het te doen, er rijzen veel vragen, die ik vandaag zal proberen te beantwoorden. Het blijkt dat er op internet niet zo veel materiaal over dit onderwerp te vinden is. Er zijn veel ontwerpers, maar niemand vertelt hoe je een website-indeling maakt. Misschien zag ik er gewoon slecht uit? :)

Voortzetting

Laten we het in het algemeen al doen.

Om te beginnen heb ik een eenvoudige lay-out gemaakt, die we samen met u volledig demonteren. Dit is hoe het eruit ziet:

Zoals je kunt zien, bleek de sjabloon niet ingewikkeld, het is natuurlijk een blogsjabloon, die we later in HTML zullen zetten. Laten we in de tussentijd gewoon tekenen. Laten we nu gaan.

Software

Het eerste wat je nodig hebt is Photoshop. Als je het niet hebt, koop het dan :-)

Document maken en afmetingen

Maken nieuw document in Photoshop moet je naar "Bestand" gaan en op "Maken" klikken, waarna een venster verschijnt waarin je de juiste afmetingen moet instellen.

De afmetingen zijn afhankelijk van hoe breed uw toekomstige site zal zijn. U hebt bijvoorbeeld besloten dat de voltooide site een breedte van 1000 px zal hebben, daarom moet de documentgrootte iets groter worden gemaakt, ergens rond de 1200 px. Dit wordt vooral gedaan voor het gemak, zodat uw lay-out er hetzelfde uitziet als in de browser.

Wat de hoogte betreft, wordt de grootte ingesteld afhankelijk van het thema van de sjabloon. Maar doe het liefst meer, 4000 px vind ik genoeg. Dit wordt gedaan zodat in de toekomst alle elementen passen. Omdat ik op de een of andere manier een kleine hoogte maakte, en toen moest ik alles overzetten naar een nieuw document.

In mijn geval zal de site 1200px breed zijn. Op deze manier heb ik het document 1300 px breed en 4000 px hoog gemaakt. Laat de rest van de instellingen zoals ze zijn.

Website sjabloon achtergrond

Nadat we het document hebben gemaakt, maakt u eerst de achtergrond voor de site. Het maakt niet uit of het een kleur of een foto is, maar doe het. In mijn geval is het gewoon een witte achtergrond. Selecteer het gereedschap Emmertje in de Kleurkiezer en selecteer witte kleur en klik vervolgens op de achtergrond.

De breedte van de toekomstige site is 1200 px

Nu moeten we de grootte van de toekomstige site zo instellen dat deze er hetzelfde uitziet als in de browser. Dit doen we met een liniaal. Als het voor u niet actief is, moet u naar "Weergave" gaan en een vinkje plaatsen op de "liniaal". Dan zou het in uw weergavevenster moeten verschijnen.

En zo ziet het eruit:

Selecteer onze laag, je hoeft er maar één keer op te klikken:

En nu moeten we een liniaal in het midden van ons document plaatsen, of liever het midden vinden. Om dit te doen, beweegt u de cursor over de liniaal en houdt u deze ingedrukt linker knop muis en trek een lijn naar ons document. Trek tot ongeveer het midden, de liniaal zal het midden zelf vinden.

Zodra we het centrum hebben gevonden, moeten we onze 1200 px brede site in het midden van het 1300 px document plaatsen. Om dit te doen, selecteert u het gereedschap Rechthoekig selectiekader, stelt u de stijl in op de opgegeven grootte bovenaan, waar we de volgende waarden schrijven: breedte - 1200px, hoogte 400px. Klik dan op onze witte achtergrond en we zullen een geselecteerd gebied hebben van de breedte die we nodig hebben.

Nu plaatsen we onze selectie in het midden met de muis, hij zal het midden zelf vinden. Vervolgens moet u nog 2 linialen uittrekken en deze aan beide zijden van de selectie plaatsen. We geven dus de grenzen aan van onze toekomstige site, die een breedte van 1200 px zal hebben. Het zal het ook gemakkelijker maken om de ontwerpelementen hiervoor aan te passen. Als je het niet begrijpt, doe dan hetzelfde als in de onderstaande afbeelding.

We zullen de liniaal in de toekomst gebruiken, omdat je hier niet zonder kunt, kun je alles precies instellen.

Nu hebben we ons document bijna volledig voorbereid. We hebben het midden uitgezocht, evenals de exacte maat aangegeven waarvoor je niet hoeft te klimmen. Laten we nu verder gaan met het meest interessante, namelijk het maken van een website-ontwerp (lay-out).

Ontwerp of lay-out van de site maken

Belangrijk!

Maak altijd groepen voor lagen en geef ze namen. Want in de toekomst zul je zeker in de war raken!

Groepen

Maak een groep en noem deze "Header" (Hoed) erin, maak een "Topmenu" onder de groep, aangezien we ermee zullen beginnen. In de groep die we maken nieuwe laag en noem het "achtergrond". Dit wordt de achtergrond van ons hoofdmenu.

Dit is wat je zou moeten krijgen:

Topmenu

Trek opnieuw de liniaal en plaats deze zoals op de afbeelding:

Selecteer het gereedschap Rechthoekig selectiekader en selecteer langs de horizontale liniaal:

Rijd in het kleurenpalet in deze kleur # 0dbfe5, selecteer het gereedschap "Vullen" en vul het geselecteerde gebied, dan moet u de selectie op het tabblad "Selectie" deselecteren, klik op "Deselecteren":

Klik op het hulpmiddel " Horizontale tekst". Selecteer het lettertype "Segoe UI" in het bovenste paneel. Klik nu op de blauwe achtergrond van het menu en schrijf de naam van onze pagina's. Vervolgens kunt u de tekst verplaatsen waar u maar wilt.

Nu maken we de scheidingstekens tussen de pagina's. En laten we ze een klein inspringend effect geven. Maak een nieuwe laag en selecteer het gereedschap Lijn. Houd vervolgens Shift ingedrukt en teken verticale lijn over de gehele blauwe achtergrond van onze menukaart.

Dubbelklik met de muis op de laag met de vorm, een venster met de laagstijl wordt geopend. Zet een vinkje bij de "Color overlay" En rijd daar in deze kleur #0aaacc.

Ga naar het item "Schaduw" en stel de volgende parameters in:

Dit is wat je zou moeten krijgen:

Kopieer daarna eenvoudig de laag met onze regel en plaats deze na elk woord. Dat is wat ik gedaan heb:

Pictogrammen voor sociale bladwijzers

Hier in het menu alleen met rechter zijde we zullen bladwijzerpictogrammen toevoegen. In mijn geval wel, maar je kunt ook de gebruikelijke gedownloade iconen installeren. Je kunt het hier downloaden.

Eerst moet u met behulp van een liniaal de hoogte van onze pictogrammen zo instellen dat ze gelijk zijn. Dit is wat u moet doen:

Dan maken we een groep aan, noem het “ Sociale bladwijzers", Maak er een nieuwe laag in. Nu klikken we op de “ willekeurig cijfer»Selecteer de gewenste vorm:

Beweeg de cursor over de plaats waar het pictogram zal zijn, houd Shift ingedrukt (zodat het pictogram gelijk wordt weergegeven) en rek uit tot de juiste maten... En we herhalen hetzelfde proces met de volgende figuren. Dit is wat je uiteindelijk zou moeten krijgen:

Door naar het logo. Maak opnieuw een aparte groep voor het logo en op een nieuwe laag.

Logo

Ga naar deze site en download het lettertype. Selecteer het gereedschap Horizontale tekst. We zoeken de naam van ons lettertype Olivier in het lettertypeveld. We klikken op de plaats waar het logo komt te staan ​​en schrijven de naam in het Engels, omdat dit lettertype geen Cyrillisch ondersteunt. Dit is wat je zou moeten krijgen:

Een groep maken " Onderste menu"En een nieuwe laag.

Onderste menu (Hoofd)

We stellen de linialen in zoals op de afbeelding:

Selecteer het gereedschap Rechthoekig selectiekader en selecteer. Vul vervolgens het geselecteerde gebied met deze kleur # 303030. Dit is wat je zou moeten krijgen:

Deselecteer de selectie op het tabblad "Selectie". Ga nu naar het tabblad Filters - Ruis en selecteer Ruis toevoegen. Vervolgens stellen we de volgende waarden in:

Lijnen toevoegen. Ze worden op dezelfde manier gedaan als in topmenu alleen de lijnkleur zelf is gewijzigd. Ik denk dat je het aankan, en het zou er als volgt uit moeten zien:

Nu gaan we naar het paneel met informatie die de gebruiker zal vertellen waar hij zich op de site bevindt.

Maak zoals gewoonlijk in de groep "Koptekst" de groep "Infopaneel" met een nieuwe laag.

Informatiepaneel

Voeg eerst strepen toe vanaf de liniaal zoals in de onderstaande afbeelding:

Selecteer het gereedschap "Rechthoekig selectiekader" en selecteer het gebied direct onder het menu en vul het met zwarte kleur # 000000

Deselecteer de selectie, pak "Horizontal Text" en verander de lettergrootte naar 48 pt en de kleur # a4a4a4. We schrijven " De laatste noten". Dit is waar je mee zou moeten eindigen:

Inhoud

Laten we verder gaan met de opmaak van het midden van onze toekomstige site. We moeten een liniaal gebruiken om aan te geven waar de berichtblokken en het sitebalkblok (rechterkolom) zich zullen bevinden.

U moet onmiddellijk 2 afzonderlijke groepen maken:

• Tags- we zullen tekst aan deze groep toevoegen met de grootte van onze kolommen.
• Inhoud- de groep waar ons hele midden van het terrein komt te staan.

Maak in de groep de inhoud aan onder de groep "Links", die onze blokken met records zal bevatten.

Selecteer het gereedschap " rechthoekig gebied", Zet de stijl erop" vooraf ingestelde maat"En stel de breedte in op 800px en de hoogte op 100px. Hier is de bottom line:

Voeg lijnen toe vanaf de liniaal zoals in de afbeelding, en deselecteer:

In de groep "Inhoud" doen we het onder een groep met de naam "Rechts" (Sitebar). We markeren de ruimte voor de rechterkolom van de site.

Neem opnieuw het "rechthoekige gebied", maar stel in de gebiedsstijl een iets kleiner formaat in met een breedte van 350 px en laat dezelfde hoogte op 100 px. En dan doen we alles zoals op de foto:

Nu weten we precies waar de blokken met records en de sitebar komen te staan. En alles zal soepel verlopen.

Weet je nog dat we een labelgroep hebben gemaakt? Maak daar gewoon een laag met de labels voor blokgrootte, zoals de mijne:

Deze labels zullen zeer nuttig zijn bij de lay-out. U hoeft de afmetingen niet te onthouden.

Blokken met records

We zullen waarschijnlijk beginnen met de blokken met records, ze zijn gemaakt in in dit geval erg makkelijk.

Maak in de groep "Links" een subgroep "blok" en een nieuwe laag aan.

Selecteer het gereedschap Rechthoekig selectiekader opnieuw. Stel in de stijl de afmetingen in op 800 x 300. Pas het aan zodat het in de lijnen past. Vul dan in met deze kleur # d9d9d9. Dit is een miniatuur.

Voeg in dezelfde groep een label toe met tekst zoals de mijne in de bovenstaande afbeelding.

Laten we nu een titel aan het bericht toevoegen. Neem "Horizontale tekst" en stel de grootte in op 35 pt en de kleur op zwart. Voeg direct onder de miniatuur toe:

Informatie toevoegen aan het bericht. Stel de lettergrootte in op 14 pt en de kleur dichter bij grijs:

En de beschrijving van het bericht:

Voeg nu de tekst toe en kijk wat we krijgen:

Om de invoer op zijn minst een beetje verdeeld te maken, maken we een eenvoudig scheidingsteken van cirkels.

Maak een groep "Scheidingsteken", selecteer " Ovaal gebied»Maak een laag. En onder het blok met records, Shift ingedrukt houdend, teken een cirkel en vul het dan met deze #efefef-kleur.

Deselecteer de selectie en zoek het midden van de cirkel met behulp van de liniaal

Selecteer de laag met onze cirkel erop en klik op rechter knop muis en selecteer "Laag dupliceren". Sleep het iets naar links.

V bovenpaneel ga naar het tabblad "Bewerken" - Transformeren en selecteer Scaling. En we maken de cirkel iets kleiner dan de eerste, terwijl we Shift ingedrukt houden zodat de cirkel even wordt.

Dit is wat je zou moeten krijgen:

Dupliceer de laag van deze kleine cirkel opnieuw en verplaats deze naar links. We verkleinen ook de grootte precies zoals hierboven beschreven, zodat het er als volgt uitziet:

Nu moet je de middelste cirkel dupliceren en naar rechts verplaatsen, en hetzelfde doen met de kleine cirkel. Om het duidelijker te maken, doe zoals op de afbeelding:

Maar wat gebeurde er alleen in normale grootte:

Nu plaatsen we het blok met records onder het blok. Maak een duplicaat van onze "Blok"-groep. Selecteer op de werkbalk de cursor (de bovenste). En sleep ons blok met records naar beneden. en dus doen we het 5 keer.

Zijbalk (rechterkolom)

Zoek onze groep "Zijbalk" en maak er een subgroep "Zoeken" aan. Met behulp van een regel doen we het als volgt:

Selecteer het gereedschap Rechthoekig selectiekader en selecteer het zoekveld en vul het vervolgens met deze #eeeeee-kleur

Vergeet niet de selectie te annuleren, klik op de tool "Horizontale tekst" en schrijf het woord Zoeken in het grijze veld

Selecteer aan de linkerkant het gereedschap Vrije vorm en zoek naar een vergrootglasvorm bovenaan. Het is verkrijgbaar in standaard vormen. Maak een laag in de groep "Zoeken", plaats de muisaanwijzer op het veld en teken onze vorm terwijl u Shift ingedrukt houdt.

Het zoekveld is klaar. Laten we nu verder gaan met widgets.

Maak een groep "widget" en een nieuwe laag erin. Voeg vervolgens lijnen toe zoals op de afbeelding. Dit wordt de achtergrond van onze koptekst en vul deze met #eeeeee kleur.

Nu moeten we de titel zelf aan onze kop toevoegen, we doen het met behulp van tekst. We zullen ook een pictogram aan de titel toevoegen. Om dit te doen, moet je een vorm selecteren die je leuk vindt en die past in de betekenis :) Vergeet niet om Shift ingedrukt te houden bij het toevoegen van een vorm. En vul het met deze kleur # 0dbfe5

En natuurlijk moeten we items toevoegen aan onze widgets. Selecteer het horizontale tekstgereedschap en stel de grootte in op 16 pt. En doe de ka in de afbeelding hieronder

Dupliceer vervolgens de groep en sleep de widget naar beneden. We doen hetzelfde als met berichten.

Nu kunnen we een bijna voltooide en eenvoudige lay-out voor onze toekomstige site waarnemen.

Voettekst (onderaan de site)

Nou, hoe kan het zonder hem. In dit sjabloon is het ook niet erg ingewikkeld.

Maak zoals gewoonlijk een groep "Footer" en een laag erin. En markeer het met een liniaal, selecteer onze al favoriete tool "rechthoekig gebied", selecteer het en vul het met # 0dbfe5

Laten we de selectie annuleren. Neem de "Horizontale tekst", zoek het lettertype dat we hebben gedownload (Olivier), en voer ons logo in, maak alleen de kleur van de tekst iets donkerder.

En voeg aan de rechterkant van onze voettekst hetzelfde menu toe als hierboven, maar zonder lijn. Je kunt het zelfs gewoon kopiëren en naar beneden verplaatsen.

Dat is alles, vrienden, bij ns kant-en-klare lay-out, die je al kunt zetten :)

Hier is ook zijn PSD-bestand. Download en kijk of je iets niet begrijpt.

Vrienden, als je iets niet begrijpt, vraag het dan in de comments.

Tot ziens.

Van de auteur: Dag lieve bloglezers. In dit artikel zal ik de basisprincipes van het ontwikkelen van een website-ontwerp met u delen. Na 5 minuten lezen van dit materiaal, zelfs iemand die ver van een dergelijk onderwerp afstaat, zal begrijpen waar hij moet beginnen met het ontwerpen en creëren van de structuur van een webpagina en het ontwerp ervan.

In dit artikel heb ik zo beknopt mogelijk een grote hoeveelheid theoretische informatie van beste boeken op webdesign, het verwijderen van al het onnodige water en het vertalen van de inhoud naar een taal die begrijpelijk is voor gewone stervelingen.

De eerste stappen

Voordat je aan je reis naar de top van je carrière als webdesigner begint, moet je de basisprincipes van het maken van dergelijke projecten begrijpen. Je moet niet meteen halsoverkop een grafische editor binnenstormen en je meest creatieve ideeën op canvas schilderen.

De ontwikkeling van website-ontwerp begint met een glimlach van definitie informatiemodel het project en de vorming van zijn benaderend grafisch model. Het doel van de internetbron kan de verkoop van goederen of het leveren van diensten zijn. In dit geval moet de structuur van het ontwerp gericht zijn op het gemak om door de catalogus met producten te bladeren en de bezoeker aan te zetten tot kopen.

Het doel van het maken van een site kan zijn om een ​​platform voor een informatiebron te ontwikkelen. Dit formaat vereist ongebruikelijke, interessante afbeeldingen en sappige, boeiende inhoud waardoor u langer op de pagina blijft.

Bereiken maximaal gemak en de effectiviteit van de site, is het noodzakelijk om vooraf de doelgroep van het project te bepalen. Wie is de potentiële sitebezoeker? Zing alleen geen liedjes over het feit dat je vijftigjarige grootmoeder Zina, die net de tuin heeft opgegraven, en een tweedeklasser voordat ze huiswerk heeft gemaakt, naar je toe komt.

Elke site heeft een gemiddeld type persoon, dat verschilt door leeftijd, beroep, hobby's, geografische locatie, enz. Het bepalen van de doelgroep zal helpen bij het ontwikkelen van een webontwerp dat er aantrekkelijk uitziet en tegelijkertijd intuïtief begrijpelijk is voor mensen.

De volgende stap is het maken van modules voor de toekomstige site. Op Startpagina meestal gelokaliseerd de volgende items:

Voordat u begint met de ontwikkeling van een website (webdesign), is het raadzaam om u vertrouwd te maken met de internetportalen van concurrenten en kennis te nemen van de oplossingen die zij hebben gekozen. Basisweergave hoe anderen het doen, zal helpen om in je hoofd een schatting te vormen visueel model toekomstig project, aangepast voor een specifieke focus.

Na analyse van de concurrenten gaan we direct over tot het maken van een modulair grid. Het is een visuele uitsplitsing van een pagina in specifieke zones. Deze actie helpt bij het structureren van de inhoud van de site.

moderne tendensen en benaderingen in webontwikkeling

Leer het snelle groei-algoritme helemaal opnieuw bij het bouwen van een site

Onthoud het bladformaat van een tijdschrift of krant om snel te begrijpen wat een modulair raster is. Daar wordt de tekst voor de leesbaarheid opgesplitst in 2-6 kolommen. Dezelfde situatie is in webdesign (website-ontwikkeling). Ingewikkeld informatiebronnen het is beter om een ​​doordachte opstelling van modules te gebruiken, zodat een persoon comfortabel kan uitvoeren lange tijd lezing.

Visitekaartjessites zijn vaak beperkt tot een éénkolomsindeling. De breedte van de modules wordt gekozen afhankelijk van persoonlijke voorkeuren en projectdoelen.

De meest populaire schermgrootte wordt beschouwd als 1024x768. Het is daarvoor dat het wordt aanbevolen om een ​​modulair raster te bouwen en andere elementen te ontwerpen. Om de site er harmonieus en proportioneel uit te laten zien, moet u de compositie in het midden uitlijnen.

De meest voorkomende beeldverhouding links en rechts is 40 tot 60%. De opstelling van de blokken heeft geen strikte normen die door de staat zijn gelegaliseerd. Wat dat betreft ben je Van Gogh - creëer, raak alleen je oren niet aan.

Als u al een analyse van concurrenten hebt uitgevoerd, een modulair raster hebt getekend met de toekomstige rangschikking van blokken op papier of in een grafische editor, en hebt besloten wat het doel is om een ​​project te maken, dan kunt u het hoofdproces starten. Voordat u echter begint met de ontwikkeling van het siteontwerp, raad ik u aan vertrouwd te raken met mijn aanbevelingen voor het ontwerp van de bron. Er zijn drie soorten internetportalen:

1. Presentatie (bestemmingspagina's, sites voor visitekaartjes).

In een dergelijk project, het benadrukken van de belangrijkste details van de voorgestelde producten of bepaalde informatie die u kort en bondig wilt overbrengen. De locatie van de modules moet een logische volgorde behouden, zodat iemands interesse in de inhoud alleen maar toeneemt als hij door de site bladert.

In dergelijke projecten zijn felle kleuren en ongebruikelijk ontwerp... Het belangrijkste is dat dit alles leidt tot de selectie belangrijkste voordelen product, bedrijf, enz.

2. Zakelijk.

De visuele vormgeving van deze site-indeling moet overeenkomen met de huisstijl van het bedrijf of de organisatie. Speciale ontwerpexcessies zijn hier nutteloos. Probeer de site overzichtelijk en gebruiksvriendelijk te maken. Dit kan worden bereikt door grafische en tekstuele inhoud in evenwicht te brengen. Modulair rooster met een corporate site formaat 2 of 3 kolommen.

3. Informatief.

Elektronische tijdschriften, kranten, bibliotheken of nieuwsportalen het is noodzakelijk om aan te passen voor het gemak van langdurig lezen en perceptie van informatie in het algemeen. Op dergelijke sites is niet alleen de selectie van belang. juiste lettertypen en de grootte van de tekst, maar ook de structuur.

Het speelt hier niet zo'n grote rol visueel ontwerp, omdat gebruikers niet komen voor prachtige flitseffecten, maar voor specifieke inhoud. Het minimaliseren van afbeeldingen heeft ook een positief effect op de laadsnelheid van de pagina, wat ook belangrijk is.

In dit artikel heb ik je niet verteld hoe je een meester in webdesign kunt worden, maar we hebben geleerd hoe je de eerste stappen in deze richting kunt zetten. Vergeet de mijne niet praktisch advies registratie verschillende soorten sites, waarvoor meer dan een jaar persoonlijke tests nodig waren om te bestuderen, en u zult blij zijn.

Als je het artikel van vandaag leuk vond en je hebt er wat van geleerd bruikbare informatie voor jezelf, abonneer je op mijn blog en deel de link met je vrienden. Tot de volgende keer!

Moderne trends en benaderingen in webontwikkeling

Leer het snelle groei-algoritme helemaal opnieuw bij het bouwen van een site

In dit artikel zullen we kijken naar aspecten van website-ontwerp, zoals het kiezen van een editor om de lay-out van de site voor te bereiden, het bepalen van de grootte van de site, en ook praten over het opslaan van bronnen in welk formaat, hoe correct met tekst te werken, en veel meer.

Dit artikel is voor het grootste deel gericht aan aspirant-webontwerpers.

Welke editor moet je gebruiken?

U kunt een toekomstige site ontwerpen met elke grafische editor, waar ze vroeger werkten. Het is handiger voor mij om te gebruiken Adobe Illustrator, hoewel de meeste ontwerpers hiervoor Photoshop gebruiken. Deels omdat browsers geen vectorafbeeldingen weergeven.

Als gevolg hiervan worden tijdens het voorbereiden van de sitelagen alle grafische elementen geconverteerd naar een raster. Voor het grootste deel - in jpeg-formaat... Als u echter een transparante of semi-transparante achtergrond nodig heeft, kunt u afbeeldingen gebruiken png-formaat of gif (minder vaak).

De meeste ontwerpers gebruiken Photoshop voor meer dan alleen een van de beste redacteuren voor bitmapafbeeldingen die HTML begrijpt, maar omdat dit programma vrij goed bekend is en daarom beginnen de meeste beginnende ontwerpers meestal te leren computer beelden met Adobe-Photoshop.

Dit zijn de belangrijkste redenen waarom Photoshop het meest wordt beschouwd handig programma voor het renderen van webdesign:

Hoe groot moet de site worden gemaakt?

Ten eerste, als u een website-ontwerp hebt besteld - vergeet concepten zoals dpi of metriek stelsel... Blokken en afbeeldingen die in de site zijn ingevoegd, worden gemeten in pixels of procent ( in breedte / hoogte) op de grootte van het browservenster ( of bovenliggend element).

Als de sitegrootte is ingesteld als een percentage, is deze adaptief ( of rubberachtig / responsief) ontwerp. Responsive of responsive design is best handig. Maar als u niet helemaal begrijpt wat u doet, gebruik dan vaste maten.

Als de klant aandringt op een responsief of responsief ontwerp, denk er dan goed over na welke blokken zullen worden uitgerekt wanneer het formaat van het browservenster wordt gewijzigd en welke niet. Op deze manier kun je ontwerpen.

Maak meerdere bestanden onder standaard resoluties schermen ( bijvoorbeeld 1280 bij 1024, 1920 bij 1280 en 1024 bij 768). Met hun hulp krijgt u een visueel idee van hoe de site eruitziet met verschillende resoluties. Noteer in de bijlage bij het sjabloon het maximum en minimale afmetingen blokken:

Wat moeten de afmetingen van de webpagina zijn?

Wanneer we een lay-out maken visitekaartje of folders, wij kennen de uiteindelijke maat. In het geval van website-ontwerp ligt het iets gecompliceerder.

Alle monitoren hebben andere resolutie (aantal pixels in breedte en hoogte). Hiermee moet rekening worden gehouden bij het ontwerpen van een website. De meeste monitoren aan dit moment hebben een resolutie van 1280 of 1920 pixels breed. Over het algemeen vertrouwen we op deze waarden. Maar maak uw tekstvakken niet breder dan 800 pixels.

Als de resolutie van de monitor 800 bij 600 is en we de visuele aantrekkingskracht van de site verliezen, is dat niet slecht. Maar wanneer een regel tekst niet op het scherm past, wordt het een functionaliteitsprobleem.

Het is het beste om sites te maken met een breedte van 1024 pixels en wat " vrije ruimte "Breed tot 1280 pixels.

De lay-out van de site kan links-rechts uitgelijnd of gecentreerd zijn. Bovendien is het “ vrije ruimte"Het hoeven geen witte marges te zijn. Het kan worden gevuld met elke kleur of herhalend patroon.

Als alternatief kunt u een textuur maken die lijkt op het ontwerp. U kunt ook gebruik maken van niet-herhalende achtergrondafbeelding, vergroot tot 100% in breedte met scrollen uitgeschakeld, maar ten eerste is het soms niet erg handig, en ten tweede zal een site met dit soort achtergrond behoorlijk "zwaar" worden en zal het veel tijd kosten om te laden.

In welk formaat moet de bron worden opgeslagen?

Voor bronbestanden kunt u het beste gebruiken psd-formaat(photoshop) waar iedereen grafisch element bevindt zich op een eigen laag. Bovendien is het aan te raden de lagen een naam te geven, zodat ze begrijpelijk zijn voor de lay-outontwerper. Bijvoorbeeld: "pagina-achtergrond", " tekstvak achtergrond" enzovoort. Lagen kunnen op doel worden gegroepeerd.

Laten we zeggen dat de tekst en achtergrond van deze tekst kunnen worden gegroepeerd en de naam " basis tekstblok ". Als alternatief kunt u het achtergrondlinkblok groeperen in een groep met de naam " link groep XX". Kortom, probeer te doen origineel bestand zo duidelijk mogelijk, zodat de lay-outontwerper u niet elke vijf minuten vragen stelt.

Dus hoe maak je een goed ontwerp?

Uitdrukking " Mooi ontwerp»Kan een ervaren webmaster gemakkelijk intimideren. Het belangrijkste is de functionaliteit van de site. Vervolgens snel laden en gebruiksvriendelijke interface. En schoonheid en pracht zijn op de achtergrond. En trouwens, de smaak en kleur, zoals ze zeggen ...

Daarom kan bijna niemand je leren hoe je "schoonheid" kunt maken. Het creëren van een nieuw ontwerp gaat in de eerste plaats over het creëren van functionaliteit. De taak is om een ​​ontwerp te maken en de elementen van de site zo te ordenen dat de bezoeker gemakkelijk de informatie kan vinden die hij nodig heeft.

Je moet ervoor zorgen dat de gebruiker die de site is binnengekomen niet meteen van daar wegrent, bang of kokhalzend tegenhoudend. Gebruik een minimum aan animatie om dit te voorkomen. Deze sites zijn als goedkope pornosites waar je gemakkelijk virussen op je computer kunt "vangen".

Bovendien leiden geanimeerde objecten de aandacht van de bezoeker af van het hoofdgedeelte van de site - de tekst. Gebruik gewoon geen verschillende "functies" in het ontwerp, zoals schattige honden of katten. Het web staat al vol met afval. Creëer iets heel interessants.

Er kunnen uitzonderingen worden gemaakt voor degenen die een bron maken met informatie zoals " Mijn naam is Philip, mijn neus tegen het plafond geplakt».

Werken met tekst

Allereerst. Vergeet decoratie nooit. De kleur van de tekst en achtergrond moet worden afgestemd op het contrast en de leesbaarheid. De hoofdtekst moet leesbaar zijn.

Vergeet niet dat als een specifiek lettertype niet op het apparaat van de gebruiker is geïnstalleerd, dit wordt vervangen door de browser met het standaardlettertype. Hierdoor bestaat het risico dat de site relatief veel van zijn verschijning... Gebruik daarom veelvoorkomende lettertypen in je ontwerp.

Maar als uw klant hardnekkig aandringt op het gebruik van een merklettertype, kan dit probleem op verschillende manieren worden opgelost:

• Dood de cliënt. Maar het zal geen geld opleveren. En bovendien heeft dit geweld niets met design te maken;
• Raster het lettertype en gebruik afbeeldingen. Maar dit is niets beter dan de eerste optie. En dat is waarom. De letters krijgen schreven en zijn moeilijk leesbaar. Deze tekst wordt niet geïndexeerd door zoekmachines, wat ertoe zal leiden dat om te bereiken hoge posities in kwestie zoekmachines het zal onmogelijk zijn. De afbeeldingen zijn groot en het laden van de site duurt lang. Vooral op mobiel apparaat met een trage verbinding;
• Upload een lettertype naar de computer van de gebruiker CSS gebruiken... Maar zelfs dit is misschien niet mogelijk als de gebruiker niet akkoord gaat met het installeren van onbekende lettertypen, verlies van verkeer en tijd;
• Kies uit veelvoorkomende lettertypen die lijken op het bedrijfslettertype. Dat wil zeggen, om het werk te doen voor de codeur die deze lettertypen zal registreren. Het zal werken alsof de computer dat niet heeft: het lettertype dat u wilt, de browser kijkt hiernaar en selecteert de eerste uit de lijst met lettertypen die op de computer is geïnstalleerd. En ook hier kan een probleem ontstaan ​​als het vereiste lettertype niet op de computer van de klant is geïnstalleerd;
• U kunt de Cufon-service van JQuery gebruiken. Dit wordt geladen aangepaste lettertypen naar de site met minimale verliezen. De service werkt alleen met True Type-lettertypen (in TTF-indeling);
• Maak een remake van het merkboek van de klant en verander het bedrijfslettertype in Arial.

Vertaling van het artikel "Hoe de site ontwerpen? "Was voorbereid door een vriendelijk projectteam

U bent verhuisd naar uw nieuwe appartement of besluit uw oude interieur te renoveren. Als u niet weet waar u moet beginnen, begin dan met het ontwikkelen van een ontwerpproject.

Ja, natuurlijk kunt u hiervoor een specialist inhuren, die u graag helpt bij het maken van een gezellig nest. Als je echter het gevoel hebt dat je het zelf kunt en wilt doen, ga ervoor!

Eigenaardigheden

De eigenaardigheid van zelfontwikkeling van een ontwerpproject is dat je alles kunt doen zoals jij het wilt. Voordat je begint met ontwikkelen, moet je inspiratie opdoen, de relevante literatuur lezen en gebruik maken van deskundig advies.

Ideeën voor inspiratie

Als je niet weet hoe je je interieur wilt decoreren, welke stijl je moet kiezen, welke kleuren je moet gebruiken, begin dan je reis door naar de reeds gemaakte interieurs te kijken. Inspiratie vind je overal: in een café of met vrienden, in een boek of tijdschrift over design, misschien helpt dit artikel.

Werkelijke stijlen

Het is algemeen aanvaard dat mensen zich bij het ontwerpen van hun huis in de eerste plaats laten leiden door hun smaak en capaciteiten. In de loop van het jarenlange bestaan ​​van een concept als interieurinrichting zijn er ook verschillende stijlen ontstaan. Elk van hen heeft zijn eigen kenmerken en onderscheidende kenmerken... Laten we het hebben over degenen die het meest relevant zijn in onze moderne realiteit.

Deze stijl is tegenwoordig een van de meest populaire. Het kan eenvoudig worden gekarakteriseerd - rustiek. Het combineert eenvoud, comfort, een sfeer van warmte en gezelligheid. Als mensen tegenwoordig het grootste deel van hun leven in de stad doorbrengen, willen ze er meer dan ooit buiten zijn.

De Provence verschilt van regio tot regio. Ontwerp kan gebaseerd zijn op provinciale thema's verschillende landen, voornamelijk Engeland en Frankrijk. Ook wordt de Russische Provence onderscheiden.

Het is verbazingwekkend hoe een appartement in deze stijl wordt getransformeerd. Het lijkt alsof dit helemaal geen appartement is, maar een woonhuis.

De loftstijl begint zijn geschiedenis in de jaren vijftig van de twintigste eeuw. Het is ontstaan ​​​​in de VS op het moment dat: massale sluiting fabrieken en productieateliers in het centrum van grote steden. Industriële gebouwen, of beter gezegd delen ervan, werden opgekocht door vertegenwoordigers van de creatieve burgerij. Kunstenaars en muzikanten veranderden het pand om aan hun behoeften te voldoen, ze woonden er en organiseerden tegelijkertijd tentoonstellingen en shows in nieuwe appartementen en hielden concerten.

De belangrijkste kenmerken van de loftstijl zijn vrije ruimte en een groot aantal van Sveta. In een appartement dat in deze stijl is gemaakt, merkt u vaak de afwezigheid van scheidingswanden tussen kamers.

Wat het decor betreft, is de combinatie van een bakstenen muur met een open ventilatiepijp standaard optie opruiming. Voeg chromen details, spiegels, ongebruikelijke open lampen en moderne technologie toe.

De landelijke stijl is ontstaan ​​in het begin van de 20e eeuw in de Verenigde Staten en verspreidde zich later naar Europese landen. Het belangrijkste idee van de stijl is om de oorsprong te eren waarmee mensen worden geassocieerd met het dorpsleven. Deze stijl wordt gekenmerkt door eenvoud en natuurlijkheid.

bij het kiezen kleurenpalet huizen, appartementen of kamers in landelijke stijl, geven de voorkeur aan natuurlijke kleuren zoals zand, bruin, beige, olijf, blauw.

Voor textiel kun je een stof kiezen met een kleur in een kleine bloem, dit is een kenmerk van deze ontwerprichting.

Moderne afwerkingsmethoden

Modern ontwerpoplossingen geassocieerd met wanddecoratie zijn zeer gewaagd en buitengewoon. Als je je verveelt met gewoon behang of monochrome oppervlakken, overweeg dan: de volgende opties: muur ontwerp.

• Stenen muur. De muur, die is bekleed met tegels die baksteen imiteren, wordt vaak aangetroffen in appartementen en huizen die in loftstijl zijn gemaakt. Deze lichte nalatigheid geeft een speciale sfeer aan de hele kamer. Je kunt de muur geheel of gedeeltelijk met stenen decoreren, wat het algehele uiterlijk aanzienlijk verandert.

• Kurken muren. Het gebruik van kurkplaten als wanddecoratie is mogelijk in een ruimte met een lage luchtvochtigheid. Kurk is een zeer grillig materiaal, maar het ziet er erg indrukwekkend uit. Als het ontwerp van uw appartement in de buurt van eco-stijl is, gebruik dan gerust kurkpanelen in het decor.

• De muur is gemaakt van steen. Zo'n oppervlak ziet er vooral interessant uit wanneer de stenen op een chaotische manier zijn neergelegd, alsof ze gewoon verspreid zijn. Of, integendeel, maak een tekening van steen.

• Glazen muren. Glaspanelen worden gebruikt in wanddecoratie wanneer het nodig is om de ruimte visueel uit te breiden. Op een glazen wand kan een tekening of patroon aangebracht worden, het hangt allemaal af van je fantasie.

• Volumetrische panelen. Met gipsplaten met verschillende patronen kunt u snel volume aan de muur toevoegen. Dergelijke decoratieve elementen kunnen naar behoefte worden geverfd.

• Gipsplaten muren. Bepaal bij het decoreren van een gipsplaatmuur welk effect u wilt bereiken. Lichtgewicht praktische constructies kunnen functionaliteit aan de muur toevoegen.

• Zachte muur. Een op deze manier gemaakte wand ziet er luxe uit, maar in dit geval is het belangrijk om de maat in acht te nemen. Gebruik eenvoudige meubels en decorelementen in een interieur met dergelijke muren. Kant-en-klare zachte eco-lederen panelen zijn te koop in de winkel. Of creëer ze zelf.

• Strek muur. Dergelijke muren worden gemaakt volgens het principe spanplafonds... Het is een speciaal duurzaam materiaal dat over het frame is gespannen. Op dit materiaal kunt u de afbeelding afdrukken die u nodig heeft.

Modieuze kleuren

Bij het kiezen van een kleurenpalet voor een interieur, moet je je vooral richten op je interne voorkeuren, maar ook op de grootte van de kamer en de hoeveelheid binnenkomend zonlicht.

Als de kamer klein en donker is, gebruik dan een lichtpalet. Een grote en lichte ruimte stelt u in staat om, afhankelijk van de vereisten, bijna het volledige kleurengamma te gebruiken.

In de wereld van interieurontwerp is er echter ook het concept van mode. Als u gewend bent om modetrends te volgen, overweeg dan hun vereisten. Gelukkig verandert de mode op dit gebied niet zo snel als op het gebied van kleding.

Hieronder staan ​​de kleuren en kleuren, die vandaag relevant zijn.

• Blauw. Voor meerdere seizoenen blauwe kleur gebruikt in het ontwerp van veel interieurs. Blauw heeft veel tinten, waarvan de keuze bepalend is voor de algehele sfeer in de kamer.

• Grijs. Grijze kleur muren en decorelementen zien er goed uit in combinatie met witte, beige, zwarte kleuren. Combineer ze samen voor gedurfde accenten.

• Marsala. De zogenaamde wijntint bekleedt al meerdere seizoenen de leidende positie. Het interieur, versierd met deze kleur, wordt warm en gezellig. Wees echter voorzichtig, gebruik deze kleur selectief en combineer deze met beige tinten, natuurlijk hout.

• Natuurlijke tinten. Natuurlijkheid is dit seizoen in de mode. Beige, bruin en warme tinten groen zijn in veel interieurs van bekende ontwerpers teruggekomen. Het zogenaamde eco-stijl interieur is terug te vinden in appartementen, huizen en industriële panden.

• Metalen elementen. De glans van het metaal trekt aan. Decorelementen van metaal zien er spectaculair uit wanneer ze worden gecombineerd met de stijl van de hele kamer. Tegenwoordig vind je zelfs behang met een metallic glanseffect.

Stadia en volgorde van het werk

Wanneer u begint met het ontwikkelen van een ontwerpproject voor een appartement, probeer dan een bepaalde reeks acties aan te houden.

Maak eerst een projectplan en definieer wat u uiteindelijk wilt zien.

Begin daarna met het ontwikkelen van de schets en bereid de tekeningen voor. Dit alles zal u helpen beslissen over de keuze van meubels en decoraties. Laten we het over elke fase afzonderlijk hebben.

Appartement projectplan

Om een ​​plan voor een appartementenproject te ontwikkelen, moet u eerst het pand opmeten. Neem deze vraag serieus, want zo voorkom je verwarring. Markeer op het plan de hoogte van de plafonds, de breedte van de muren, de afmetingen van de ramen en deuren. Noteer ook de plaatsen waar u stopcontacten, batterijen, leidingen en andere communicatiemiddelen wilt plaatsen.

Het zal niet moeilijk zijn om met uw eigen handen een plan voor een appartementproject te maken. als je speciaal gebruikt computerprogramma's... Nadat u de eerste gegevens erin hebt ingevoerd, zal het programma een exact plan van uw appartement tekenen. Markeer hierop de gewenste locatie van het meubel, later kunt u de positie aanpassen. Bewaar dit plan in een formaat dat voor u geschikt is, met alle essentiële toepassingen... Het is wenselijk om het op papier af te drukken.

schetsen

Nadat je hebt besloten in welke stijl je je appartement wilt zien en een projectplan hebt opgesteld, begin je met het maken van een schets. De schets kan op papier of in elektronische vorm worden gemaakt. Markeer er allereerst de kleurenschema's van uw interieur op. Teken de gewenste meubels en decoritems. Met behulp van een schets kunt u duidelijk zien hoe uw appartement er na renovatie uitziet.

Als je geen artistieke vaardigheden hebt, kunnen computerprogramma's je ook helpen om zelf een schets te ontwikkelen.

U kunt dus zelf iets bedenken of het bestaande meubilair, behang of vloer kiezen.