Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Adobe Photoshop
Webdesign

Дизајнирајте целна страница за апликација во Photoshop

by
Difficulty:BeginnerLength:MediumLanguages:

Macedonian (Македонски јазик) translation by Stefan Nikolov (you can also view the original English article)

Final product image
What You'll Be Creating

Во ова упатство ќе ве водам низ процесот на дизајнирање на едноставна и апликација ориентирана кон конверзија за целната страница. Ќе ја користиме апликацијата Tuts + Android за демо, нагласувајќи ги нејзините карактеристики и придобивки и користејќи ги повиците за акција во текот на цело време.

Основи на висока конверзија 

Кога дизајнирате целни страници, постојат некои работи што ви се потребни за да добиете право да уживате во високи стапки на конверзија.

Според хакерот Нил Пател, со цел да имате конкуренција-кршење целна страница ви се потребни:

  • Убиствен наслов
  • Убедливи под-наслови
  • Слики
  • Објаснување
  • Пропорција на вредност или корист
  • Логичен тек
  • Доверливи препораки  
  • Моќен повик за акција 

Ќе ги имплементираме сите горенаведени елементи за да ја направиме нашата целна страница што е можно поефективна. 

АИДА модел

Силно препорачувам да ги погледнете Примена на принципите на AIDA во Веб дизајн од Шон Кронин. AIDA значи внимание, интерес, желба и акција; и овие принципи може да се применат во различни ситуации кои вклучуваат продажба на производи или услуги.

Истражувањата покажуваат дека луѓето не ми пречи на скролаат, па откако ќе го креирате првичниот интерес на врвот на страницата, не треба да се грижите за да ја направите подолга вашата целна страница .   Ова е неопходно да се каже одлична приказна и да додадете убедливи елементи. 

А / Б Тестирање  

Ефективните целни страници не можат едноставно да се дизајнираат еднаш и да се одвиваат добро.   Треба да продолжите со тестирање со различни комбинации на копии, бои, повик за акција и други елементи за да ги постигнете најдобрите резултати. 

За повеќе информации во врска со ова, проверете го воведувањето на Веб дизајнер на A / B тестирање од Сидхарт Десван.

Средства за водич

За да продолжите, ќе ви требаат некои (слободно достапни) средства: 

Припремете го документот

Чекор 1

Започнете со креирање на нов Фотошоп документ (Датотека> Нова ...) со користење на поставките прикажани подолу.  Слободно можете да користите платно од какви димензии сакате. 

Чекор 2

Ајде да поставиме некои водичи, па така нашиот распоред ќе има доволно простор и ќе изгледа балансиран.  Поставувањето на некои насоки ќе обезбеди уредност и ќе помогне да се дефинира ширината на нашата веб-страница за целите на овој дизајн.  Одете во Поглед> Нов водич ... и поставете некои насоки.  Јас обично избирам 1000px како појдовна точка и додавам некои насоки од аглите, за да има простор за дишење.

Забелешка: Упатства користени за овој водич: вертикално на 100px, 600px и 1100px.

Совет: Можете исто така да го користите приклучокот GuideGuide Photoshop за да го направите овој процес уште побрз.

Дизајнирање на заглавјето 

Насловот или областа "над пати" игра многу важна улога во ангажирањето со корисниците и осигурување дека посетителите остануваат на веб-страницата.

Главната функција на целниот страница на апликацијата е да ги убедиме посетителите да ја преземат апликацијата.  Поради таа причина ние ќе се фокусираме на придобивките од пробањето на апликацијата и ќе ви биде лесно да го преземете. 

Чекор 1

Ајде прво да создадеме група наречена "Заглавие" со кликнување Layer> New> Group ... или притискање на малата икона на дното од панелот за слоеви. Потоа земете алатка за хоризонтален тип (Т), изберете фонт со големина на фонт PT Sans (Bold) 18px, поставете боја во црно # 000000 и внесете го името на вашата апликација за да служи како лого, ставете го во горниот лев агол веднаш до првото вертикално упатство.  Дајте му малку простор над него, за да не изгледа тесно.

Чекор 2

Ајде да создадеме копче за повик за акција што ќе го употребиме во текот на нашиот дизајн за да бидеме сигурни дека посетителите ќе преземат нешто.  Направете нова група наречена "CTA btn" и изберете ја алатката за заокружен правоаголник (U), поставете радиус до 2px, ја промените бојата на предната плоча на зелено зелено # 17e594 и нацртајте форма на правоаголник со големина 206x38px.

Сега кликнете на десното копче на глувчето на слојот, изберете Опции за мешање ... и штиклирајте ја опцијата Stroke.  Потоа нанесете потемна зелена #09ba74.

Повторно избирајте ја алатката Хоризонтален тип (T) и внесете ја копијата за нашето копче. Го користав PT Sans (Bold) 12px и бојата бела #FFFFFF.

Чекор 3

Сега изберете алатка правоаголник (T) и нацртајте форма на правоаголник од 1200x600px (било која боја) и поставете ја веднаш под нашата минимална навигација. Оставив 25px јаз меѓу логото и формата како што направив за логото погоре, за да биде доследно.

Сега земете слика од Toolkit од Unsplash и ставете го над слојот на форма на правоаголник.  После тоа држете го копчето Alt и глушецот над слојот на сликата додека не видите мала стрелка која се насочува надолу, а потоа пуштете го глувчето за да креирате маска за клип, така што сликата е видлива само во областа на правоаголникот.

Hit CMD + T за да ја смените големината на фотографијата, внимавајќи да го држите копчето Shift, па така пропорционално да ја промените големината.

Чекор 4

Ајде да додадеме слој на филтер од сива, за да ја направиме нашата позадина подготвена за копирање и екранот на апликацијата. 

Променете ја бојата на преден план до темно сива # 222325 и креирајте нов слој, потоа ставете ја над фотослојот и уште еднаш креирајте маска за клипинг.  Потоа кликнете Alt + Backspace за да го наполните слојот со сива боја. Конечно, намалете ја проѕирноста на слојот до 80%.

Чекор 5

Земете ја алатката за хоризонтален тип (T), промените ја белата боја #FFFFFF и со користење на PT Sans (Bold) 48px големина внесете ја главната порака.  Бидете сигурни дека ќе му дадете многу простор погоре.  

Чекор 6

Сега намалете ја големината на фонтот на 21px, одберете нормална тежина на фонт, внесете попрецизна порака и ставете ја под главната порака.  За да направите линии изгледаат избалансирани и лесни за читање, ја зголемувајте висината на линијата до најмалку 30 пиксели.  Ставете го описот подолу под главниот наслов, во мојот случај намалив на 40px.

Чекор 7

Ајде да го повториме копчето за повик за акција (CTA), па на посетителите да им биде јасно што следно да прават по читањето на копијата. Најдете ја "CTA btn" групата и ја дуплирајте со притискање на CMD + J, после тоа ставете го под втората порака.

Чекор 8

Завршивме со копијата и главниот повик за акција, па ајде да ставиме прецизен преглед на апликација за да покаже како изгледа апликацијата пред луѓето да одлучат да ја преземат.

Преземете го бесплатниот Samsung Galaxy S5 mockup од Мартин Адамко и ставете го во вашиот документ.  После тоа, држете го копчето CMD, кликнете на сите слоеви кои припаѓаат на тој mockup и кликнете со десното копче за да изберете Convert to Smart Object.  Користете CMD + T за да ја промените големината и да се движите надесно од нашата главна копија и опис.

Потоа ставете го вашиот екран на апликација на паметен телефон со притискање на слојот на паметниот објект и зачувување.   Употребив скриншот на нова андроид апликација за Tuts + Courses.

Дизајнирање на просторот за бенефиции 

Завршивме со заглавјето.  Минимизирајте ја групата и создадете уште една, наречена "Предности".  

Чекор 1

После тоа, повторно изберете ја алатката Хоризонтален тип (T), ја промените бојата на иста темно сива # 222325 што ја користевме за филтерот (направете го вашиот дизајн конзистентен и кохезивен, наместо да донесувате повеќе бои) и користење на PT Sans (Bold) 30px внесете силна изјава и ставете ја под заглавјето, оставајќи многу простор над него.

Чекор 2

Сега имаме шанса да ги убедиме нашите посетители зошто нашата апликација вреди да се преземе. Размислете за придобивките на функциите за да можат луѓето да се визуелизираат со користење на истата. Променете ја бојата на суптилна сива сина #6a7588 и внесете неколку линии објаснувајќи зошто луѓето треба да ја користат вашата апликација. Користев PT Sans (Regular) 21px со висината на линијата поставена на 32px, истата поставка што се користи за секундарната порака во областа на заглавјето.

Обрнете внимание на растојанието помеѓу текстуалните блокови, оставете доволно простор за да го почувствувате чувството на вашиот дизајн. 

Чекор 3

Уште еднаш, да го повториме копчето за повик за акција (CTA), па посетителите кои не биле убедени претходно може да реагираат веднаш по читањето на вашите предности од копијата.  Дуплирајте ја групата "CTA btn" со притискање на CMD + J и ставете ја под копија на придобивките. Преместете ја во групата "Придобивки" за да го направите вашиот документ поорганизиран.  

Дизајнирање на областа за карактеристики  

Завршивме со областа за бенефиции, па ја минимизираме групата и создаваме нова, наречена "Карактеристики".  Овде ќе нагласиме некои од функциите на апликацијата, па посетителите кои сакаат да знаат повеќе и кои се веќе заинтересирани можат да дознаат повеќе за апликацијата. 

Чекор 1

Променете ја бојата на преден план на светло сива #fbfbfb, ќе користиме различна боја на позадина за делот Карактеристики за да го одделиме од останатите.  Потоа одберете ја алатката Rectangle (U) и нацртајте форма со големина 1200x700px која ќе служи како позадина. Осигурајте се дека ќе оставите простор за делот погоре

Чекор 2

За да ги одделиме областите на Карактеристики уште повеќе да ги ставиме 1px хоризонтални линии помеѓу позадините.  Изберете ја алатката за линија (U), поставете ја тежината на 1px и променете ја бојата на потемна сива #eeeeee.

Совет: држете го копчето Shift за да повлечете совршено хоризонтална линија.

Чекор 3

Отворете ја групата "Придобивки" и пронајдете го насловот, притиснете CMD + J за да го дуплирате и да преминете во групата "Карактеристики".  Уредете го за да одговараат на вашите потреби и ставете го во претходно создадената сива позадина. 

Чекор 4

Ќе креираме три блока на функции со икона, наслов и краток опис.  Направете нова група и наречете ја  "Feature 1" или нешто повеќе описно. Преминете на барачот за икони и преземете 48x48 px корисничка икона.  Кликнете на десното копче на глувчето на името на слојот и применете ги следните опции.

Може да забележите дека ние всушност имитираме стил на копчиња за да се да биде доследно.

Чекор 5

Уште еднаш, дуплирајте го насловниот слој, ставете го во групата "Функција 1" и со помош на алатката Хоризонтален тип (T) намалете ја  големината на фонтот на 16px и висината на линијата до 22px.

Чекор 6

Користејќи ја истата алатка за хоризонтален тип (T) напишете три кратки линии објаснувајќи ја вашата карактеристика.  Осигурајте се дека ја променивте бојата на претходно користената сива сина #6a7588.  Ставете го под иконата и насловот.

Чекор 7

Сега минимизирајте го групата и дуплирајте го двапати со притискање на CMD + J. Потоа прилагодете ги дуплираните групи за да ги собере во вашата апликација. За ова упатство, користев икони за маркери и часовници од барачот за икони. Осигурајте се да оставите доволно простор помеѓу блоковите за да изгледа балансирано. 

Чекор 8

Колку повеќе ќе покажете како вистинскиот производ изгледа толку подобро, ние ќе користиме поинаква перспектива на нашиот паметен телефон.  Ја превртив претходно користената Samsung Galaxy S5 mockup и ја заменив нејзината слика од Google Play.  Десен-клик на слојот mockup на врвот и одберете New Smart Object via Copy за да креирате независна копија.

За да ja прилагодите макетата за паметни телефони, кликнете два пати на слајдот на слојот и ставете го вашиот екран за апликации таму.

Дизајнирање на просторот на препораки 

Ќе додадеме некој социјален кредибилитет за нашата апликација, покажувајќи некои препораки од корисниците на апликациите. 

Чекор 1

Минимизирајте ги сите групи и создадете нова, наречена "Сведочења".  Внесете го насловниот дел како што го правевме порано и ставете го под групата "Карактеристики", оставајќи конзистентна количина на простор. 

Чекор 2

Сега отворете ја групата "Карактеристики", дуплирајте една од нив и преместете ја во групата "Сведочења". Ние ќе ја употребиме групата за нашите препораки.  Уредете ја копијата, менувајте го насловот на име и опис на лицето на сведочливата копија.

Отстранете ја иконата и, користејќи ја алатката Елипса (U), исцртајте ја кружната форма.  По тоа место на сликата на профилот на лицето над обликот на обликот на кругот и креирајте клипувачка маска.  Користам лице од User Inter Faces.

Чекор 3

Конечно, дуплирајте ја свежо направената препорачлива група и прилагодете ја со различни имиња, препораки и профилни фотографии.

 Дизајнирање на подножјето 

Минимизирајте ја групата "Препознавања" и создадете уште една наречена "Подножје".  Ќе го ставиме копчето за завршен повик за акција (CTA) овде и некои линкови до внатрешните страници на веб страната, бидејќи повеќето луѓе се движат надолу за да бараат архитектура на сајтот. 

Чекор 1

Преминете во групата "Заглавие" и, држејќи го копчето Shift, одберете ја формата на правоаголникот и слојот на сивиот филтер.  Потоа кликнете CMD + J за да ги дуплирате и да ги преместите во новата група "Подножје". Потоа ставете фотографија по ваш избор помеѓу формата на правоаголникот и слојот од сивиот филтер, создавајќи клипувачка маска.

Чекор 2

Додајте уште еден наслов кој ги охрабрува луѓето реагираат и да ја преземат вашата апликација. Направете го тоа бело #FFFFFF, па затоа е многу видливо на потемна позадина.  После тоа, дуплирајте го копчето за повик за акција (CTA) и ставете го под насловот. 

Чекор 3

Изберете алатка за хоризонтален тип (T) повторно и внесете некои линкови на вашата веб-страница.  Користам бели #FFFFFF PT Sans (Regular) 16px и линија-висина од 29px.

Чекор 4

Дуплирајте го текстот слој и прилагодете го за да одговара на вашата апликација.   Потоа, поставете линија на авторски права на самото дно на вашето подножје, оставајќи многу простор над и под него.

Честитки! 

Тоа е тоа!  Завршивме со дизајнот на теми, сега прегледајте ги слоевите на документите, избришете ги непотребните и предајте му ги на вашиот развивач, или, уште подобро, кодирајте го сами!

Advertisement
Advertisement
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.