En webbutvecklare Försök Inte att Suga på Design – Robert Cooper – Medium

jag är en webbutvecklare. Jag satte ihop de tekniska komponenter som krävs för att göra en webbapplikation funktionella. Ofta gånger, är jag med mönster att följa med som gör mitt liv lättare eftersom jag behöver inte lägga någon som helst tanke på att skapa en estetiskt tilltalande app. Det är emellertid inte alltid fallet.

Det är ofta jag önskar att jag hade några riktiga färdigheter. Till exempel, när jag gör en ny blogg inlägg, jag skulle älska att kunna göra vissa killer illustrationer för att hjälpa till att förtydliga mitt ämne för diskussion. Också, när jag arbetar på en ny sida-projektet, skulle jag vilja vad jag skapa för att inte se ut som en lugg ett skit.

Nyligen, jag fick tag i en Skiss licens för att arbeta och jag bestämde mig för att ta på sig ett sida-projekt där jag skulle först skapa design med hjälp av Skiss, och sedan gå vidare mot att förverkliga design i form av en webbplats.

Min syster äger en blommig design studio och hon har redan en hemsida som hon byggt med hjälp av SquareSpace. Jag ville ta på utmaningen att skapa en helt ny webbplats för henne byggt på Shopify. Jag har byggt webbplatser med Shopify innan och jag är bekväm att arbeta med sina templating-språk för att bygga ut en egen webbplats.

Så jag öppnade upp ett nytt tomt dokument i Skiss och fick igång 👨🏼🎨.

konstruktionsfasen

designprocessen tog mig för evigt… och jag bara slutade med att utforma hemsidan 😐. Jag gick in i designen som vill att allt ska vara perfekt och jag ville prova på att använda bra design metoder. Detta har definitivt hindras hur snabbt jag kunde för att komma fram till en lösning.

jag gjorde en design för 3 olika skärmstorlekar (desktop, tablet och mobil). Jag använde symboler var som jag tyckte var lämpliga för att följa en slags atomär design metodik. Jag organiserade och grupperade min typografi komponenter på ett sätt som accepteras för lätt ändras till storlekar, färger och typsnitt familj över design. Och på toppen av det, jag installerat en handfull av plugins för att försöka göra vissa saker lättare som byta namn på flera lager och skapa flexbox-som responsiva layouter.

jag kämpade med att sätta upp symboler på ett sätt som får dem att visa exakt hur jag ville ha dem att titta i alla fall. Jag har till exempel skapat en - taggen – symbol som får texten att ändras liksom färg för att vara ett av två värden.

inställningar av min ” tag ” – symbolen.

När jag slutade att ändra texten till något annat än standard, jag ville inte hamna att få vad jag ville…

Detta exempel på taggen symbol har sms: a cutoff vid ändarna.
Denna symbol fint exempel wraps texten i den färgade rutan. Både denna symbol exempel och den som visas ovan använda samma symbol så jag är inte säker på varför man inte har ord omslag till en ny linje som de övriga \_(ツ)_/

Denna ständiga tweaking av symboler som tog upp en hel del tid, och jag fortfarande inte få dem alla inställningar rätt. Jag tyckte också att det är ganska svårt att upprätthålla design av hemsida i 3 olika skärmstorlekar. Som ni kan föreställa er, som jag ändrat utseendet för en skärm, jag var tvungen att ändra utseendet för de andra två. Även några av de symboler som jag använde för skrivbordet var för stor när jag har använt dem på mobilen, så jag var tvungen att hålla två uppsättningar av symboler i vissa fall.

Vad jag slutade med att komma upp med en design för hemsidan är följande (desktop version):

Desktop-versionen av hemsidan design.

Här är en utzoomad version av den 3 skärmstorlek design av samma startsida:

Skiss-app som visar 3 artboards representerar olika skärmstorlekar för hemsida.

Efter att ha tillbringat så mycket tid i Skiss utforma hemsidan har jag fått nog av att designa saker och slutade gå direkt till genomförande design och skapa andra sidor på webbplatsen på fluga.

genomförandefasen

jag byggt ut Shopify webbplats med Shopify tema development toolkit, Skiffer. Det ger dig det allra nödvändigaste som krävs för att komma igång med att bygga ut ett eget tema på Shopify.

Innan jag började det här projektet, jag hade tänkt att jag skulle designa något i Skiss och sedan försöka replikera design ända ner till pixel på webben. Tja, jag inte sluta göra det. Den modell jag gjort i Skiss slutade en grov guide till hur jag har implementerat design på webben.

faktum är att jag var tvungen att ändra design på startsidan lite eftersom den layout som jag skapat i Skissen var alltför svåra att genomföra på ett smidigt sätt på webben, så jag slutade att förenkla det.

En av de konstruerad hemsida avsnitt som ingår några bilder med ord fördelade mellan bilder i ett collage stil. Det var svårt att få ståndpunkter ord ser bra ut i alla skärmstorlekar, så jag ville inte hamna genomföra detta.
jag istället valt att placera bilder i en karusell och sedan lista alla ord i en lista layout.

avvek jag en hel del av den design som jag igång med att lägga allt på plats och det slutliga resultatet ser kinda-sorta som den design jag gjorde i Skissen.

Det slutliga genomförandet av webbplatsens startsida.

För andra sidor på webbplatsen, jag tittade på andra e-handelsplatser för lite inspiration och jag tittade också upp specifika komponenten mönster på Dribbble. Till exempel, kontakta former var baserad på en design jag hittade på Dribbble.

kontaktformulär skapas baserad på en design som jag hittade på Dribbble

om du vill se hur jag konstruerade andra sidor på webbplatsen och se några av de animationer/övergångar jag har införlivats. Observera att min syster inte sluta med Shopify sida som jag designade för henne (Shopify har en högre månadskostnad än SquareSpace och min redesign inte särskilt “wow” henne). Jag har ändrat en del av det innehåll att vara mer generiska och jag fortsätter att hålla webbplatsen levande för illustration/demo ändamål.

Hämtställen

Om jag var tvungen att upprepa denna process skulle jag definitivt göra vissa saker annorlunda:

inte fokusera på att skapa hifi-design

För min användning fallet, jag tror att det skulle vara mer fördelaktigt för mig att göra mer av en wireframe design i Skiss, åtminstone till att börja med.

mer forskning innan

jag gjorde det mesta av min forskning på farten för hur utformningen av platsen ska se ut. Jag tror att det skulle ha varit mer användbar hade jag gjort mer i förskott forskning och gick sedan ut på att designa fler sidor i Skiss innan vi går vidare för att genomföra design på webben. Det skulle ha gjort utvecklingsprocessen mindre “fragmenterad”.

försök inte att i förtid optimera konstruktioner

jag slösat bort en massa tid på att försöka lista ut hur man korrekt att använda symboler och försök att installera Skiss plugins som antar att göra design-processen enklare. Men, jag tror inte ens har ett bra grepp om de grundläggande verktygen i Skiss så jag har inte ens haft chansen att uppleva det mesta av smärta punkter dessa verktyg skulle anta för att hjälpa till att lösa. Jag tror att jag skulle ha nytta av att hålla sig till det allra nödvändigaste och samtidigt utforma eftersom jag skulle ha kunnat producera mönster snabbare och jag skulle ha bättre förstått hur mer avancerade verktyg som kan hjälpa till med gemensamma smärta poäng.

strävar inte efter perfektion

ju mer jag försökte att få något “helt rätt”, mer min utveckling hindrades. Det tar också mycket tid för att få den sista biten av en design som där du helst vill ha den. Detta är ett vanligt fenomen som representeras av “80/20-regeln, där de sista 20% av arbetet kommer att ta 80% av den totala föreskrivna tiden.

En webbutvecklare Försök Inte att Suga på Design

We will be happy to hear your thoughts

Leave a reply