Shopify
મધ્યરાત્રિ ગ્રીનહાઉસ - ઊંડા પીરોજ રંગની પૃષ્ઠભૂમિ સામે ટ્રેડમાર્ક ખીલે છે, જે ફુદીનાના એક જ તણખાથી પ્રકાશિત થાય છે.
Shopify ની ડિઝાઇન સિસ્ટમ વાણિજ્ય માટે મધ્યરાત્રિ વર્કશોપ છે: ઘેરા પીળા લીલા રંગથી રંગાયેલો લગભગ કાળો કેનવાસ, પહોળો, આત્મવિશ્વાસપૂર્ણ સેન્સ-સેરિફ ટાઇપફેસ, અને એક જ વાઇબ્રન્ટ ટંકશાળ ઉચ્ચાર જે ઇન્ટરેક્ટિવ ક્ષણોને સક્રિય કરે છે. ઇન્ટરફેસ ડાર્કરૂમ જેવું લાગે છે, જ્યાં ઉત્પાદનો અને બ્રાન્ડ્સ પ્રકાશનો સ્ત્રોત છે - ફોટા અને સ્ટોરફ્રન્ટ્સ લગભગ કાળી સપાટીઓ સામે ચમકે છે, જ્યારે ક્રોમ તત્વો ઓછા થાય છે. ઘટકો ભૌમિતિક છતાં નરમ છે: પાતળા કિનારીઓવાળા 12px-ત્રિજ્યા કાર્ડ, ગોળી આકારના બટનો અને 330-વજન ટાઇપફેસ જે બૂમ પાડવાને બદલે સ્કેલને ફફડાવે છે. લિંક્સ, ટૅગ્સ અને ફોકસ સ્ટેટ્સ પર સિંગલ ક્રોમેટિક વિરામચિહ્ન ચિહ્ન (#36f4a4) નો ઉપયોગ ઓછો થાય છે, જે વેપારી વાર્તાઓ દ્રશ્ય કેન્દ્રબિંદુ રહે તેની ખાતરી કરવા માટે કાર્યાત્મક ક્ષણો માટે રંગ અનામત રાખે છે.
મહત્તમ પહોળાઈ ~૧૨૮૦ પિક્સેલ છે, કેન્દ્રિત, પૂર્ણ-પહોળાઈના સ્પ્લેશ બ્લોક્સ ફોટો કન્ટેનરની બહાર વિસ્તરે છે. પેજ રિધમ વૈકલ્પિક રીતે ચાલે છે: (૧) ઓવરલે હેડલાઇન અને કોલ-ટુ-એક્શન બટનો સાથે પૂર્ણ-પહોળાઈનું ડાર્ક સ્પ્લેશ પેજ, (૨) મહત્તમ-પહોળાઈવાળા ટેક્સ્ટ અને ૨ કૉલમમાં ઇમેજ બ્લોક્સ અથવા ૩ કૉલમમાં ઇમેજ ગ્રીડ સાથે આરામદાયક ડાર્ક સેક્શન, (૩) ઇન્ટરેક્ટિવ શોકેસ પેનલ્સ (પ્રોડક્ટ કાર્ડ, શિપિંગ કેલ્ક્યુલેટર, વર્લ્ડ મેપ) ઊંડા કેનવાસ પર ઉભા કાર્ડ તરીકે પ્રદર્શિત થાય છે. નેવિગેશન એ લોગો + ૩ નેવિગેશન તત્વો + સેકન્ડરી લિંક્સ + પ્રાથમિક કોલ-ટુ-એક્શન બટન સાથે એક નિશ્ચિત ટોચનો બાર છે, જે બધા જમણી બાજુએ ગોઠવાયેલા છે. વર્ટિકલ રિધમ સરળ સંક્રમણ સાથે વિભાગો વચ્ચે ૮૦ પિક્સેલ ગેપનો ઉપયોગ કરે છે—ડાર્ક સેક્શન વચ્ચે કોઈ ડિવાઇડર નથી, ફક્ત સપાટીના સ્વરમાં ફેરફાર છે.
વિઝ્યુઅલ ડિઝાઇન મુખ્યત્વે રિટેલર પર કેન્દ્રિત છે: પૂર્ણ-કદના ઉત્પાદન ફોટા અને બ્રાન્ડ ઇવેન્ટ્સના ફોટા મોટાભાગનું દ્રશ્ય વજન ધરાવે છે, ઘણીવાર સફેદ ટેક્સ્ટ સાથે મોટા પૃષ્ઠભૂમિના સ્વરૂપમાં. છબીઓ ચુસ્ત રીતે કાપેલી, ઉચ્ચ-કોન્ટ્રાસ્ટ અને ઉત્સવની પ્રકૃતિની છે (નાસ્ડેક બેલનો અવાજ, જૂથ શુભેચ્છાઓ, હાથમાં ઉત્પાદનોના ક્લોઝ-અપ્સ). ઘેરા પૃષ્ઠભૂમિ એવી છાપ બનાવે છે કે આ ફોટા સ્પોટલાઇટ્સ દ્વારા પ્રકાશિત છે. ચિત્રો ઓછામાં ઓછા છે - મુખ્ય સમજૂતીત્મક કાર્ય એમ્બેડેડ ઉત્પાદન છબીઓ અને સ્ટોરફ્રન્ટ્સના સ્ક્રીનશોટ દ્વારા કરવામાં આવે છે. ચિહ્નો મોનોક્રોમ છે, જેની રેખા પહોળાઈ 1.5–2px છે, સામાન્ય રીતે સફેદ અથવા સક્રિય સ્થિતિઓ માટે #36f4a4 છે.
પેલેટ
બ્રાન્ડ
- Shopify Mint
#36f4a4— સક્રિય નેવિગેશન સૂચકાંકો, ફોકસ રિંગ્સ, ટેગ હાઇલાઇટ્સ અને લિંક્સ પર હોવર હાઇલાઇટ્સ એકમાત્ર રંગીન ચમક છે જે ઘેરા પૃષ્ઠભૂમિ સામે સક્ષમ ઇન્ટરેક્ટિવિટીની ભાવના બનાવે છે.
તટસ્થ
- Midnight Forest
#02090a— પેજ કેનવાસ, હેડર બેકગ્રાઉન્ડ છબીઓ, સેક્શન બેકગ્રાઉન્ડ છબીઓ - Deep Lichen
#061a1c— મુખ્ય કાર્ડ સપાટીઓ, ઉભા કરેલા પેનલ્સ, સામગ્રી બ્લોક્સ. - Shaded Fern
#072720— નેવિગેશન પેનલ, વધારાના કાર્ડ્સ, પેનલનો ભાગ્યે જ નોંધપાત્ર વધારો. - Spruce Border
#1e2c31— કાર્ડ્સ, વિભાજન રેખાઓ, ઇનપુટ ફીલ્ડ રૂપરેખાઓ માટે પાતળી કિનારીઓ. - Abyss Indigo
#000a1e— ઉત્પાદનો/પ્રદર્શનો, કાર્યોના વર્ણન સાથે પેનલ્સ એમ્બેડ કરવા માટે વધારાની સપાટી. - Pure White
#ffffff— મુખ્ય ટેક્સ્ટ, બટન ભરણ, શીર્ષક, લોગો.
ટાઇપોગ્રાફી
૧૨ થી ૭૦ પિક્સેલ સુધી · ૮ પગલાં
- Neue Haas Grotesk — રિપ્લેસમેન્ટ: Inter · રૂપરેખા 330, 400, 500, 550, 600 · મુખ્ય ટાઇપોગ્રાફિક સિસ્ટમમાં હેડલાઇન્સનો સમાવેશ થાય છે જેમાં 70–96px (330–400) ફોન્ટ વજન હોય છે જે મોટેથી નહીં પણ સૂક્ષ્મ હોય છે; બોડી કોપી 16–18px (400–500) ફોન્ટ વજન સાથે; અને નેવિગેશન અને યુઝર ઇન્ટરફેસ 14–16px (500–550) ફોન્ટ વજન સાથે. મોટા સ્ક્રીન કદ પર 330 નું અલ્ટ્રા-લાઇટ ફોન્ટ વજન એક વિશિષ્ટ લક્ષણ છે: તે બલ્ક કરતાં સંયમ દ્વારા વિશ્વાસ વ્યક્ત કરે છે.
- Inter Variable — રિપ્લેસમેન્ટ: Inter · રૂપરેખા 400, 420, 450, 550 · નેવિગેશનલ ઇન્ટરફેસ તત્વો, નાની નોંધો, ટેબ નિયંત્રણો અને ફૂટરમાં માઇક્રોટેક્સ્ટમાં વપરાતો ગૌણ ફોન્ટ પ્રકાર. તેના થોડા મોટા લોઅરકેસ અક્ષરો અને વધુ પ્રમાણભૂત અક્ષર અંતર તેને કોમ્પેક્ટ કદમાં વધુ વાંચી શકાય તેવું બનાવે છે. તે એવી પરિસ્થિતિઓ માટે પણ યોગ્ય છે જ્યાં 420-વજનનો ફોન્ટ નિયમિત અને મધ્યમ કદના ફોન્ટ વચ્ચેનો તફાવત ભરે છે.
અંતરાલો અને સ્વરૂપ
| હેતુ | અર્થ |
|---|---|
| ઘનતા | સરેરાશ |
| મૂળભૂત પગલું | 12px |
| બટન ત્રિજ્યા | 9999px |
| કાર્ડ ત્રિજ્યા | 12px |
| પડછાયાઓ | પડછાયાને બદલે ના - સરહદો |
| વિભાગો વચ્ચે | 80px |
| પૃષ્ઠ પહોળાઈ | 1280px |
AI તમારી વેબસાઇટ Shopify શૈલીમાં બનાવશે અને તેને ભરી દેશે.
- લિંક દ્વારા ઉત્પાદનો અને પોસ્ટ્સ ભરો - Instagram, TikTok, Facebook.
- તમારી જૂની સાઇટ પરથી સામગ્રી ટ્રાન્સફર કરો—ફક્ત સરનામું સ્પષ્ટ કરો.
- શ્રેષ્ઠ એન્જિન પર આધુનિક ડિઝાઇન: સર્વર રેન્ડરિંગ અને SEO ઑપ્ટિમાઇઝેશન સાથે React ( Next.js).
- શોધ પરિણામો અને ન્યુરલ નેટવર્ક ભલામણો માટે સંપૂર્ણપણે સ્વચાલિત SEO ઑપ્ટિમાઇઝેશન.
સમાન શૈલીઓ
- Retool — ગરમ ઓબ્સિડીયન વર્કશોપ - ચોકસાઇવાળા સાધનો માટેની સપાટી, ધૂમ્રપાન કરતા અંગારાથી પ્રકાશિત, જ્યાં બધું બનાવવામાં આવે છે.
- Elektron — મધ્યરાત્રિએ ઉપકરણ નિયંત્રણ પેનલ લગભગ કાળા રંગનું કેનવાસ છે, જ્યાં ઉત્પાદનના ફોટા ચમકતા હોય છે જ્યારે ઇન્ટરફેસ વર્ચ્યુઅલ રીતે અદ્રશ્ય રહે છે.
- REKKI — ફોટો લેબમાં ફ્લાઇટ કંટ્રોલ પેનલ
- OFFFICE : — મોનોલિથિક ફોન્ટમાં ઘેરાયેલી નોઇર ગેલેરી
- Clyde — આ શોરૂમ, તેની સિંગલ સ્પોટલાઇટ સાથે, લગભગ ઘેરી ગેલેરી છે જ્યાં રૂમમાં એકમાત્ર રંગ ગરમ ગ્રેડિયન્ટ બોલ છે.
- Channel Studio — એક કોરલ લેમ્પશેડ સાથે સ્ટુડિયો ફોટો લેબ
- Electronic Materials Office — કોલસાથી શણગારેલી ગેલેરીમાં એક ઝળહળતો અંગારો
- ORYZO AI — અંધારાવાળા ઓરડા વિશેનો ફોટો નિબંધ. ગરમ અંધારામાં ફરતી એક એકાંત વસ્તુ, ક્રીમ ફોન્ટ એકમાત્ર શણગાર છે.
- Factory — મધ્યરાત્રિએ "યુદ્ધ ખંડ" ટર્મિનલ. "ફેક્ટરી" એક કાળા રંગનું કંટ્રોલ પેનલ છે જ્યાં એક જ સફેદ કાર્ડ ફ્લેશલાઇટથી પ્રકાશિત ડિસ્પેચની જેમ ઉતરે છે - રૂમમાં એકમાત્ર વસ્તુ કામ છે.
- Hungry Tiger — તંદૂરની દિવાલ પર હળદર જેવી તેજસ્વી ગ્રેફિટી. સોના અને કાટવાળા ભૂરા રંગનો એકીકૃત પેલેટ, ફોન્ટ એટલો મોટો છે કે તે વેબસાઇટ કરતાં મસાલા બજારના ચિહ્ન જેવો દેખાય છે.
- Bibliothèque — સ્પોટલાઇટ હેઠળ કાળા ઘન આકારની ગેલેરી - એક વિશાળ, અંધારાવાળા હોલમાં એકલી પ્રકાશિત પ્લેટ
- Apple (España) — પ્રકાશિત ફિટિંગ સાથેનું કાળું થિયેટર