Advertisement
  1. Web Design
  2. Workflow
Webdesign

Замалёўкі: як простая ручка і папера могуць змяніць вашыя вэб-дызайны

by
Length:LongLanguages:
This post is part of a series called Let’s Talk About Creativity.
Don’t Squelch Your Creativity With the Constraints of Possibility
Readers' Poll: How do You Combat Designer's Block?

Belarusian (беларуская мова) translation by Olya Misuragina (you can also view the original English article)

Мы праводзім многа часу перад маніторам, і, напэўна, у нас не адзін кампутар, не кажучы пра айфон, графічныя планшэты і іншую сучасную чартаўшчыну, якая апанавала нашы сталы. Мы — частка пакалення, якому патрэбна мышка, каб прагартаць альбом з сямейнымі фотаздымкамі (бывайце, дарагія сямейныя альбомы з жаўтлявымі старонкамі), а Facebook — каб адправіць сябру пажаданні з Днём нараджэння. 20 прыкладаў выдатных сайтаў з эскізамі!

Тым не менш, у сярэдзіне гэтай лічбавай эпохі лепшымі саюзнікамі вэб-дызайнера з'яўляюцца звычайныя інструменты, якія можна купіць на дробязь, якая згубілася між падушкамі на канапе. Я кажу пра тое, каб зрабіць ручку, аловак і паперу часткай творчага працэсу, які іншыя «нялічбавыя» дызайнеры выкарыстоўвалі гадамі: я прапаную рабіць замалёўкі.

У гэтым артыкуле мы разгледзім довады, якія напэўна ўзнікалі ў вас у глыбіні душы: мы ўбачым на прыкладзе, як накіды дапамагаюць упарадкаваць ідэі, стварыць эфектны дызайн макета і — чаму б і не — дадаць свежы і незвычайны штрых нашаму дызайну.

Замалёўкі як частка працэсу планавання

Уявіце такі сцэнар: Толькі што скончыўся выматвальны брыфінг з кліентам, і цяпер надышоў момант зноўку ўпарадкаваць нашы ідэі. Нам вядомыя перавагі і нястачы кліента. На аснове гэтага мы зможам стварыць макет дызайну. Праблема ў колькасці інфармацыі, якую нам трэба ўлічыць! Мы вызначылі, што на хатняй старонцы трэба размясціць слайдэр і прыкметны заклік да дзеяння, каб з намі звязаліся, што на сайце будзе сем старонак, а таксама што на хатнюю старонку трэба будзе ўключыць апошнія навіны, і гэтак далей.

Я вас запэўніваю, што на гэтым этапе бескарысна адкрываць Photoshop з намерам стварыць эфектны макет: без падрабязнага плана таго, што трэба намаляваць, вы зойдзеце ў тупік, вам будзе не хапаць бачання, якое дазваляе прымаць разумныя рашэнні. Гэта значыць, што пазней вам трэба будзе яшчэ больш працы, каб перарабіць тое, што можна было адразу зрабіць правільна толькі з дапамогай невялікіх накідаў.

Замалёўкі даюць дызайнерам нешта ні да чаго не падобнае... яны дапамагаюць нам падзяліць вялікія аб'ёмы інфармацыі на пасільныя часткі, вакол якіх мы можам ствараць дызайн.

Калі ж вам пашанцавала і вы ўмееце ператвараць канцэпцыі і ідэі ў дызайн, напэўна вы забудзецеся пра нешта важнае, і ў выніку вам прыйдзецца ўзяцца за макет зноў, другі раз. І вам, напэўна, вядома, што існуюць макеты, якія нават з-за невялікіх дробязяў цалкам мяняюцца і губляюць сваю камунікатыўную і эстэтычную каштоўнасць... гэта сапраўды вельмі сумна.

Хочаце некалькі парадаў аб тым, як паступіць, не страціўшы пры гэтым галаву? Вазьміце ручку і паперу...

  1. Пазначце ключавыя словы, якія павінны вызначаць кампанію: яны павінны быць у вас перад вачыма на працягу ўсяго праекта, каб вы не забываліся пра тое, што трэба прадставіць графічна. Пазбягайце мудроных фраз і канцэпцый, будзьце натуральней: чым непасрэдней вы будзеце, тым больш інфармацыі, хутчэй і лягчэй ваш мозг зможа апрацаваць.
  2. Заўсёды запісвайце інфармацыю, неабходную ў працэсе дызайну, схематычна, напрыклад, у выглядзе спісу. Вам трэба пазначыць на паперы толькі тую інфармацыю і канцэпцыі, якія спатрэбяцца вам, як толькі вы адкрыеце графічную праграму.
  3. Размяркуеце інфармацыю па этапах, каб кожная фраза была як мага прасцей. Калі вам усё яшчэ трэба стварыць макет хатняй старонкі, не рабіце нататкі з нагоды таго, што трэба ўключыць на старонку з кантактамі, не адхіляйцеся і ня блытайце сябе. Пазначайце інфармацыю на розных старонках запісной кніжкі, каб вы маглі засяродзіцца на адзіным кроку за раз.

Гэтая першая фаза накідаў датычыцца перапрацоўкі інфармацыі ў схематычным і простым выглядзе. Магчыма, вам здаецца, што ўся гэтая строгасць і дысцыпліна не маюць нічога агульнага з творчасцю і ўяўленнем, і вам хочацца змяніць гэта? Добра, давайце пяройдзем да наступнага этапу.

Накіды як частка творчага працэсу 

Мы казалі, што накіды - гэта творчы працэс, але што гэта азначае на практыцы?

Можна лічыць, што эскізы - гэта нешта сярэдняе паміж інфармацыяй, якая нам вядомая, і макетам, які мы ствараем. На гэтай варожай і чароўнай тэрыторыі мы знаходзім колер, шрыфты, ячэйкі, ідэі, натхненне, тэкстуры, малюнкі, адчуванні, сумненні... і многае іншае. Не варта і казаць, што пасярод усяго гэтага лёгка заблытацца і цяжка знайсці патрэбную ідэю, тую, якая будзе працаваць і якая дазволіць нам ганарыцца сабой як дызайнерам.

Па-мойму, нішто не раздражняе так, як разуменне, што вось у вас перад вачыма пусты ліст паперы, вы чакаеце натхнення, якое павінна прыйсці з ніадкуль, і ў выніку вы ствараеце пачварныя макеты (потым, калі вам сапраўды пашанцуе, як мне, вы апынецеся побач з калегам, які возьме большую частку сітуацыі пад свой кантроль і будзе казаць вам, якая жудасная ваша праца, не клапоцячыся пра тое, каб падсаладзіць пілюлю і не закрануць вашыя пачуцці).

Адзін з маіх блакнотаў для замалёвак... мы вернемся да гэтага пазней.

У мяне бывалі цяжкія часы з некаторымі кліентамі: натхненне не хацела прыходзіць, а мае графічныя заяўкі прымушалі мяне саромецца самой сябе. Я гадзінамі праглядала сайты галерэй, яшчэ больш заганяючы сябе ў дэпрэсію, таму што мне здавалася, што кожны ўмеў ствараць прыгожыя макеты, і толькі я адна не магла скласці разам два прамавугольніка так, каб атрымалася прыгожа. У маім выпадку, аловак паменшыў гэты націск.

Накіды на паперы даюць штуршок творчаму працэсу і вызваляюць уяўленне, дазваляючы вам працаваць больш спантанна і натхнёна.

Улічваючы ўсё гэта, асабліва калі вы працуеце над велізарным праектам, багатым на тэхнічныя дэталі, першая фаза можа абарваць ваш творчы паток, не кажучы пра знясільваючы страх «правалу», да якога схільныя многія дызайнеры: імкнучыся скончыць працу хутка і якасна, мы часта застаемся паралізаванымі перад маніторам і ня можам прывесці ў парадак думкі і накіраваць іх у патрэбнае рэчышча.

Таму перад тым як пачаць працаваць у адной з графічных праграм, вазьміце ручку і паперу і... рабіце замалёўкі! Накідайце і запішыце пару ідэй, пачніце абстрактна апісваць дызайн, каб асвоіцца з ім і вызваліць сваю інтуіцыю. Пазней вы прааналізуеце гэтыя ідэі, а цяпер адпусціце сябе і не глядзіце на ўсё лагічна і рацыянальна, такі падыход не дапаможа вам на гэтым этапе.

Акрэсліце макет, зрабіце пару нататак, сцярыце ўсё, пачніце нанова: падчас гэтага працэсу ваш мозг працуе хутка і апантана, таму запісвайце ўсё, пакуль фаза інтуіцыі не пацьмянее! Вы выявіце, што, даўшы поўную свабоду сваім ідэям, вы прыемна паслабіцеся, і, акрамя таго, гэта выгодна.

Рабіце памылкі ... спецыяльна 

Першая ідэя рэдка бывае адзіна вернай, будзьце да гэтага гатовыя. Накіды дапамагаюць вам вызваліцца і даследаваць розныя графічныя магчымасці, якія могуць падысці вам лёгка і адразу, але гэта не азначае, што на гэтай фазе вы не будзеце рабіць памылак. Добра тое, што на гэтай фазе, нават здзейсніўшы памылку, вы заўсёды можаце разарваць ліст паперы, завастрыць аловак і зноўку пачаць на новым лісце паперы. Калі прыходзіцца выкідваць макет, створаны ў Photoshop, проста таму, што ён вам не падыходзіць, гэта, без сумневу, расхалоджвае.

Стварайце замалёўкі, а не каркас 

Пры гэтым я вам раю не блытаць замалёўкі са стварэннем каркаса: гэта дзве розныя рэчы, нават калі вы можаце прыняць адну з іх за іншую. Некалькі дзён таму адзін вэб-дызайнер сказаў мне, цытую: «О, ты выкарыстоўваеш ручку і паперу? Я ўсё раблю анлайн», згадаўшы сайт, які дазваляе ствараць макеты з матэматычнай дакладнасцю, дзе вы маеце поўны кантроль над колерам і шрыфтам.

Гэта не замалёўкі, гэта зусім іншае. Калі вы ціскаеце мышкай на нейкія кнопкі, каб з'явілася некалькі прамавугольнікаў, гэта не дазваляе вам апісаць свае ідэі ды вызваліць свой творчы паток, паверце. Кажучы гэта, я не сумняваюся ў карыснасці добрага каркаса, я проста хачу падкрэсліць розніцу паміж гэтымі двума падыходамі.

Звыкніцеся з бязладам

Пакіньце ўбаку сваю смагу дакладнасці, а таксама лінейку і цыркуль! На гэтым этапе няма месца парадку і строгасці, не абмяжоўвайце свой творчы паток, застапарыўшыся на палях і прабелах, вы можаце падумаць пра гэта пазней. Гэтак жа не хвалюйцеся, калі ў вас няма асаблівага мастацкага дару i вы з цяжкасцю трымаеце ў руцэ аловак: накіды створаны для парадкавання ідэй, а не для дэманстрацыі таленту мастака.

У гэтых адносінах варта дадаць, што, нават калі накіды — гэта сродак выказвання вольнага палёту фантазіі і творчасці, а не мастацкіх здольнасцяў, гэта не азначае, што накіды не маюць у нейкай ступені мастацкай каштоўнасці. Давайце разам паглядзім, пра што я кажу.

Замалёўкі як частка дызайнерскага працэсу 

Тэндэнцыя многіх вэб-дызайнераў рабіць замалёўкі дала штуршок сапраўднаму графічнаму стылю, які нагадвае пра эстэтычны бок эскізаў: у нас ёсць пэндзалі, якія імітуюць спантаннасць і лёгкасць гэтага працэсу, не кажучы пра сотні рукапісных шрыфтоў, якія можна лёгка знайсці ў інтэрнэце. Дзякуючы такім рэсурсам, сёння ствараць макеты ў выглядзе эскізаў даволі проста, але акрамя гэтага, дызайн ў падобным графічным стылі мае незвычайны штрых, які робіць яго прыемным воку і вылучае на фоне іншых.

Таму што шмат дызайнераў ў працэсе творчасці выкарыстоўваюць накіды, іх можна часцяком убачыць на сайтах фрылансераў або агенцтваў па камунікацыях або дызайну, якія жадаюць наглядна перадаць гэтую канцэпцыю. У любым выпадку, нават спалучэнне элементаў накідаў з больш традыцыйным графічным стылем надасць свежы выгляд у астатнім звычайным дызайнам.

Давайце паглядзім, як некаторыя сайты эфектна і незвычайна выкарыстоўваюць гэты стыль і як ён паўплываў на эстэтычны і практычны бок іх макетаў. 

Kunal Chhajer 

http://www.kunalchhajer.com/ 

Сайт вэб-дызайнера Куна Чхаера дакладна адлюстроўвае канцэпцыю стылю накідаў. Графіка лёгкая і прыемная, яе незвычайна ўпрыгожваюць малюнкі, якія робяць гэты макет унікальным. Пра гэты стыль таксама нагадвае рукапісны шрыфт у меню навігацыі. Усе гэтыя дэталі дадаюць дызайну творчы штрых, што дызайнер і хоча прадэманстраваць на сваім асабістым сайце. 

Creative With a K 

http://www.creativewithak.com/ 

На сайце Creative with a K шырока выкарыстоўваюцца накіды і крамзолі, каб ясна паказаць «творчую натуру» гэтага сайта. У гэтым выпадку нават нетыповыя ўласцівасці макета робяць гэты сайт асаблівым і незвычайным, нават калі з ім нялёгка справіцца. 

Lega-Lega 

http://www.lega-lega.com/ 

Сайт Lega-Lega — гэта анлайн-крама прынтованых маек, вызначана накіраваная на маладую аўдыторыю. Элементы накідаў дадаюць гэтаму сайту творчы і вычварны штрых. 

Beavory 

http://beavory.com/

Beavory — гэта сайт/блог Карэн Мэк, ілюстратара з Ізраіля. Яе сайт наўмысна заснаваны на стылі, які ясна і незвычайна нагадвае пра яе творчую натуру. Кожная дэталь, ад структуры макета, заснаванай на няроўных лініях, якія быццам былі намаляваныя фламастэрам, да іконак сацыяльных сетак, — абсалютна ўсё нагадвае пра эфектны стыль накідаў. 

Bowtie 

http://bowtieperiod.com/

«Bowtie» — гэта лічбавая студыя, якая рашыла прадставіць сябе ў інтэрнэце па-сапраўднаму творчым чынам. Анімацыі на сайце разам з мілымі, незвычайнымі малюнкамі робяць макет прывабным і вельмі экстравагантным. Гэтыя людзі лічаць сябе творчымі і, каб даказаць гэта, выкарыстоўваюць элементы накідаў. 

MakoMako 

http://www.makomako.cz/home/ 

Макет групы «MakoMako» цалкам створаны ў стылі накідаў, структура старонкі заснавана на лісце паперы з няроўнымі лініямі, а на галоўнай старонцы, як частка дызайну, акрамя звычайных графічных дэталяў у выглядзе эскізаў і рукапісных шрыфтоў, мы знаходзім аловак. Цікаўны і вельмі незвычайны выгляд для гурта. 

Stan The Snowman 

http://stanthesnowman.com/ 

У летні час вялікая частка шарму сайта Stan the snowman знікае, але яго графіка, несумненна, эфектная. Стылізаваныя выявы і каліграфічныя шрыфты надаюць стылю макета спантанныя, гуллівыя і нефармальныя рысы. Гэта нагадвае пра тое, як мы падпісваем віншавальныя паштоўкі. 

Greenaway Pro 

http://www.greenawaypro.co.uk/ 

Сайт фестывалю «Greenaway Pro 2011» асаблівым і прывабным чынам спалучае ў сабе стыль накідаў і гранжа, надаючы макету па-сапраўднаму незвычайны адбітак. Выбар пэўнага графічнага стылю выказвае нефармальны, спантанны і эксцэнтрычны выгляд сайта. Ідэальна для фестывалю музыкі і серфінгу, праўда? 

Julian Laval 

http://www.julianlaval.com/ 

Джуліян — гэта яшчэ адзін фрылансер і вэб-дызайнер, які жадае падкрэсліць свае мастацкія навыкі і па-сапраўднаму творча выкарыставаць для гэтага камунікатыўную сілу эскіза. Вядома, ня толькі гэта робіць яго сайт асаблівым, але і цікавая і наўмысна незвычайная прырода яго малюнкаў. Як і ў выпадку з іншымі сайтамі ў гэтым стылі, колер абмежаваны адценнямі шэрага, каб ілюстрацыі здаваліся больш рэалістычнымі. 

Little Creatures 

https://www.littlecreatures.com.au/

Сайт Little Creatures створаны цалкам у стылі накідаў і, дзякуючы незвычайным эскізам, трохі недаробленым, выглядае настолькі прывабна. 

Le Carnet Ordinaire 

http://carnetordinaire.com/

Carnet Ordinaire - гэта сайт-дзённік з нататкамі аб падарожжах, анатацыямі і асабістымі развагамі. Улічваючы эксцэнтрычную і адасобленую прыроду гэтага сайта, стыль накідаў падыходзіць яму больш за ўсё: макет заснаваны на малюнку адкрытага нататніка і ўпрыгожаны эскізамі і стылізаванымі малюнкамі. Незвычайна выглядае нават фон з няяснымі карыкатурамі і алоўкам, выпадкова пакінутым каля блакнота. 

Wing Cheng 

http://www.wingcheng.com/ 

Партфоліо Вінг Чэнг — гэта ідэальны прыклад таго, што стыль накідаў асвяжае макет. Структура старонак заснавана на прыадчыненым блакноце, з якога выпадаюць старонкі. Эфект выглядае больш драматычна дзякуючы ценям, якія апраўляюць дызайн, і каліграфічным шрыфтам макета, ад загалоўкаў праектаў да іх апісанняў. Але сапраўдная асаблівасць гэтага сайта ў тым, як творча прадстаўлены праекты, намаляваныя алоўкам.

Kuztown University 

http://www.kutztown.edu/acad/commdes/faculty/ 

Універсітэт камунікацый і дызайну горада Куцтаун не знайшоў лепшага спосабу звярнуцца да творцаў і пачаткоўцаў. Яго макет сапраўды незвычайны для акадэмічнага асяроддзя: фон у акварэльным стылі, старонка падобная на старонку з кнігі, акварэльныя ілюстрацыі, асаблівыя шрыфты меню навігацыі... усе гэтыя дэталі незвычайныя і вызначана выразныя.

Dan Whittaker 

http://www.dannwhittakercreative.com/ 

Дэн Уиттэкер дэманструе на сваім сайце звычайны для многіх вэб-дызайнераў графічны стыль. Нядбайны і непасрэдны выгляд, заснаваны на макеце старонкі з кнігі і паслядоўным выкарыстанні элементаў накідаў. Увогуле, макет вельмі эфектны і прыемны воку. 

Chernobyl Heart 

http://www.chernobylheart.org.uk/ 

У выпадку сайта Chernobyl Heart стыль накідаў выкарыстоўваецца, каб графічна падкрэсліць ідэю дзяцінства: гаворка ідзе пра дзяцей, і нам гэта зразумела з-за невялікіх стылізаваных накідаў, якія выказваюць дзіцячую манеру малявання. Эфектны і прыемны. 

Demain j'arrete 

http://demainjarrete.stpo.fr

Стыль накідаў ідэальна падыходзіць для прадстаўлення інтэрнэт-коміксаў і ілюстрацый, і макет візуальна і творча дэманструе прыроду сайта. Увесь сайт Demain J'arrete створаны ў графічным стылі малюнка вуглём, пачынаючы ад градыентаў фону і заканчваючы няроўнымі лініямі макета і меню навігацыі. 

Nature Shop 

http://www.natureshop.co.nz/

Нядбайна дададзеныя пара элементаў накідаў могуць надаць асаблівы творчы штрых мінімалістычнаму сайту. Вынік выглядае вельмі прыемна, напрыклад, паглядзіце сайт «Nature Shop».

Ready to Market 

http://www.readytomarket.net/ 

Макет сайта Ready to Market — прыклад таго, як змешванне сучаснага стылю са стылізаванымі элементамі коміксаў можа спарадзіць новы ўражлівы вынік. 

Cou Cou Shop 

http://www.coucoushop.ch/ 

Сайт «Cou Cou Shop» вельмі мілы і прыемны воку. Адзін з асаблівых элементаў макета — гэта, без сумневу, ніжні калантытул, які дэманструе стылізаваны пейзаж Швейцарыі. Нават эскіз сумкі з розных бакоў выглядае незвычайна.

Upside Down-Town 

http://upsidedowntown.me/ 

Маляўнічы, незвычайны і вычварны сайт навучальнага цэнтра «Upside-Down Town» вельмі арыгінальна выкарыстоўвае стыль накідаў. Кожны элемент макета, асабліва загаловак, кажа пра тое, наколькі эфектна выглядаюць малюнкі, накіды і колер, графічна і весела асвятляючыя дзіцячы свет.

Выснова 

Мы ўбачылі, як накіды могуць дапамагчы нам творча перапрацаваць ідэі і як у той жа час некаторыя замалёўкі надаюць макетам асаблівы, незвычайны выгляд. Пачынаючы працаваць над новым дызайнерскім праектам, вазьміце ў звычку рабіць накіды, і з часам вы разаўеце гібкасць мыслення, якая спатрэбіцца вам у працы, што можа прынесці вялікую карысць не толькі ў гэтай, але і ў іншых сферах дзейнасці, напрыклад, у капірайтынгу. Таму, напрыканцы: выключыце кампутар і вазьміце паперу і ручку!

Я заканчваю, дзелячыся з вамі двума сваімі накідамі: эскіз майго бягучага партфоліо і першыя ідэі гэтага артыкула, якія я запісала падчас па-сапраўднаму сумнай паездкі ў цягніку.

Зараз ваша чарга, я жадаю пабачыць вашыя замалёўкі!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.