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

Упатство за веб-дизајнери за избор на фотографии

by
Difficulty:BeginnerLength:LongLanguages:

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

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

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

Користење на фотографии во веб дизајн

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

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

Побарајте внимание преку употреба на голема фотографија

Луѓето скенираат екрани врз основа на минатото искуство и очекувања.  Горниот лев е најчеста почетна точка за очите на корисниците, иако тоа зависи од моделите на читање на нивната култура Ако користите голема слика на страницата, таа веднаш ќе го привлече вниманието и ќе ги одвлече од нивната вообичаена тенденција.

Третман на фотографија како содржина

Сигурен сум дека нема да се расправате со мене дека содржина на веб-страница е задоволна, но дали навистина ја третирате како таква? Дали го користите само како додаток или убав додатен материјал?  Дали ги разгледавте сите аспекти на тоа конкретно парче содржина? Дали сте ја оцениле фотографијата правилно пред да одлучите да ја користите? Дали сте ги сметале корисниците за ментални модели и за влијанието на фотографијата врз нив? Дали фотографијата дава значајни информации или обезбедува помош за тековната задача на корисникот? Ова се само некои од прашањата што треба да ги одговорите пред да користите слика на веб-страница.

Сликите никогаш не треба да се користат само за "да ја украсат" веб-страницата.

Сум видел многу дизајнери кои само поставуваат на прекрасна слика на цел екран на веб-страница, фрлање во некои tagline или "Повик за акција" и прогласување за готова. Во многу случаи фотографијата не е оценета, дизајнерот само следеше тековен тренд.  Ајде да видиме како да ја оцениме фотографијата пред да ја користите на вашиот сајт.

Избор на совршена фотографија

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

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

Нашиот мозок ги обработува сликите 60.000 пати побрзо од читањето на текстот.  Мајк Паркинсон

Дали е корисно?

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

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

Прекрасен пример за корисна слика во веб-дизајнот е Веб-страницата на Square.

squareupcom

Можете веднаш да кажете дека оваа слика е професионално снимена  (погледнете ги ноктите за рацете и прстите) Што е најважно, директно комуницира со што се работи производот и колку е лесно да се користи.  Многу корисна, едукативна и инструкциска фотографија.

Друг пример за корисна слика е веб-страницата на Pencil.  Слично на претходниот пример оваа фотографија го покажува токму она за што се работи (стил), каде и како може да се користи (iPad апликација).

Pencil website

Веб-страницата на Woodster, исто така, правилно ги користи фотографиите за објаснување на производот. Јасно е дека нивниот производ се користи за да го подигне вашиот Mac, но исто така обезбедува корисни USB конекции при рака.  Замислете го овој производ изолиран без контекст (iMac).  Дали мислите дека фотографијата ќе биде корисна како оваа?

Woodster website

Grovemade прави одлична работа за презентирање на колекција од нивниот производ на една фотографија со позадина во целосен екран.  Очигледно е дека тие произведуваат висококвалитетни канцелариски додатоци.  Не само што оваа фотографија е корисна, таа е исто така многу ефикасна и емотивна во исто време.  Ќе дојдеме до ефективни и емотивни фотографии за момент.

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

Дали е ефективен?

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

Ако погледнете на веб-страницата на Мобилност и оние сочни црвени слушалки, веднаш се привлечете и потенцијално сакате да ги купите!

Епл е познат по перфекционизам во сè што прави.  Целна страница на iPhone е полнa со брилијантни и пожелни фотографии на производи кои ве натера да поседувате еден од нивните производи.

Друг пример за ефективна слика е веб-страницата на tsptr.  Забележи како човекот на фотографијата гледа надолу како што има нешто подолу за да го истражите?  Навистина има нешто подолу.

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

Poco People користи забавна и забавна слика на нивната почетна страница.  Можете веднаш да кажете дека има нешто чудно во тоа.  Поради тоа, и добра употреба на бои, светла и изложеност, вашиот интерес е пикетиран на некој начин за да видите што е на оваа страница.

Веб-страницата на Колосал има голема слика на почетната страница што покажува што прават (ракоаат големи реклами и мурали) и како го прават тоа (проверете го човекот од десната страна).  Интересно за оваа слика е луѓето што минуваат од лево.  Тие изгледаат возбудени поради тоа што го очекуваат, а кои ве вклучуваат како набљудувач и ја прават целата слика и порака возбудлива и ефективна.

Дали е Emotive?

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

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

Главната слика на веб страната на Breath е многу смирувачка.  Во комбинација со добра заграда и правилна насока на гледање, жената на фотографијата ја пренесува нејзината леснотија на дишење кон гледачот.  Обрнете внимание на копчето "Inhale"?

Главната фотографија на веб-страницата на Шон Гровс раскажува одлична приказна за него.  Таа пренесува среќа, доверба, надеж, пријателство и исчекување кон гледачот кој се поврзува со него и се чувствува сочувство кон неговата работа.

Освен корисноста и ефективноста на изборот на фотографии Relay Foods, тие исто така ги пренесуваат емоциите за услугата што ја нудат.  Жените од лево и десно покажуваат радост во работењето за нив, и бидејќи Relay Foods е за природни производи, изразите на лицето на овие фотографии се усогласени со нивната порака / услуга.

Моќта на лицата

Има 7 или 8 основни емоции

  1. среќа
  2. тага
  3. презир
  4. страв
  5. одвратност
  6. изнендување
  7. лутина

Тие се универзални и (обично) се соопштуваат преку израз на лице и физички гестови.  Ако користите фотографии од луѓе за да ја пренесете вашата намера да се придржувате кон овие основни седум емоции и да одлучите кои од нив ќе ја водат вашата целна публика.

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

Кога ќе видиме лице, автоматски се активираме да чувствуваме нешто или да соживееме со таа личност

Веќе видовме фотографии од луѓе во претходните примери, но ајде да ги истражиме малку подалеку.

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

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

Луѓето можат да кажат кога насмевката е вистинска или лажна. 

Секој знае што се случило со СТЦ. Веб-страницата на Tribute Center 9/11 е посветена на приказните за оние кои беа таму. Човекот на фотографијата гледа директно во нас и ни помага да се поврземе со темата на страницата која нè поканува во заедницата. 

Забелешка: ова е направено без конфронтација; убава линија!

Друг одличен пример за пренесување на пораката со фотографија од човечко лице е Веб-страницата на Conversation. Човекот на Кајапо на фотографијата комуницира со авторитет, храброст и благодарност. 

Како што рече Сузан Вајнсенк, фотографиите одблизу се најубедливи на добротворната страница, а тоа е точно.  Save the Children има блиска фотографија на дете кое има потреба, кое совршено се совпаѓа со темата и темата на страницата. Забележете ја насоката на погледот кон копчето за донација? 

Како да * Не * да користиме фотографии во веб-дизајнот.

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

Неповрзани фотографии - веб-студиото за веб-дизајнери кои нудат услуги од "прилагодено" користи неповрзана фотографија во позадина (обоени теми) што создава погрешен прв впечаток и испраќа погрешни пораки до посетителот.  Има смисла тука, но тоа е нејасна метафора.

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

Софтверот како сервис кој нуди алатки за соработка за тимови користи фотографија на загрижена жена на работа. Ова може да создаде впечаток дека таа е загрижена за истиот софтвер кој сајт го промовира. Многу подобро решение тука би било да се прикажат или вистински производ слики од екранот или да се покаже среќна жена со користење на нивниот производ.

Избледнета позадина - само што се користи како декоративен заменувач, не комуницира ништо за сајтот, така што нема вистински ефект.  Јас би ве советувал да се избегне заматена слика  за позадина колку што е можно, можете да направите подобро од тоа;)

Друга сосема неповрзани слика на предметот на сајтот. Иако зборовите "рачно изработени" и "работилници" можат да бидат поврзани со самата фотографија, таа не го пренесува вистинскиот предмет на страницата.  Бренд Бат е за креирање на бренд стратегии и со серија фотографии поврзани со обработка на дрво им недостасува одлична можност да ја пренесат својата порака. 

Погрешен избор на фотографии - што беше вашиот прв впечаток кога ја видовте оваа фотографија? Двајца среќни луѓе кои стојат во кафуле ќе помогнат вашиот бизнис да успее онлајн.  Нели?  Не, целосната веб-агенција за дизајнирање на услуги всушност ја нуди оваа помош, а фотографијата треба да прикаже една од нивните среќни и успешни клиенти.  Ова, исто така, може да биде и слика на фотографија која треба да ја избегнете. 

Основни фотографии - тие речиси никогаш не ја пренесуваат вистинската порака.  Зошто има мало момче со чаши и држење на палците? Дали е тој програмер кој обезбедува услуги за кодирање на PHP? Јас не мислам така.

На веб-сајтот на Nationwide не успеа да ја пренесе пораката со оваа слика.  Прво, фотографијата не е поврзана со предметот, се чини дека жената ги гризе ноктите (знаеме дека ова е психолошко пореметување), а екранот на нејзината таблета е нејасен.  Оваа слика покажува вознемиреност, нервоза и стрес и навистина не мислам дека Nationwide сакаше да им го соопшти тоа на своите посетители. 

Финални мисли

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

Инвестирајте во добри фотоснимки: одличен фотограф може да додаде богатство на деловната вредност на вашиот веб-сајт. 

Без оглед на тоа што дизајнирате, вашата публика е составена од луѓе кои ќе корист од вашиот дизајн.  Разбирањето на човековото однесување е навистина единствениот начин да се направи ефикасен дизајн и ова се однесува на изборот на најдобрите фотографии за вашиот следен веб дизајн.

Понатамошно читање

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.