ડિઝાઇનમાં ફ્લો - લેઆઉટ અને આર્ટવર્ક જે મોશનને કન્વીઝ કરે છે

01 ના 07

વિઝ્યુઅલ ફ્લો શું છે?

વિઝ્યુઅલ ફ્લો દર્શકની આંખને દસ્તાવેજ દ્વારા એવી રીતે રજૂ કરે છે કે તમામ મહત્વપૂર્ણ ઘટકો પ્રાધાન્ય મેળવે છે, અને કોઈ પણ દ્રષ્ટિને નજરમાં નથી અથવા દર્શકને ટુકડોની ભાવના ગુમાવી દે છે. બાજુઓ અથવા સંખ્યાઓ જેવા સ્પષ્ટ પ્રવાહ ઘટકોનો ઉપયોગ કરવો એ સૌથી સામાન્ય રીત છે, વેબ ડિઝાઇનરોનો પ્રવાહ ઉપયોગ કરે છે, પરંતુ અન્ય પ્રકારના તત્વો છે કે જેનો ઉપયોગ અને તમારા વાચકોને ચોક્કસ પાથ સાથે ખસેડવા માટે દિશામાન કરવા માટે ખોટી રીતે ઉપયોગમાં લેવાય છે. આ ટ્યુટોરીઅલમાં તમે સારા અને ખરાબ પ્રવાહોના ઉદાહરણો બતાવશો અને ડિઝાઇનમાં વિઝ્યુઅલ ફ્લોના શબ્દભંડોળને શીખવામાં તમને મદદ મળશે.

વિઝ્યુઅલ ફ્લો ઘણી રીતે પ્રાપ્ત કરી શકાય છે:

• તીરો
• ક્રમિક છબીઓ અથવા ટેક્સ્ટ ઘટકો
• પરિપ્રેક્ષ્ય
• ગ્રેડિએન્ટ્સ
• કદ ફેરફારો
• કર્વ્સ
• છબીઓમાં મોશન
• ફેસિસ - ખાસ કરીને આંખો

નીચેની છબીઓ તમને વેબ પૃષ્ઠો પર પ્રવાહોમાં કેટલીક સામાન્ય ભૂલો અને તેમને કેવી રીતે સુધારવી તે બતાવશે.

07 થી 02

ડાબેથી જમણે પાશ્ચાત્ય ટેક્સ્ટ ફ્લો

જો તમે પાશ્ચાત્ય ભાષા વાંચીને ઉછર્યા છો, તો તમે વિચારી શકો છો કે ટેક્સ્ટ ડાબેથી જમણે ખસેડવું જોઈએ તેથી, જેમ આંખ ટેક્સ્ટની એક રેખા તરફ આગળ વધે છે, તે ડાબેથી જમણી તરફ આગળ વધી રહી છે

ઉપરોક્ત ચિત્રમાં, પાણીનો ધોધ ડાબેરી દિશામાં જમણી તરફ વરાઇ રહ્યો છે, અને ટેક્સ્ટ પાણીના ધોધમાં વહે છે. કારણ કે આપણે બધા જાણીએ છીએ કે ધોધ ઘટે છે, ટેક્સ્ટના પ્રવાહ સાથે પાણીના પ્રવાહની દિશામાં ડિસ્કનેક્ટ છે. દર્શકની આંખ લખાણ વાંચવા માટે ખોટી દિશામાં ફરે છે.

03 થી 07

તમારા ટેક્સ્ટમાં છબીઓ સાથે ફ્લો જોઈએ

આ કિસ્સામાં, ઇમેજ રિવર્સ કરવામાં આવી છે જેથી ટેક્સ્ટ પાણીની દિશામાં વહે છે. બધા તત્વો પાણીના પ્રવાહ અને ટેક્સ્ટના પ્રવાહ સાથે દર્શકની આંખ નીચે દોરે છે.

04 ના 07

ડાબેથી જમણે સમકક્ષ ફાસ્ટ

આ ફોટોનો ઘોડો જમણેથી ડાબેથી ચાલી રહ્યો છે, પરંતુ ટેક્સ્ટ અંગ્રેજી છે અને તેથી જમણી બાજુથી ડાબે હોર્સ રેસિંગની દિશામાં દ્રશ્ય અસર સમગ્ર દસ્તાવેજની ગતિને ધીમો કરે છે કારણ કે તે ટેક્સ્ટ કરતાં અલગ દિશામાં જવાનું છે.

પાશ્ચાત્ય સંસ્કૃતિઓમાં, કારણ કે અમારી ભાષાઓ ડાબેથી જમણે ખસેડે છે, અમે આગળ અને ઝડપી હોવા તરીકે ડાબેથી જમણી તરફ દ્રશ્ય દિશા નિર્દેશ કરવા આવ્યા છે, જ્યારે ડાબેથી જમણા વધુ પછાત અને ધીમી છે. જ્યારે તમે ઝડપની સૂચિતાર્થ સાથે લેઆઉટ બનાવી રહ્યા હો, ત્યારે તમારે આ યાદ રાખવું જોઈએ - અને તમારી છબીઓને ટેક્સ્ટની જેમ જ દિશામાં ખસેડવામાં આવશે.

05 ના 07

ધીમો ડાઉન કરવા માટે દર્શકની આંખને દબાણ કરશો નહીં

જ્યારે ઘોડો અને લખાણ બન્ને જ દિશામાં જતા હોય છે, ત્યારે ગર્ભિત ગતિ વધે છે.

06 થી 07

વેબ ફોટાઓ માં આઇઝ જુઓ

ફોટા સાથેની ઘણી વેબ સાઇટ્સ આ ભૂલ કરે છે - તેઓ પૃષ્ઠ પર વ્યક્તિનું ફોટો મૂકે છે, અને વ્યક્તિ સામગ્રીમાંથી દૂર જોઈ રહ્યાં છે આ જૂના વેબ ડિઝાઇન સાઇટ પર પણ જોઈ શકાય છે.

જેમ તમે જોઈ શકો છો, મારો ફોટો કેટલાક ટેક્સ્ટની આગળ મૂકવામાં આવ્યો છે. પરંતુ હું તે ટેક્સ્ટથી દૂર રહું છું, મારી પાસે લગભગ મારી પીઠ ચાલુ છે. જો તમે જૂથમાં બે લોકો વચ્ચે શરીરની ભાષા જોયા છો, તો એવું ધારણ કરવું સરળ બનશે કે હું જેની નજીક છું તે વ્યક્તિને પસંદ નથી (આ કિસ્સામાં ટેક્સ્ટનો બ્લોક).

ઘણા આંખ ટ્રેકિંગ અભ્યાસો દર્શાવે છે કે લોકો વેબ પાનાંઓ પર ચહેરાઓ જુએ છે અને સંબંધિત અભ્યાસોએ દર્શાવ્યું છે કે જ્યારે ચિત્રો જોઈ રહ્યા હોય, ત્યારે લોકો અચેતનપણે આંખોને અનુસરે છે તે જોવા માટે ચિત્ર શું જોઈ રહ્યું છે. જો તમારી સાઇટ પરના ફોટો બ્રાઉઝરની ધારને જોઈ રહ્યા હોય, તો તે જ તમારા ગ્રાહકો જોશે અને પછી પાછા બટન દબાવો.

07 07

કોઈ પણ ફોટોમાં આઇઝે સામગ્રીનો સામનો કરવો જોઇએ

About.com for new design માં, ફોટો થોડી સારી છે હવે મારી આંખો વધુ આગળ જોઈ રહી છે, અને થોડો સંકેત છે કે હું મારા ડાબા જોઈ રહ્યો છું - જ્યાં લખાણ છે.

તે પોઝિશન માટેનો એક વધુ સારો ફોટો એક હશે જ્યાં મારા ખભાએ ટેક્સ્ટ તરફ સંકેત પણ બનાવ્યો હતો. પરંતુ આ પ્રથમ ફોટો કરતાં વધુ સારો ઉકેલ છે. અને, એવી પરિસ્થિતિઓ માટે કે જ્યાં છબીની સામગ્રી તેમજ ડાબી બાજુની જમણી બાજુ હશે, આ એક સારો સમાધાન હોઈ શકે છે

યાદ રાખો કે, જ્યારે લોકોનાં ચહેરાઓની છબી સૌથી વધુ ધ્યાન દોરે છે, ત્યારે તે પ્રાણીના ફોટાઓ વિષે પણ સાચું છે. ઉદાહરણ તરીકે, આ નમૂનો લેઆઉટમાં, મારી પાસે શ્વાન બાકી છે, પરંતુ છબી ફ્લશ અધિકાર છે. તેથી તેઓ આ પાનું બંધ શોધી રહ્યા છે જો હું શ્વાનનું વલણ બદલું તો આ લેઆઉટમાં સુધારો થશે જેથી તે સ્ક્રીનની મધ્યમાં જોઈ રહ્યા હોય.