Sådan lærer du dig selv design

Del dette…
 Del på Facebook

Facebook

 Pin på Pinterest

Pinterest

 kvidre

kvidre

 Del på LinkedIn

Linkedin

Ja, det er helt muligt at lære dig selv design. Jeg spurgte omkring denne uge for at se, hvordan folk formåede at erhverve færdighederne, og jeg forsøgte at huske, hvad der fungerede for mig.

learning-web-design-first-lesson

der er tre måder, du kan lære dig selv design.

  1. ved at gøre. Folk lærer ved faktisk at oprette hjemmesider.
  2. ved at bruge online ressourcer. Alle på et tidspunkt finder svar online om, hvordan man designer hjemmesider.
  3. ved læsning. Denne overraskede mig. De fleste designere siger, at de lærer internetdesign, dels ved at læse bøger.

så lad os gennemgå hver af disse kategorier for at finde ud af, hvordan du lærer dig selv design.

Learning Design by doing

den bedste måde at begynde at forstå hjemmesider er at se, hvordan eksisterende hjemmesider er sat sammen og bygge dem selv.

se, hvordan andre hjemmesider fungerer

for at starte er de fleste hjemmesider på internettet skrevet, i det mindste delvist, i HTML. For at se den HTML, der opretter denne side, skal du “se kilde” i den bro.ser, du bruger. Prøv at gå Cmd / Ctrl-U (til Chrome), gå Cmd/Ctrl-Alt/Opt-u (til Chrome), og hvis du bruger Internetudforsker, skal du virkelig spørge dig selv, om internetdesign er den rigtige karrierevej for dig.

prøv at gennemse HTML for at se, hvordan de forskellige elementer på en hjemmeside er markeret. Du kan muligvis identificere bestemte tags med det samme. For eksempel <p> er for afsnit, <h1,2,3> er overskrifter, <img> er for et billede osv. Du vil bemærke, at de fleste af disse tags fungerer parvis for at betegne begyndelsen og slutningen af markeringen, for eksempel <p>Text here</p> viser åbningen og lukningen af afsnitstagget med skråstregen (/) forud for det afsluttende tag. Andre tags virker ikke parvis, for eksempel lukker billedmærket selv <img src = "https://robcubbon.com/images/rob.jpg" /> dette instruerer bro.sereren om at vise et billede med en bestemt internetadresse som kilde (src).

learning-web-design-second-lesson

en anden ting, du måske bemærker fra HTML-kilden, er, at alle HTML-sider har lignende struktur. De starter alle med en <!DOCTYPE> erklæring, der siger, Hvilken version af HTML den er i, efterfulgt af en <HTML> erklæring, efterfulgt af <head> i dokumentet, som er en beholder med forskellige elementer, herunder links til scripts, stilark, meta information osv. Efter <head> kommer <body> hvor elementerne på hjemmesiden er markeret.

øvelse: Vælg al kildekoden på denne side i et notesblok (PC) eller Tekstedit (Mac) dokument og gem det på din computer som “test.html ” eller noget. Åbn denne fil i en bro.ser, og den skal se nøjagtig den samme ud som onlineversionen. Sluk nu for din forbindelse til internettet, og se, hvordan testsiden ser ud. Temmelig anderledes, hva’? Prøv at finde ud af hvorfor.

handelsværktøjer

mens du gør dette, vil der være visse værktøjer, du har brug for.

  • flere bro.Serere og smartphones. Prøv at teste dine egne sider på forskellige internetsøgere og telefoner (Det er her, du starter en langvarig hadaffære med Internetudforsker).
  • teksteditor. Du kan bruge den grundlæggende Notesblok (PC) eller Tekstedit (Mac), eller måske Coda (Mac) eller Drømmevæven – brug ikke Drømmevæven i visuel tilstand, bare arbejde på koden, du skal forstå, hvordan disse ting fungerer under hætten.
  • Validator. Bekræft dine sider med HTML-validatoren og CSS-validatoren (brug et plugin som f.eks.
  • Chrome udviklerværktøjer og Firebug. Disse værktøjer hjælper dig med at forstå CSS og JavaScript, som, hvis du troede HTML var svært, tager en vis forståelse.
  • grafik og billedredaktører. Centralt for internetdesign er billedredaktører som Photoshop eller fyrværkeri. Disse er ret dyre, men der er GIMP plus et væld af online billedredaktører, hvis du lige er startet.

learning-web-design-third-lesson

oprettelse af dine egne statiske HTML-hjemmesider

mens din forståelse af HTML, CSS og JavaScript vokser, skal du oprette statiske HTML-sider, enten lokalt eller på en internetserver. Spil kontinuerligt med koden for at prøve at gøre seje ting. Prøv at genskabe visse elementer i andre hjemmesider ved at kopiere bits af koden.

selvom de hjemmesider, du til sidst opretter, sandsynligvis ikke vil blive lavet af HTML-filer, er det vigtigt, at du forstår, hvordan du opretter statiske HTML-sider først, før du kan begynde at bruge PHP og/eller Content Management Systems (CMS) til at oprette HTML.

oprettelse af dine egne hjemmesider med CMS

de fleste hjemmesider er skabt af CMS – programmer, der kan oprette HTML-sider inden for bestemte skabeloner. De bedste af dem er Joomla og Drupal, men der er et væld af lighter, open source CMS ‘er du kan eksperimentere med, disse vil lære dig, hvordan PHP, og med andre CMS’ er, ASP, bruges til at stykke sammen hjemmesider.

brug MAMP på din computer til at køre disse systemer lokalt, så du kan få en god forståelse af, hvordan de fungerer.

brug af billedredaktører

du skal vide, hvordan du bruger Photoshop eller noget lignende. Du har brug for dette for at oprette grafik til siden samt for at give komplette billeder af, hvordan siden vil se ud, når den er færdig for at hjælpe designprocessen.

Get design

selvfølgelig har jeg ikke nævnt, at de resulterende hjemmesider ikke kun skal validere, arbejde, findes af søgemaskiner, tjene et formål og markedsføres, men også … de skal se godt ud.

for at forbedre dit kunstneriske øje skal du regelmæssigt producere arbejde og derefter prøve at forbedre det. Sketch designs på papir derefter arbejde på dem i Photoshop eller hvad grafikprogram, du har. Øvelse vil hjælpe dig med at blive en bedre designer. Jeg vil anbefale flere ressourcer senere, der vil hjælpe dig med designprincipper.

learning-web-design-lesson-four

online ressourcer

når folk ønsker svar, går de til internettet og “Google det” eller søger på YouTube. Hjemmeside design er ikke anderledes. Der er mange ressourcer, der hjælper dig online. Først og fremmest er der V3-skoler, som internetdesignere omtaler som den bedste online selvundervisningsressource, der er også Tisag. Nogle mennesker anbefaler Lynda.com selvom jeg ikke har brugt det personligt.

Blogs

der er en række store design blogs derude. Der er store, der kan hjælpe dig som Smashingmagasin, Netdesigndepot, 1stveldesigner og Envato-netværket.

personligt får jeg mere fra det uafhængige Internet og grafiske designere, der blogger. Der er, imidlertid, belastninger, som jeg har lært af gennem årene, så her er blot nogle få, og jeg undskylder alle fremragende bloggere, som jeg har forladt listen.

  • Chris Colyers CSS Tricks er en flot responsiv hjemmeside, men har også stor hjemmeside design info og tricks
  • Veerle Pieters har stor Photoshop og Illustrator tutorials på Veerle blog
  • David Airey er en person, jeg har fulgt i et stykke tid på sin egen eponyme blog, LogoDesignLove og IdentityDesigned. David er blandt andet interesseret i organisationernes overordnede identitet.
  • Chris Spooner har lært mig meget med tutorials på sin blog på SpoonGraphics og plus information og inspiration på Line25
  • Fabio Sassos vidunderligt designede site tilbyder stor inspiration og underlighed.
  • Nick La ‘ S N. Design Studio og Designervæg har nogle fantastiske oplysninger og stor inspiration.

du er velkommen til at tilføje dine foretrukne design blogs i kommentarerne nedenfor.

fora

når du bashing dit hoved mod en mur fora er gode steder at få svar. Skriv en beskrivelse af dit problem og internetadressen, og meget ofte vil nogen vende tilbage til dig med en løsning. Her er nogle af mine yndlingsfora.

Jeg kan godt lide Estetica Design Forum, DesignForums.co.uk, og Designer, s Talk. Der, s Digital punkt og Sitepoint for mere bredere spænder forespørgsler, den ordtryk forum er fremragende, og der, s kriger Forum for internetmarkedsføring.

bøger

mange internetdesignere hævder, at gode gammeldags fysiske bøger har hjulpet med at lære dem internetdesign. Her er et par af mine favoritter og nogle andre, der er blevet anbefalet til mig. Linkene er Amazon.com affiliate links.

  • Byg din egen hjemmeside på den rigtige måde ved hjælp af HTML & CSS 3. (tredje) udgave af Ian Lloyd er en Sitepoint-bog, jeg læste for mange år siden. Det hjalp mig virkelig på det tidspunkt, da det fokuserer på bedste praksis for internetdesign. Sørg for at købe en opdateret udgave (i øjeblikket den tredje udgave, der indeholder meget på HTML5).
  • CSS: den manglende Manual af David McFarland indeholder forklaringer, eksempler og trinvise vejledninger. Denne bog anbefales især, da den giver dig baggrunden for CSS og indeholder meget om CSS3.
  • principperne for smukt design, 2.udgave af Jason Beaird, fastholder, at design er en færdighed, der kan læres og lærer dig de grundlæggende principper for design.
  • farvedesign projektmappe: en rigtig Verdensguide til brug af farve i grafisk Design af AdamsMorioka (editor) giver de vigtige oplysninger, der er nødvendige for at anvende farve kreativt og effektivt til designarbejde.
  • Lad mig ikke tænke: En sund fornuft tilgang til internet Usability, 2. udgave af Steve Krug en øjeblikkelig klassiker på internettet usability, fyldt med indsigt og praktiske råd.
  • Getting Real: den smartere, hurtigere og nemmere måde at opbygge en vellykket internetapplikation med 37 signaler kan være om at skabe internetapplikationer ikke steder, men det har sådan en fantastisk måde at forenkle internetprocesser på, at jeg fandt det sådan en nyttig læsning.
  • Jeff Starr kommer stærkt anbefales som den store bog. Fås som en PDF-version (praktisk til kopiering af kode) samt en fysisk version.

der er mange flere bøger, jeg kunne have medtaget især om designteori. Hvis du har forslag til bøger, der har hjulpet dig med internetdesign, så lad os vide om dem i kommentarerne.

hvad du kan gøre

mange designere hævder, at fiasko faktisk er den bedste lærer. Så kom ud og design hjemmesider! Når du, som uden tvivl vil ske, støder på en mur, kan du bruge nogle af de online ressourcer her til at hjælpe dig. Og når du ikke kan se på computerskærmen mere, kan du læse en bog om det!

Leave a Reply

Skriv et svar

Din e-mailadresse vil ikke blive publiceret.