Shopify
Төн уртасы теплицасы - Сәүдә маркалары тирән зәңгәрсу фонында чәчәк ата, бер генә ялкынлы бөтнек белән яктыртылган
Shopify'ның дизайн системасы - сәүдә өчен төн уртасындагы остаханә: тирән зәңгәрсу яшел төстәге кара төстәге холст, киң, ышанычлы санс-сериф шрифты һәм интерактив моментларны активлаштыра торган бердәнбер якты ялтыравыклы акцент. Интерфейс караңгы бүлмәгә охшаган, анда продуктлар һәм брендлар яктылык чыганагы булып тора - фотосурәтләр һәм кибет витриналары кара төстәге өслекләргә каршы балкый, ә хром элементлары артка чигенә. Компонентлар геометрик, ләкин йомшак: нечкә чикләре булган 12 пиксель радиуслы карточкалар, таблетка формасындагы төймәләр һәм кычкыру урынына масштабны пышылдата торган 330 авырлыклы шрифт. Сылтамаларда, тегларда һәм фокус халәтләрендә бер хроматик тыныш билгесе (#36f4a4) сирәк кулланыла, сатучылар хикәяләренең визуаль фокус ноктасы булып калуын тәэмин итү өчен функциональ моментлар өчен төсне саклый.
Максималь киңлек ~1280 пиксель, үзәктә урнашкан, тулы киңлектәге блоклар фото контейнерыннан читтә сузыла. Бит ритмы чиратлаша: (1) капланган башлык һәм чакыру төймәләре булган тулы киңлектәге караңгы чакыру бите, (2) 2 баганада максималь киңлектәге текст һәм рәсем блоклары яки 3 баганада рәсем челтәрләре булган уңайлы караңгы бүлекләр, (3) тирәнрәк полотнода күтәрелгән карточкалар рәвешендә күрсәтелгән интерактив витрина панельләре (продукт картасы, җибәрү калькуляторы, дөнья картасы). Навигация - логотип + 3 навигация элементы + икенчел сылтамалар + төп чакыру төймәсе булган, барысы да уң якка туры китерелгән, өске панельдә хәрәкәтсез өске панель. Вертикаль ритм бүлекләр арасында шома күчеш белән 80 пиксель араларны куллана - караңгы бүлекләр арасында бүлгечләр юк, өслек тоны үзгәрә.
Визуаль дизайн, нигездә, сатучыга юнәлтелгән: тулы размерлы продукт фотолары һәм бренд чараларыннан фотолар визуаль авырлыкның зур өлешен тәшкил итә, еш кына ак текст белән капланган зур фоннар рәвешендә. Рәсемнәр тыгыз киселгән, югары контрастлы һәм бәйрәмчә характерда (Nasdaq кыңгырау чыңлавы, төркем белән сәламләү, кулдагы продуктларның якын планнары). Караңгы фон бу фотоларның прожекторлар белән яктыртылган кебек тәэсир калдыра. Иллюстрацияләр минималист - төп аңлатма эше кертелгән продукт рәсемнәре һәм кибет витриналарының скриншотлары белән башкарыла. Иконалар монохром, сызык киңлеге 1,5–2 пиксель, гадәттә ак яки актив халәтләр өчен #36f4a4.
Палитра
Бренд
- Shopify Mint
#36f4a4— Актив навигация индикаторлары, фокус боҗралары, тегларны яктырту һәм сылтамалардагы һавада тоту сызыгы белән күрсәтелгән яктырту - караңгы фонда интерактивлык хисе тудыра торган бердәнбер хроматик ялтыравык.
Нейтраль
- Midnight Forest
#02090a— Бит холсты, башлык фон рәсемнәре, бүлек фон рәсемнәре - Deep Lichen
#061a1c— Төп карта өслекләре, күтәрелгән панельләр, эчтәлек блоклары. - Shaded Fern
#072720— Навигация панеле, өстәмә карталар, панельнең күтәрелүе сизелми диярлек. - Spruce Border
#1e2c31— Карталар өчен нечкә чикләр, бүлү сызыклары, кертү кыры контурлары. - Abyss Indigo
#000a1e— Продукцияләрне/демонстрацияләрне урнаштыру өчен өстәмә өслек, функцияләр тасвирламасы булган панельләр. - Pure White
#ffffff— Төп текст, төймә тутыру, исем, логотиплар.
Типография
12 дән 70 пиксельгә кадәр · 8 адым
- Neue Haas Grotesk — алыштыру: Inter · контурлар 330, 400, 500, 550, 600 · Төп типографик система - 70–96 пиксель (330–400) шрифт авырлыгы белән, тавышлы түгел, ә нечкә язылган башлыклар; 16–18 пиксель (400–500) шрифт авырлыгы белән төп текст; һәм 14–16 пиксель (500–550) шрифт авырлыгы белән навигация һәм кулланучы интерфейсы. Зур экран зурлыкларында 330 пиксельле ультра җиңел шрифт авырлыгы - аерым бер үзенчәлек: ул ышанычны күләмле түгел, ә тыйнаклык аша бирә.
- Inter Variable — алыштыру: Inter · контурлар 400, 420, 450, 550 · Навигация интерфейсы элементларында, кечкенә язмаларда, табуляция контроль элементларында һәм аскы колонтитуллардагы микротекстта кулланыла торган икенчел шрифт төре. Аның бераз зуррак кечкенә хәрефләре һәм стандарт хәреф аралыгы аны компакт зурлыкларда укылышлырак итә. Ул шулай ук 420 калынлыктагы шрифт гадәти һәм уртача зурлыктагы шрифт арасындагы бушлыкны тутырган очраклар өчен дә яраклы.
Интерваллар һәм форма
| Максат | Мәгънәсе |
|---|---|
| Тыгызлык | уртача |
| Төп адым | 12px |
| Төймә радиусы | 9999px |
| Карта радиусы | 12px |
| Күләгәләр | күләгәләр урынына чикләр юк |
| Бүлекләр арасында | 80px |
| Бит киңлеге | 1280px |
Ясалма интеллект сезнең сайтны 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) — яктыртылган җиһазлар белән кара театр