Shopify
Поноћни стакленик - Заштитни знакови цветају на дубоко тиркизној позадини, осветљени једном искрицом менте
Shopify-јев систем дизајна је поноћна радионица за трговину: скоро црно платно обојено дубоком тиркизно зеленом бојом, широк, самоуверен фонт без серифа и један живахни акценат боје менте који активира интерактивне тренутке. Интерфејс подсећа на мрачну комору, где су производи и брендови извор светлости - фотографије и излози светлуцају на скоро црним површинама, док се хромирани елементи повлаче. Компоненте су геометријске, али меке: картице радијуса од 12 пиксела са танким оквирима, дугмад у облику пилуле и фонт тежине 330 који шапуће скалу, а не виче. Један хроматски знак интерпункције (#36f4a4) се користи штедљиво на линковима, ознакама и стањима фокуса, резервишући боју за функционалне тренутке како би се осигурало да приче трговаца остану визуелна фокусна тачка.
Максимална ширина је ~1280 пиксела, центрирана, са блоковима за увод у пуној ширини који се протежу изван контејнера за фотографију. Ритам странице се смењује: (1) тамна уводна страница пуне ширине са преклопљеним насловом и дугмадима за позив на акцију, (2) удобни тамни одељци са блоковима текста и слика максималне ширине у 2 колоне или мрежама слика у 3 колоне, (3) интерактивни панели за приказивање (картица производа, калкулатор испоруке, мапа света) приказани као издигнуте картице на дубљем платну. Навигација је фиксна горња трака са логотипом + 3 елемента за навигацију + секундарне везе + примарно дугме за позив на акцију, све поравнато удесно. Вертикални ритам користи размаке од 80 пиксела између одељака са глатким прелазом - без раздела између тамних одељака, само промена у површинском тону.
Визуелни дизајн је првенствено фокусиран на продавца: фотографије производа у пуној величини и фотографије са догађаја бренда носе највећи део визуелне тежине, често у облику великих позадина са преклопљеним белим текстом. Слике су чврсто исечене, високог контраста и празничне природе (звоњава Nasdaq звона, групни поздрави, крупни планови производа у рукама). Тамна позадина ствара утисак да су ове фотографије осветљене рефлекторима. Илустрације су минималистичке – главни објашњавајући посао обављају уграђене слике производа и снимци екрана излога. Иконе су монохроматске, са ширином линије од 1,5–2 пиксела, обично беле или #36f4a4 за активна стања.
Палета
Brend
- 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.
- Пребаците садржај са вашег старог сајта — само наведите адресу.
- Модерни дизајн на најбољем енџину: React ( Next.js) са рендеровањем на серверу и SEO оптимизацијом одмах по уградњи.
- Потпуно аутоматизована SEO оптимизација за резултате претраге и препоруке неуронских мрежа.
Слични стилови
- Retool — Топла радионица од опсидијана - површина за прецизне алате, осветљена тињајућим жаром, где се све ствара
- Elektron — Контролна табла опреме у поноћ је готово црно платно, где фотографије производа сијају док интерфејс остаје практично невидљив.
- REKKI — Контролна табла лета у фотолабораторији
- OFFFICE : — галерија ноара обавијена монолитним фонтом
- Clyde — Изложбени салон, са својим једним рефлектором, је готово мрачна галерија где је једина боја у просторији топла градијентна лопта.
- Channel Studio — Студијска фото-лабораторија са једним коралним абажуром
- Electronic Materials Office — Ужарени жар у галерији украшеној угљем
- ORYZO AI — Фото есеј о мрачној комори. Усамљени предмет који лебди у топлом мраку, крем фонт је једина декорација.
- Factory — Терминал „ратне собе“ у поноћ. „Фабрика“ је потпуно црна контролна табла где једна бела картица слеће попут депеше осветљене батеријском лампом — једини предмет у соби је сам рад.
- Hungry Tiger — Графити боје куркуме на зиду тандура. Уједињена палета златне и рђасто смеђе, са фонтом толико великим да више личи на знак пијаце зачина него на веб страницу.
- Bibliothèque — Црна галерија у облику коцке под рефлекторима – усамљена осветљена плоча у огромној, мрачној дворани
- Apple (España) — црно позориште са осветљеним елементима