MÉNĚ CSS: Nabídka stylu Apple. Historie designu značky v nové knize Apple Compiling LESS to CSS

Yablokovskiy design byl mezi mými klienty vždy velmi oblíbený. Pokud jde o design, často mi říkají: „Potřebuji jednoduchý design se světle šedým pozadím“ a jako příklad používám apple.com.

Když trochu projdete jejich stránky, najdete opravdu pěkná modrá tlačítka. Tam jsou vyrobeny ve formě, takže pokud chcete stejné na svém webu, budete muset použít Photoshop.

Takže jsem rozložil tlačítka v čistém CSS:

Apple-button ( kurzor : ukazatel ; odsazení : 3px 10px; ozdoba textu : žádná ; barva : #fff; velikost písma: 13px; text-shadow : 0 -1px 1px rgba(0 , 0 , 0 , .3) ; background-image :-webkit-linear-gradient(#52A8E8, #377AD0#377AD0, #52A8E8); background-image : -o-linear-gradient(rgb (82 , 168 , 232 ), rgb (55 , 122 , 208 ) ); barva pozadí : #52A8E8 ; -moz-border-radius : 23px; -webkit-border-radius : 23px; border-radius : 23px; ohraničení: 1px plný #205 59A; box-shadow : 0 1px 2px rgba(0 , 0 , 0 , .5) , inset 0 1px 0 rgba(255 , 255 , 255 , .3) ; ) .apple-button :hover , .apple-button :focus ( background-image :-webkit-linear-gradient(#54A1D8 , #196 7CA); background-image :-moz-linear-gradient(0 % 100 % 90deg, #196 7CA, #54A1D8); background-image : -o-linear-gradient(rgb (84 , 161 , 216 ), rgb (25 , 103 , 202 ) ); barva pozadí : #52A8E8 ; box-shadow: 0 1px 0 rgba(255 , 255 , 255 , .6) , inset 0 1px 0 rgba(255 , 255 , 255 , .3) ; ) .apple-button :active ( background-color : #2D7CD1 ; box-shadow : 0 1px 1px rgba(255 , 255 , 255 , .5) , inset 0 2px 5px rgba(0 , 0 , 100 ; .5) )

Demo:živý příklad (zkuste na něj najet a kliknout na něj)

Několik slov o kompatibilitě mezi různými prohlížeči. Protože jsme použili vlastnost CSS spád, pak mohou nastat nějaké problémy při zobrazování ve starších verzích prohlížeče Opera, no, krabicový stín je vlastnost CSS 3.

Míša

V posledních letech jsem dlouho nevěděl, co s webem dělat, protože prakticky nepřináší žádný zisk, ale nedávno jsem si uvědomil, že mým posláním je propagovat šíření WordPressu. WordPress je totiž nejlepší engine pro vývoj webů – jak pro ty, kteří jsou připraveni používat vestavěnou strukturu tohoto CMS, tak pro ty, kteří preferují bezhlavá řešení.

Sám jsem se s WordPressem poprvé seznámil v roce 2009. Pořadatel . Učitel ve společnosti Epic Skills and LoftSchool.

Pokud potřebujete pomoc s vaším webem nebo dokonce vývojem od nuly s WordPress / WooCommerce - . Můj tým a já pro vás uděláme vše na nejlepší úrovni.

Kult Applu nenechává nikoho lhostejným a stojí za to čelit pravdě: jedním z klíčových faktorů popularity Applu je jejich jedinečný design. Kniha „Designed by Apple in California“ jasně ilustruje, že designéři zacházejí se svými produkty jako s uměním.

Cupertino, Kalifornie – 16. listopadu Apple oznámil vydání nové vázané knihy Designed by Apple in California. Dvě dekády designových inovací jsou zachyceny na 450 fotografiích minulých i současných produktů společnosti, od iMacu (1998) po Apple Pencil (2015). Kniha vznikala 8 let a věnovala se památce Steva Jobse.

„Myšlenka vytvořit něco důležitého pro lidstvo motivovala Steva od samého začátku, tato myšlenka je naším ideálem a cílem, se kterým Apple kráčí do budoucnosti,“ říká Jony Ive.

„Designed by Apple in California“ je výsledkem úzké spolupráce mezi mnoha skupinami designérů a specialistů z velmi odlišných oborů. Všichni sdílejí naději, že kniha lidem umožní pochopit, jak a proč produkty Apple vznikají a existují. Všechny fotografie pořídil Andrew Zuckerman v tom, co popisuje jako „záměrně skromný styl“. Obrázky ilustrují detaily procesu návrhu i samotné hotové výrobky.

Toto je kniha o designu, ale není o designérech samotných, tvůrčím procesu nebo vývoji produktu. Objektivně odráží styl, image a ideologii designu Apple. Mnohé produkty vypadají tak jasně, jednoduše a logicky, jako by neměly žádnou rozumnou alternativu. U každého zařízení je promyšlený i design nástroje, kterým je vyroben.

„Jako designéři žijeme v budoucnosti, milujeme to, co jsme již udělali, a jsme posedlí tím, co jsme ještě neudělali“

„Jednou z nejdůležitějších věcí, které jsme se za 20 let spolupráce naučili, je potřeba naslouchat si navzájem, protože nejchytřejší nápady jsou často ty, které mluví velmi, velmi potichu.“

Designed by Apple in California je limitovaná edice knihy ve dvou velikostech: malá (25,9 x 32,4 cm) za 199 $ a velká (33 x 40,6 cm) za 299 $. Tiskne se na speciálně vyrobený papír speciální barvy s matně postříbřenými okraji. Prodává se výhradně na Apple.com v USA, Austrálii, Velké Británii, Německu, Hong Kongu, Koreji, Francii, Japonsku a Tchaj-wanu a ve vybraných Apple Storech.

Úvod

Pokud jde o design, existuje jedna společnost, kterou nelze přehlédnout. To je Apple – každý produkt, který mají, je výsledkem práce týmu designérů. Stránky této společnosti také vždy přitahovaly pozornost.

V tomto tutoriálu vytvoříme galerii - slideshow "a la" Apple. Přibližně totéž se používá na webových stránkách společnosti Apple k reprezentaci produktů společnosti. K vytvoření nepotřebujeme PHP ani databázi.

KROK 1 – XHTML

Podívejme se blíže na označení XHTML:

• 
• 
• 

Myšlenka je velmi jednoduchá - existují dva hlavní kontejnery DIV - jeden s id="menu" obsahuje miniatury, druhý "slides" obsahuje samotné snímky.

Chcete-li přidat nový snímek, stačí přidat nové prvky do obou kontejnerů. Snímky - obrázky ve formátu JPG, náhledy - průhledný PNG. Ale můžete použít i jiné formáty.

Můžete také vložit libovolný HTML kód. Z určitého snímku můžete například vytvořit odkaz ve formě obrázku.

Je velmi důležité, aby snímky měly výšku a šířku – používá je jQuery k definování oblasti posouvání.

Všimněte si také prvků miniatury LI. První z nich má třídu fbar pro zobrazení svislého dělícího pruhu. Ostatním prvkům je přiřazena třída menuItem - a používají se jako ovládací tlačítka prezentace.

Přejděme k dalšímu kroku.

Krok 2 – CSS

Pojďme se podívat na náš stylový list.

Body,h1,h2,h3,p,quote,small,form,input,ul,li,ol,label( /* Reset stránky */ margin:0px; padding:0px; ) body( /* Nastavení výchozí barvy textu, pozadí a zásobník písem */ color:#444444; font-size:13px; background: #f2f2f2; font-family:Arial, Helvetica, sans-serif; ) /* Styly galerie */ #gallery( /* CSS3 Box Shadow */ -moz-box-shadow:0 0 3px #AAAAAA; -webkit-box-shadow:0 0 3px #AAAAAA; box-shadow:0 0 3px #AAAAAA; /* CSS3 Rounded Corners */ -moz-border- radius-bottomleft:4px; -webkit-border-bottom-left-radius:4px; border-bottom-left-radius:4px; -moz-border-radius-bottomright:4px; -webkit-border-bottom-right-radius :4px; border-bottom-right-radius:4px; border:1px full white; background:url(img/panel.jpg) repeat-x dole uprostřed #ffffff; /* Šířka galerie */ width:920px; overflow:hidden; ) #slides( /* Toto je oblast snímku */ výška:400px; /* jQuery později změní šířku na součet šířek všech snímků. */ width:920px; overflow:hidden; ) .slide( float:left; ) #menu( /* Toto je kontejner pro miniatury */ height:45px; ) ul( margin:0px; padding:0px; ) li( /* Každá miniatura je prvek li */ width:60px; display:inline -block; list-style:none; height:45px; overflow:hidden; ) li.inact:hover( /* Neaktivní stav, zvýrazněný najetím myší na */ background:url(img/pic_bg.png) repeat; ) li .act,li.act:hover( /* Aktivní stav palce */ background:url(img/active_bg.png) no-repeat; ) li.act a(kurzor:výchozí; ) .fbar( /* The svislý pruh úplně vlevo, vedle první miniatury */ šířka:2px; background:url(img/divider.png) bez opakování vpravo; ) li a( display:block; background:url(img/divider.png) no-repeat right; height:35px; padding-top:10px; ) a img( border:none; )

V této šabloně stylů jsme použili několik vlastností CSS3:

* box-shadow, V rozích galerie je malý stín. Pomocí této vlastnosti - musíte zadat souřadnice X a Y (zde 0 0), rozklad (v našem příkladu 3px) a barvu stínu;
* border-radius, kruhové hranice ve spodní části galerie.

Bohužel tyto vlastnosti momentálně fungují pouze v Safari, Chrome a Firefox.

Nyní je čas na kouzlo jQuery.

KROK 3 – jQuery

Budeme potřebovat následující kód:

$(document).ready(function()(
/* Tento kód se spustí po úplném načtení DOM */

vartotWidth=0;
var position = new Array();

$("#slides .slide").each(function(i)(
/* Projděte všechny snímky a uložte jejich akumulované šířky do totWidth */
position[i]=totWidth;
totWidth += $(this).width();

/* Pole pozic obsahuje komutativní posun každého snímku od levé části kontejneru */

if(!$(this).width())
{
alert("Prosím, vyplňte šířku a výšku všech svých obrázků!");
vrátit false;
}
});

$("#snímky").width(totWidth);

/* Změňte šířku cotnainer div's na přesnou šířku všech snímků dohromady */

$("#menu ul li a").click(funkce(e)(

/* Klikněte na miniaturu */
$("li.menuItem").removeClass("act").addClass("inact");
$(this).parent().addClass("akt");

var pos = $(this).parent().prevAll(".menuItem").length;

$("#slides").stop().animate((marginLeft:-positions+"px"),450);
/* Spusťte posuvnou animaci */

e.preventDefault();
/* Zabránit výchozí akci odkazu */
});

$("#menu ul li.menuItem:first").addClass("act").siblings().addClass("inact");
/* Při načtení stránky označte první miniaturu jako aktivní */
});

Hlavní myšlenkou je, že při cyklování slidů se šířky slidů sečtou a tato šířka se přiřadí kontejneru. Vzhledem k tomu, že diapozitivy jsou zarovnány doleva, je dostatek místa pro jejich stohování za sebou.

Při kliknutí na miniaturu skript vypočítá, který snímek má zobrazit, a posouvá je přiřazením záporné hodnoty odsazení pomocí metody animace.

Stačí 40 řádků kódu a naše galerie prezentací je připravena!

Závěr

K vytvoření super krásné galerie ve stylu Applu nám stačily jen tři kroky. Je schopna ozdobit jakékoli místo.

Webový design ve stylu Apple se v průběhu let vyvíjel od roku 1996. Jak název napovídá, nápad na design patří společnosti Apple Corporation: v tomto stylu byly navrženy stránky a rozhraní produktu. Design stránek ve stylu Apple si získal širokou oblibu díky svému minimalismu a uživatelskému zaměření na konkrétní produkt.

Charakteristické rysy designu stránek ve stylu Apple

1. Přísná hierarchie ve skladbě prvků. Hlavní prioritou je image produktu. Vysoce kvalitní fotografie, jasná, velká, umístěná uprostřed stránky a obklopená bílým místem. V nejlepších tradicích minimalismu.
2. Paleta barev se zpravidla skládá ze tří odstínů: černá, bílá, šedá. Současně se na rozdíl od plochého stylu široce používají přechody, stíny a způsoby přenosu objemu.
3. charakteristická písma. Nadpisy navrhl Adobe Myriad, prostý text Lucida Grande.
4. Obsah. Na hlavní stránce webu - minimum informací. Podrobné popisy jsou na samostatných stránkách. Nedochází k přesycení. Uživatel si sám vybírá informace, které ho zajímají.
5. Technické vlastnosti. Apple design je zaměřen na formát HTML 5, využití moderních standardů v designu. Na oficiálních stránkách Applu se Flash zásadně nepoužívá.

Pro jaké stránky jsou vhodné?

• • Jumsoft http://www.jumsoft.com/money/
  • Versionsapp https://versionsapp.com/

Jste šťastným majitelem malé, ale skvělé společnosti. K triumfu je ještě dlouhá cesta, ale nepochybujete, že se vaše podnikání časem stane důvodem k hrdosti a příkladem k následování. Mimochodem, na tento okamžik nemusíte čekat: můžete se hned teď postavit jako prvotřídní profesionál, který bude přesvědčivý, jako velká a seriózní společnost.

Nevíte, jak by takový web měl být? Nebojte se, nyní vám vše vysvětlíme a řekneme vám, jak postupovat. Pokud využijete naše tipy, pak už nebudete muset při pohledu na stránky Applu, Nike nebo L'Orealu smutně vzdychat, protože ty vaše budou stejně dobré. Zde je několik pokynů pro vytvoření solidního, profesionálního webu.

Sledujte trendy ve webdesignu

Velké značky neustále aktualizují a zdokonalují své webové stránky. Týmy zkušených designérů a vývojářů pracují na vytvoření neobvyklého a moderního zdroje, díky kterému jsou lidé zvědaví a chtějí si vše dobře prohlédnout.

Ano, je to velmi drahé, ale existují také bezplatné možnosti, jako je Wix. Náš editor je speciálně navržen pro vás, abyste vytvořili pěkné stránky pro jakýkoli druh činnosti a přidali k nim nějaký efektní efekt, jako je paralaxní rolování nebo video jako pozadí. Můžete vytvořit skutečnou „dlouhou“ stránku a doplnit ji prvky „plochého“ designu*.

Myslíme si, že v této fázi vám neuškodí projít si stránky pro designéry a dobře se inspirovat. Naše doporučení: časopis webová inspirace, blog Lopart a časopis o designu služební místnost; pokud pro vás angličtina není překážkou, čtěte Design Vandelay , Smashing Magazine A Web Design Depot .

*Nechápete, co všechna tato slova znamenají? Musíte si tedy přečíst ten náš.

Získejte branding

Velké společnosti mají rozpoznatelnou firemní identitu a velmi jasnou pozici. Používají přísně definovaná písma, barvy a slogany. Červené logo Coca-Coly neomylně poznáte, ať už na webu, lahvích nebo billboardech visících podél ulice.

Co když tedy vaše společnost není tak velká jako Coca-Cola? To neznamená, že nemusíte dělat branding. Důležitá je promyšlená firemní identita. Lidé díky němu budou moci váš produkt rychle identifikovat a už je co by kamenem dohodil před nákupem. Nakreslete tedy pěkné logo, vymyslete slogan, vybírejte značková písma, barvy a podle toho upravte styl svých stránek na sociálních sítích. Další tipy - v našem článku na.

Méně je lepší

Chápeme, že chcete mluvit podrobně o svém produktu a podnikání, ale nedoporučujeme přetěžovat stránky a unavovat návštěvníky. Stránka je velmi špatně načtená, špatně čitelná a odpuzuje návštěvníky. Nejlepší je nepřítel dobra, takže se musíte naučit, jak zastavit včas.

Pojďme se zamyslet nad tím, co lze z vašeho webu odstranit. Pokud jsou texty plné odborných a odborných termínů, zbavte se jich. Myslíte si, že návštěvníci skutečně potřebují znát podrobnou biografii všech vašich zaměstnanců? Nepravděpodobné. Něco samozřejmě zkrátit nejde, například podrobný popis zboží nebo služeb, ale to je normální, tyto informace jsou užitečné. Dokonce stojí za to ji přesunout tam, kde rozhodně nezůstane bez povšimnutí. A vše, co zpomaluje nákupní proces, lze bez sebemenší lítosti odstranit.

Nyní se podíváme na design. Snižte počet barev na tři nebo čtyři, odstraňte všechny nepotřebné obrázky a věnujte pozornost typografii. Nezapomeňte ponechat dostatek volného místa, známého také jako „vzduch“. Když je na webu hodně „vzduchu“, lidé si všimnou všech kritických prvků, například nezbytných k povzbuzení návštěvníků k nákupu, předplatnému, registraci atd.

Zobrazit produkt na hlavní stránce

Chcete zvýšit počet objednávek? Udělejte to tak, aby lidé okamžitě viděli váš produkt. Podívejte se na stránky známých značek. Vidíte, dávají produkty nejen na nákupní stránku, ale i na hlavní stránku, aby si jich lidé určitě všimli. Pokud máte a přemýšlíte, jak zvýšit prodeje, klidně tuto techniku ​​zkopírujte.

Fotografie produktů by samozřejmě měly být velké a velmi kvalitní. Nezapomeňte, že se jedná o internetový obchod, kde si nemůžete nic osahat ani vyzkoušet, takže se lidé při nákupu rozhodují podle obrázku. Pokud nemáte peníze na profesionálního fotografa, přečtěte si náš článek na. Trochu praxe - a všechno se ukáže! A nezapomeňte na možnosti našeho editoru, na stránky můžete přidat aplikaci, aby si klient mohl zvětšit obrázek toho, co ho zajímá, a dobře si ho prohlédnout.

Udělejte dobrou navigaci

Myslíme si, že jste se někdy dostali na špatně navržený web a zmateně jste spěchali tam a zpět při hledání požadované stránky. Z takových míst zpravidla odcházíme s prázdnou as touhou se už nikdy nevrátit. A veškerá chyba - nedomyšlená navigace. Neopakujte tuto chybu a ujistěte se, že návštěvník od prvních sekund všemu rozumí.

Pokud se neustále ptáte na stejnou otázku, vytvořte si stránku FAQ. Můžete použít aplikaci Wix FAQ. Jeho plusem je, že lidé dostanou informace, které potřebují, a zároveň vás neodvádí pozornost od jiných věcí.

Chcete ukázat, že vaše společnost je vstřícná a přátelská? Přidat aplikaci " Živý chat Tidio odpovídat na otázky v reálném čase. Můžete si ho nainstalovat do smartphonu a nesedět celý den u počítače, ale podnikat a být přitom v kontaktu.

Ukažte, že vám lidé důvěřují

Je dobré, že se snažíte být v kontaktu a odpovídat na otázky včas, ale to nestačí k vybudování důvěryhodného vztahu se zákazníky. Chcete-li to provést, musíte na webu znovu pracovat. Udělejte si samostatnou sekci s historií společnosti, řekněte nám, kdo jste, v co věříte a co je podle vás důležité. Příliš mnoho informací je k ničemu: text by měl být krátký, upřímný a srozumitelný. Na internetu je docela těžké ukázat, jaký jste člověk, ale myslíme si, že taková stránka odvede svou práci na výbornou.

Doporučujeme také přidat na web recenze zákazníků – na hlavní stránce nebo v samostatné sekci. Po jejich přečtení lidé pochopí, že váš produkt je důvěryhodný. Mimochodem, Yandex a Google také věnují pozornost recenzím, což znamená, že ovlivňují.

Vytvořte mobilní verzi webu

Více než polovina uživatelů internetu používá internet z tabletů a chytrých telefonů. To znamená, že mobilní verze stránek není rozmar, ale nutnost. Naštěstí si nemusíte lámat hlavu s tím, jak to udělat. V editoru Wix mobilní verze se generuje automaticky, stačí jej otestovat a doladit pár věcí. Nezapomeňte, že mobilní verze není přesnou kopií desktopové, proto odstraňte všechny nepotřebné prvky a zviditelněte tlačítka a kontakty.

Nezapomeňte na sociální sítě

Věnujte pozornost tomu, jak starší a zkušenější kolegové udržují své stránky na sociálních sítích. Ano, pro úplnější pokrytí publika potřebujete web i stránky na Facebooku, Vkontakte, Instagramu atd. Sociální sítě jsou ideální pro zveřejňování novinek, psaní o produktu a odpovídání na otázky. Je důležité nejen o práci mluvit, ale vytvořit si image a budovat normální vztahy založené na důvěře. Pokud si opravdu nevíte rady, přečtěte si článek o a dodržujte všechna naše doporučení.

Po spuštění stránky na konkrétním webu o tom řekněte návštěvníkům svého webu. Přidejte tlačítka sociálních médií do záhlaví, zápatí nebo sekce kontaktů. Doporučujeme přidat i aplikaci – je zdarma a velké společnosti ji ochotně využívají. S ním můžete spravovat až deset účtů ze svého webu: zveřejňovat novinky, reagovat včas na komentáře a překvapovat zákazníky rychlostí, bezvadností a profesionalitou.

Jste připraveni připojit se k velkým značkám? sami na Wix – je to snadné a zdarma!