
Duolingo
સફેદ કાગળ પર રમતિયાળ વર્ગનો માસ્કોટ
ડ્યુઓલિંગોનું ઇન્ટરફેસ બાળકોના ચિત્ર પુસ્તકની જેમ ડિઝાઇન કરવામાં આવ્યું છે: સફેદ કાગળનો કેનવાસ, ભરાવદાર, ગોળાકાર ફોન્ટ અને એક, સમૃદ્ધ લીલો રંગ જે તરત જ "સાચો જવાબ" ઉજાગર કરે છે. મુખ્ય ટેક્સ્ટ એક સુખદ મધ્ય-ગ્રે ટોન છે, જે લીલો અને તેના ઉચ્ચાર વાદળીને બધા ભાવનાત્મક કાર્ય કરવા દે છે - પ્રગતિ અને શીર્ષકો માટે લીલો, ક્લિક કરી શકાય તેવી લિંક્સ અને વધારાની ક્રિયાઓ માટે વાદળી. ઘટકો ગોળીઓ અથવા જાડા કાળા અથવા રંગીન કિનારીઓ સાથે જાડા, ગોળાકાર ખૂણા જેવા આકારના હોય છે, જે દરેક બટનને ફ્લેટ UI નિયંત્રણ કરતાં પૃષ્ઠ પર ચોંટેલા સ્ટીકર જેવું લાગે છે.
વિભાગો પૃષ્ઠની સંપૂર્ણ પહોળાઈ ધરાવે છે અને એક જ સ્તંભમાં ઊભી રીતે ગોઠવાયેલા છે, દરેક આશરે 800 પિક્સેલ ઊંચો છે. મહત્તમ સામગ્રી પહોળાઈ આશરે 1 પિક્સેલ કેન્દ્રમાં છે. ડાબી બાજુ ટેક્સ્ટ અને જમણી બાજુ ચિત્રો વૈકલ્પિક છે, જે પૂરતી ઊભી જગ્યા પૂરી પાડે છે (વિભાગો વચ્ચે 80 પિક્સેલ). ત્યાં કોઈ ગ્રીડ કાર્ડ અથવા મલ્ટી-કૉલમ લેઆઉટ નથી—દરેક વિભાગ એક જ ચિત્ર સાથે જોડાયેલ એક ટેક્સ્ટ બ્લોક છે. નેવિગેશન એ લોગો અને ભાષા પસંદગીકાર સાથેનો એક ન્યૂનતમ ટોચનો બાર છે, જે વિભાગો વચ્ચે એક નિશ્ચિત બાર તરીકે દેખાય છે. ફૂટર એ પૃષ્ઠની સમગ્ર પહોળાઈને આવરી લેતો લીલો પટ્ટો છે. લય સંપાદકીય છે: મથાળું, ફકરો, કૉલ ટુ એક્શન, ચિત્ર, પુનરાવર્તન.
પુસ્તકની ચિત્રાત્મક ભાષામાં સપાટ, દ્વિ-પરિમાણીય માસ્કોટ પાત્રો (ડ્યુએટ ધ ઘુવડ અને વિવિધ માનવ આકૃતિઓ) ગોળાકાર ભૌમિતિક આકારો, ઘાટા કાળા રૂપરેખાઓ અને ગુલાબી, જાંબલી, પીળો, નારંગી અને વાદળી રંગનો પૂરક રંગ પેલેટ છે જે ઇન્ટરફેસમાં ક્યારેય દેખાતો નથી. ચિત્રો દરેક વિભાગની જમણી બાજુએ ટેક્સ્ટની બાજુમાં, શુદ્ધ સફેદ પૃષ્ઠભૂમિ સામે, કન્ટેનર અથવા પૃષ્ઠભૂમિ વિના સ્થિત છે. કોઈ ફોટોગ્રાફ્સ નથી - પાત્રો દ્રશ્ય સામગ્રી તરીકે સેવા આપે છે. આઇકોનોગ્રાફી જાડા રૂપરેખાઓનો ઉપયોગ કરે છે, જે માસ્કોટની શૈલી સાથે સુસંગત છે. છબી ઘનતા મધ્યમ છે: દરેક વિભાગમાં પાત્રનું એક મોટું ચિત્ર છે, બાકીનું પૃષ્ઠ ટાઇપોગ્રાફી અને સફેદ જગ્યા માટે સમર્પિત છે.
પેલેટ
બ્રાન્ડ
- Eager Green
#58cc02— લીલો રંગ લિંક્સ, ટૅગ્સ અને ટૂંકા શબ્દસમૂહોને હાઇલાઇટ કરવા માટે વપરાય છે. કૉલ ટુ એક્શન માટે તેનો પ્રાથમિક રંગ તરીકે ઉપયોગ થવો જોઈએ નહીં. - Storybook Green
#d7ffb8— પ્રકાશ સપાટીઓ પર નરમ હાઇલાઇટ્સ, ફૂટરમાં નેવિગેશન લેબલ્સની પાછળ સૂક્ષ્મ પૃષ્ઠભૂમિ ટોન.
તટસ્થ
- Spark Blue
#1cb0f6— વાદળી રંગનો ઉપયોગ લિંક્સ, ટૅગ્સ અને ટૂંકા શબ્દસમૂહોને હાઇલાઇટ કરવા માટે થાય છે. કૉલ ટુ એક્શન માટે તેનો પ્રાથમિક રંગ તરીકે ઉપયોગ થવો જોઈએ નહીં. - Fresh Leaf
#a5ed6e— લીલો રંગ લિંક્સ, ટૅગ્સ અને ટૂંકા શબ્દસમૂહોને હાઇલાઇટ કરવા માટે વપરાય છે. કૉલ ટુ એક્શન માટે તેનો પ્રાથમિક રંગ તરીકે ઉપયોગ થવો જોઈએ નહીં. - Night Ink
#000437— લિંક્સ, ટૅગ્સ અને ટૂંકા હાઇલાઇટ કરેલા શબ્દસમૂહો જાંબલી રંગમાં પ્રકાશિત થાય છે. - Paper White
#ffffff— પેજ કેનવાસ, કાર્ડબોર્ડ સપાટીઓ, લીલા/ઘાટા પૃષ્ઠભૂમિ પર બટન ટેક્સ્ટ. - Charcoal
#4b4b4b— હીરો હેડર્સ અને બોડી ટેક્સ્ટ - યુનિવર્સલ ડાર્ક ટેક્સ્ટ જે રંગીન હેડલાઇન્સને અલગ તરી આવે છે. - Pencil Gray
#777777— ટેક્સ્ટના મુખ્ય ફકરાઓને અસ્પષ્ટ અક્ષરોથી પ્રકાશિત કરવામાં આવે છે, અને ગૌણ વર્ણનાત્મક ટેક્સ્ટ પૃષ્ઠભૂમિમાં ફરી જાય છે, જેથી રંગીન તત્વો સામે આવે છે.
ટાઇપોગ્રાફી
૧૩ થી ૬૪ પિક્સેલ સુધી · ૭ પગલાં
- feather — રિપ્લેસમેન્ટ: Inter · રૂપરેખા 700 · "મફત. મનોરંજક. અસરકારક" અને "ડુઓલિંગો અંગ્રેજી ટેસ્ટ" જેવા વિભાગના શીર્ષકો કસ્ટમ ગોળાકાર ફોન્ટનો ઉપયોગ કરીને પ્રદર્શિત થાય છે, જે બ્રાન્ડને તેની રમતિયાળ, મૈત્રીપૂર્ણ, માસ્કોટ જેવી શૈલી આપે છે. યોગ્ય વજનમાં "ફેધર બોલ્ડ" અથવા "નુનિટો બ્લેક" થી બદલો. અક્ષરોનું અંતર: -0.0200em
- duolingo-sans — રિપ્લેસમેન્ટ: Inter · રૂપરેખા 500 · મુખ્ય ફકરા અને નેવિગેશન લિંક્સ 17px/500 પર—એક ભૌમિતિક સેન્સ-સેરીફ ફોન્ટ જે સુવાચ્ય રહે છે, જે 700 લાઇન વેઇટને મહત્વપૂર્ણ મુદ્દાઓને પ્રકાશિત કરવાની મંજૂરી આપે છે. તેને 'DIN Next', 'Inter', અથવા 'Nunito Sans' થી બદલો.
- duolingo-sans — રિપ્લેસમેન્ટ: Inter · રૂપરેખા 700 · બધા વજન-700 મૂલ્યોનો ઉપયોગ થાય છે: નેવિગેશન લેબલ્સમાં મોટા અક્ષરો 15px (ls 0.0530em) છે, સબહેડિંગ્સ 19px અને 32px છે, અને લિંક ભાર 13px છે. મુખ્ય ટેક્સ્ટ જેવો જ ફોન્ટ - દ્રશ્ય તફાવત વજનમાં છે, ફોન્ટ ફેરફારમાં નહીં. અક્ષર અંતર: નેવિગેશન લેબલ્સમાં મોટા અક્ષરો માટે 0.0530em.
અંતરાલો અને સ્વરૂપ
| હેતુ | અર્થ |
|---|---|
| ઘનતા | ગાઢ |
| મૂળભૂત પગલું | 12px |
| બટન ત્રિજ્યા | 12px |
| કાર્ડ ત્રિજ્યા | 12px |
| પડછાયાઓ | પડછાયાને બદલે ના - સરહદો |
| વિભાગો વચ્ચે | 80-120px |
| પૃષ્ઠ પહોળાઈ | 1200px |
AI તમારી વેબસાઇટ Duolingo શૈલીમાં બનાવશે અને તેને ભરી દેશે.
- લિંક દ્વારા ઉત્પાદનો અને પોસ્ટ્સ ભરો - Instagram, TikTok, Facebook.
- તમારી જૂની સાઇટ પરથી સામગ્રી ટ્રાન્સફર કરો—ફક્ત સરનામું સ્પષ્ટ કરો.
- શ્રેષ્ઠ એન્જિન પર આધુનિક ડિઝાઇન: સર્વર રેન્ડરિંગ અને SEO ઑપ્ટિમાઇઝેશન સાથે React ( Next.js).
- શોધ પરિણામો અને ન્યુરલ નેટવર્ક ભલામણો માટે સંપૂર્ણપણે સ્વચાલિત SEO ઑપ્ટિમાઇઝેશન.
સમાન શૈલીઓ
- Family — ક્રીમ ચર્મપત્ર પર એક પરીકથામાંથી એક સ્પ્રેડ
- Say Briefly — ક્રીમ પેપર પર ક્રિએટિવ એજન્સી સ્કેચબુક
- Flying Papers — શનિવાર સવારના કાર્ટૂન પર કબૂલાત
- Portrait — ક્રીમ રંગના કાગળ પર પોલરોઇડ્સમાં કેદ થયેલી યાદોની દિવાલ. એક તેજસ્વી, ક્રીમ રંગની સ્ક્રેપબુક જ્યાં ઘેરા વાદળી શાહી એકમાત્ર ટેક્સ્ટ, એકમાત્ર રચના રેખાઓ અને એકમાત્ર ફ્રેમ રંગ તરીકે કામ કરે છે - એક જ હાથથી દોરેલા મેઘધનુષ્ય સાથે જે એકવાર દેખાય છે, "નોંધણી કરો" બટન પર અને ઇટાલિક શબ્દ "હંમેશા માટે" પર, અને ફરી ક્યારેય નહીં.
- Karl — તડકાવાળા દિવસે 3D પોપ-અપ બુક સ્ટાઇલ ડાયોરામા
- Navigate — બોર્ડ સાથે જોડાયેલ સ્ટીકરોનો મોટો સમૂહ: મોટા વિચિત્ર ફોન્ટ, બધા ટેબ્લેટના રૂપમાં અને પાંચ બહુ-રંગીન ચિહ્નો, લોગોની જેમ પુનરાવર્તિત.
- Monte — કાટવાળા રંગ સાથે દરિયા કિનારે સવાર
- MotherDuck — ક્રીમ પેપર પર રંગીન પેન્સિલોથી કોડેડ ટર્મિનલ
- Wise Design — એક વૈશ્વિક શેરી પર એક નિયોન બજારનો સ્ટોલ - ભીડવાળા બજારમાંથી ચીસ પાડતો એક તેજસ્વી લીલો રંગનો બોર્ડ, જ્યારે તેની પાછળ, એક પોલિશ્ડ પ્રોડક્ટ યુઝર ઇન્ટરફેસ ગુપ્ત રીતે દેખાય છે.
- Hatch — પેસ્ટલ કેન્ડી બાઉલ્સ સાથે મિશ્રિત હાથથી દોરેલી, સમિઝદાત-શૈલીની ડિઝાઇન. મિન્ટ એક્સેન્ટ્સ, કોન્ફેટી બિંદુઓ અને ગોળી આકારના કોલ ટુ એક્શનથી શણગારેલો ક્રીમી પેપર કેનવાસ, જ્યાં એક મોટો, બોલ્ડ સેરીફ ફોન્ટ મજાનો સંકેત આપે છે, અને ખૂણામાં વાદળી માસ્કોટ આંખ મીંચે છે.
- Superr — બપોરના નરમ પ્રકાશમાં ગરમ સ્કૂલ નોટબુક. ક્રીમ રંગનું પાનું, ટોપી વગરનું નારંગી માર્કર, અને છાલવાની રાહ જોતા લેમિનેટેડ નામના સ્ટીકરોનો ઢગલો.
- Mews — પરોઢિયે એક આતિથ્ય નિયંત્રણ કેન્દ્ર, ગુલાબી રંગથી તરબોળ. સફેદ દિવાલોવાળી, સૂર્યપ્રકાશિત કાર્યસ્થળ જ્યાં ઘાટા કાળા પ્રકાર, ગરમ ક્રીમ કાર્ડ્સ અને એક જ ગરમ ગુલાબી એક્શન બટન દરેક સ્ક્રીનને વ્યાખ્યાયિત કરે છે - કોર્પોરેટ સંયમ કરતાં રમતિયાળ આત્મવિશ્વાસ.