Bel cursore in stile Apple. Cos'è lo stile Apple? Definisci gradiente, separatore e stile al passaggio del mouse utilizzando le operazioni

Molti clienti, descrivendo i propri desideri riguardo al futuro sito, si esprimono in modo succinto: “Vogliamo qualcosa nello stile di Apple!”. Secondo loro, una tale risposta dovrebbe fornire all'esecutore informazioni complete, punteggiare immediatamente la "i" ed eliminare qualsiasi ambiguità. Ma in realtà, ovviamente, tutto è più complicato. Dopotutto, qualsiasi cosa può impressionare una persona nello stile di Apple: la presentazione di un nuovo tablet, una semplice scatola bianca per iPhone o il sito Web di Apple stesso. E la cosa più offensiva è, molto probabilmente, dire "fallo in stile Apple", il cliente stesso semplicemente non sa cosa significhi veramente. Che dire di un attore infelice che, forse, semplicemente non sa cosa ci si aspetta da lui alla fine?

Proviamo a capirlo!

Principio della mela

L'approccio di Apple si basa su un principio molto semplice: non è possibile realizzare un prodotto veramente di alta qualità senza occuparsi di tutte le aree di lavoro su di esso. Tutto deve essere fatto al massimo livello. Quando viene rilasciato un nuovo telefono, non si può sperare nella qualità fenomenale del suo schermo e nel prezzo basso se le crepe tremolano nel suo corpo lurido e lo slogan pubblicitario su un enorme cartellone è scritto con errori.

"Beh, abbiamo risparmiato sul copywriting: non vendiamo testi, ma un telefono", penserà la maggioranza.

Ma questo è tutto! Dal punto di vista di Apple, l'esperienza di possedere i loro prodotti appare anche prima che tu abbia pagato i tuoi sudati soldi per qualsiasi iPod, e quindi non ci sono elementi insignificanti in questa catena. Questa non è solo tecnologia, non solo packaging, ma anche pubblicità, e una vetrina, e un sito web, e testi sul sito. Non ci sono elementi minori qui. E "la confezione stessa può raccontare un'intera storia". Di conseguenza, la prima cosa da capire sullo "stile Apple" è l'attenzione scrupolosa a tutte le aree di lavoro.

La seconda caratteristica importante dei prodotti Apple è l'elegante semplicità. Svolge un ruolo molto importante in Apple.

“Perché pensiamo che la semplicità sia buona? Perché quando abbiamo a che fare con oggetti, per noi è importante sentire che li stiamo gestendo».

La terza caratteristica critica sono i dettagli. Tutte quelle piccole cose che non noti, ma che creano quel comfort quotidiano derivante dall'utilizzo dei prodotti Apple: animazioni di transizione, suoni, il clic che senti quando regoli il volume, la sensazione di fluidità con cui scorri la pagina e molto altro , molto di piu.

Ma tutto ciò che ho descritto finora è stato correlato ai prodotti. Nel nostro esempio originale, stavamo parlando della creazione di un sito web. Come applichi questi approcci al web design? Per rispondere a questa domanda, diamo un'occhiata al sito web di Apple e cerchiamo di capire quali accorgimenti stilistici utilizza.

approcci

Foto e illustrazioni

La prima cosa che salta all'occhio quando visiti il ​​sito Web di Apple sono le foto dei prodotti di alta qualità. In verità, credo che queste foto facciano metà del lavoro di chiamare il "Wow!" presso il visitatore. Tutti sono grandi, luminosi, realizzati nello stesso stile e ti permettono di vedere tutti i dettagli.

La vera magia delle foto. Alcuni dicono che è "un blocco normale con angoli arrotondati", ma in tali fotografie è ammirevole.

Ariosità e purezza

L'elemento successivo sarà la leggerezza: tutti gli elementi della pagina sono molto comodi e gratuiti, lo sfondo bianco dell'area del contenuto dà una sensazione di leggerezza. E così non si ha l'impressione che l'intera pagina si stia sgretolando: è raccolta da uno sfondo grigio chiaro con una cornice leggera.

caratteri

Apple utilizza solo due caratteri tipografici Adobe Myriad per le intestazioni e il carattere standard di macOS X, Lucida Grande. Entrambi i caratteri tipografici sono caratteri tipografici serif austeri e moderni che mantengono solo uno stile minimalista generale. Significativamente, il desiderio di alta qualità è presente anche qui: per il desiderio di garantire che i titoli di grandi dimensioni sul sito appaiano belli in tutte le condizioni, Apple utilizza le immagini per le didascalie, non il testo.

Steve Jobs deve anche il suo atteggiamento riverente ai caratteri alla Apple: dopo aver lasciato il college, ha frequentato vari corsi, incluso un corso di lezioni di calligrafia.

Angoli arrotondati

Inoltre sul sito sono presenti i famosi (quanto senza!) Angoli arrotondati. Sono letteralmente ovunque! Ad essere onesti, a volte sembra che l'iPhone sia stato inventato solo per continuare la tradizione di utilizzare angoli arrotondati.

Gli angoli arrotondati sono ovunque: nella custodia del telefono, nelle icone delle applicazioni e persino nel pulsante Home.

Effetti

L'elemento successivo è anche il famoso riflesso dell'obiettivo Aqua e gli effetti sfumati. Di recente, il loro numero sul sito è notevolmente diminuito. Sono spesso usati per enfatizzare un particolare elemento.

Il menu principale sul sito Web di Apple. Un tributo al famoso stile Aqua - dopo le dimissioni di Scott Forstall, il minimalismo domina sempre più lo skeomorfismo e gli effetti caramello.

Contenuto

Apple ha prestato non meno attenzione al contenuto del sito, al testo e alla sua presentazione. Una caratteristica interessante può essere considerata l'assenza della sezione "Informazioni sull'azienda" così amata da molti, perché i prodotti principali su questo sito sono.

Effetti moderni

Sempre più spesso, il sito inizia a utilizzare l'animazione o altri effetti simili: aggiungono dinamiche, mostrano i vantaggi sotto una nuova luce o aiutano a capire come funzionano alcune parti.

Ed è tutto?

Ovviamente, questo approccio non può essere utilizzato indiscriminatamente per tutti i siti. È il posto in siti di presentazione o promozionali. E, soprattutto, non puoi ripetere lo stile, guidato solo da linee guida visive. Un sito web è un prodotto completo, completo, ogni fase della cui creazione deve essere eseguita ad alto livello, con amore e idee.

Il mancato sviluppo di uno solo dei passaggi distruggerà istantaneamente la fragile magia dello "stile Apple".

L'utilizzo delle tecniche sopra descritte ti aiuterà a realizzare un design bello, pulito e moderno, ma non ti libererà dal resto dei passaggi di creazione: scrivere testi competenti e utilizzarli nelle giuste quantità, creare presentazioni video e foto di alta qualità.

Il design di Yablokovskiy è sempre stato molto popolare tra i miei clienti. Quando si tratta di design, mi viene spesso detto "Ho bisogno di un design semplice con uno sfondo grigio chiaro" e mi viene fornito un esempio di apple.com

Se navighi un po' sul loro sito, troverai dei pulsanti blu piuttosto carini. Lì sono fatti nel modulo, quindi se vuoi lo stesso sul tuo sito, dovrai usare Photoshop.

Quindi dispongo i pulsanti in puro CSS:

Pulsante Apple (cursore: puntatore; padding: 3px 10px; decorazione del testo: nessuno; colore: #F F F; dimensione del carattere: 13px; text-shadow: 0 -1px 1px rgba (0, 0, 0, .3); background-image: -webkit-linear- gradiente (# 52A8E8, #377 AD0#377 AD0, # 52A8E8); immagine di sfondo: -o-gradiente-lineare (rgb (82, 168, 232), rgb (55, 122, 208)); colore di sfondo: # 52A8E8; -moz-border-radius: 23px; -webkit-border-radius: 23px; raggio di confine: 23px; bordo: 1px solido # 205 59A; box-shadow: 0 1px 2px rgba (0, 0, 0, .5), riquadro 0 1px 0 rgba (255, 255, 255, .3); ) .apple-button: hover, .apple-button: focus (immagine-sfondo: -webkit-linear- gradiente (# 54A1D8, #196 7CA); background-image: -moz-linear- gradiente (0% 100% 90deg, #196 7CA, #54A1D8); immagine di sfondo: -o-gradiente-lineare (rgb (84, 161, 216), rgb (25, 103, 202)); colore di sfondo: # 52A8E8; box-shadow: 0 1px 0 rgba (255, 255, 255, .6), riquadro 0 1px 0 rgba (255, 255, 255, .3); ) .apple-button: attivo (colore di sfondo: # 2D7CD1; box-shadow: 0 1px 1px rgba (255, 255, 255, .5), riquadro 0 2px 5px rgba (0, 0, 100, .5); )

Dimostrazione: esempio dal vivo (prova a passarci sopra e fare clic)

Qualche parola sulla compatibilità cross-browser. Dato che abbiamo usato la proprietà CSS pendenza, quindi potrebbero esserci dei problemi durante la visualizzazione nelle versioni precedenti del browser Opera, beh, scatola-ombraÈ una proprietà CSS 3.

Misha

Negli ultimi anni non sapevo per molto tempo cosa fare con il sito, il sito, perché praticamente non porta alcun profitto, ma recentemente mi sono reso conto che la mia missione è quella di contribuire alla diffusione di WordPress. Dopotutto, WordPress è il miglior motore per lo sviluppo di siti Web, sia per coloro che sono pronti a utilizzare la struttura integrata di questo CMS, sia per coloro che preferiscono le soluzioni headless.

Io stesso ho conosciuto WordPress per la prima volta nel 2009. Organizzatore. Docente presso Epic Skills e LoftSchool.

Se hai bisogno di aiuto con il tuo sito web o magari anche di sviluppare da zero con WordPress / WooCommerce -. Io e il mio team faremo tutto per te al miglior livello possibile.

introduzione

Quando si tratta di design, c'è un'azienda che è impossibile non ricordare. Questa è Apple: ogni prodotto che hanno è il risultato del lavoro di un team di progettazione. Anche il sito di questa azienda ha sempre attirato l'attenzione.

In questo tutorial creeremo una galleria, una presentazione in stile Apple. Più o meno lo stesso viene utilizzato sul sito Web di Apple per presentare i prodotti dell'azienda. Non abbiamo bisogno di PHP o di un database per crearlo.

FASE 1 - XHTML

Diamo un'occhiata più da vicino al markup XHTML:

L'idea è molto semplice - ci sono due DIV principali - uno con id = "menu" contiene miniature, l'altro "diapositive" contiene le diapositive stesse.

Per aggiungere una nuova diapositiva, devi solo aggiungere nuovi elementi a entrambi i contenitori. Diapositive - immagini in formato JPG, miniature - PNG trasparente. Ma puoi usare anche altri formati.

Puoi anche incorporare qualsiasi codice HTML. Ad esempio, puoi trasformare una specifica diapositiva in un collegamento sotto forma di immagine.

È molto importante che le diapositive abbiano un'altezza e una larghezza specificate: vengono utilizzate da jQuery per definire la zona di scorrimento.

Notare anche gli elementi delle miniature LI. Al primo viene assegnata la classe fbar per visualizzare la barra di divisione verticale. Agli altri elementi viene assegnata la classe menuItem e vengono utilizzati come pulsanti di controllo della presentazione.

Passiamo al passaggio successivo.

Passaggio 2 - CSS

Diamo un'occhiata al nostro foglio di stile.

Body, h1, h2, h3, p, quote, small, form, input, ul, li, ol, label (/ * Page reset * / margin: 0px; padding: 0px;) body (/ * Impostazione del colore del testo predefinito, sfondo e uno stack di font * / color: # 444444; font-size: 13px; background: # f2f2f2; font-family: Arial, Helvetica, sans-serif;) / * stili galleria * / #gallery (/ * CSS3 Box Shadow * / -moz-box-shadow: 0 0 3px #AAAAAA; -webkit-box-shadow: 0 0 3px #AAAAAA; box-shadow: 0 0 3px #AAAAAA; / * Angoli arrotondati CSS3 * / -moz-border- raggio-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 solido bianco; background: url (img / panel.jpg) repeat-x bottom center #ffffff; / * La larghezza della galleria * / width: 920px; overflow: hidden;) #slides (/ * Questa è l'area della diapositiva * / height: 400px; / * jQuery cambia la larghezza in seguito alla somma delle larghezze di tutte le diapositive. * / width: 920px; overflow: hidden; ). diapositiva (flottante: sinistra; ) #menu (/ * Questo è il contenitore per le miniature * / height: 45px;) ul (margin: 0px; padding: 0px;) li (/ * Ogni miniatura è un elemento li * / width: 60px; display: inline -block; stile elenco: nessuno; altezza: 45px; overflow: nascosto;) li.inact: hover (/ * Lo stato inattivo, evidenziato al passaggio del mouse * / background: url (img / pic_bg.png) ripeti;) li .act, li.act: hover (/ * Lo stato attivo del pollice * / background: url (img / active_bg.png) no-repeat;) li.act a (cursor: default;) .fbar (/ * Il barra verticale più a sinistra, accanto alla prima miniatura * / width: 2px; background: url (img / divider.png) no-repeat right;) li a (display: block; background: url (img / divider.png) no-repeat right; height: 35px; padding-top: 10px;) a img (bordo: nessuno;)

Abbiamo utilizzato diverse proprietà CSS3 in questo foglio di stile:

* box-shadow, c'è una piccola ombra negli angoli della galleria. Usando questa proprietà, devi fornire le coordinate X e Y (0 0 qui), sfocatura (3px nel nostro esempio) e colore dell'ombra;
* bordo-raggio, bordi rotondi nella parte inferiore della galleria.

Sfortunatamente, queste proprietà al momento funzionano solo in Safari, Chrome e Firefox.

Ora è il momento della magia di jQuery.

FASE 3 - jQuery

Abbiamo bisogno del seguente codice:

$ (documento) .ready (funzione () (
/ * Questo codice viene eseguito dopo che il DOM è stato completamente caricato * /

var totWidth = 0;
var posizioni = new Array ();

$ ("# diapositive .slide"). ciascuno (funzione (i) (
/ * Passa attraverso tutte le diapositive e memorizza le loro larghezze cumulative in totWidth * /
posizioni [i] = totWidth;
totWidth + = $ (this) .width ();

/ * L'array delle posizioni contiene l'offset commutativo di ciascuna diapositiva dalla parte sinistra del contenitore * /

if (! $ (questo) .width ())
{
alert ("Per favore, inserisci larghezza e altezza per tutte le tue immagini!");
restituire falso;
}
});

$ ("# diapositive") larghezza (totWidth);

/ * Modifica la larghezza del div "s cotnainer con la larghezza esatta di tutte le diapositive combinate * /

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

/ * Clicca su una miniatura * /
$ ("li.menuItem") removeClass ("act") addClass ("inact");
$ (this) .parent().addClass ("act");

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

$ ("# diapositive"). stop().animate ((marginLeft: -positions + "px"), 450);
/ * Avvia l'animazione scorrevole * /

e.preventDefault ();
/ * Impedisci l'azione predefinita del collegamento * /
});

$ ("# menu ul li.menuItem: first"). addClass ("act"). fratelli (). addClass ("inact");
/ * Al caricamento della pagina, contrassegna la prima miniatura come attiva * /
});

L'idea principale è di avvolgere le diapositive, la larghezza delle diapositive viene sommata e questa larghezza viene assegnata al contenitore. Poiché le diapositive sono allineate a sinistra, hanno spazio sufficiente per adattarsi una dietro l'altra.

Quando fai clic su una miniatura, lo script calcola quale diapositiva mostrare e le scorre assegnando un valore di rientro negativo utilizzando il metodo animato.

Solo 40 righe di codice e la nostra presentazione - la galleria è pronta!

Conclusione

Ci sono voluti solo tre passaggi per creare un super bellissima galleria nello stile di Apple. È in grado di decorare qualsiasi sito.

Sei il felice proprietario di una piccola ma interessante azienda. La strada per trionfare è ancora lunga, ma non hai dubbi che con il tempo la tua attività diventerà motivo di orgoglio e un esempio da seguire. A proposito, non devi aspettare questo momento: puoi posizionarti come un professionista di alta classe in questo momento, rendendoti convincente, come una grande e seria azienda.

Non sei sicuro di come dovrebbe essere un sito del genere? Non preoccuparti, ora ti spieghiamo tutto e ti diciamo come procedere. Se segui i nostri consigli, non dovrai più sospirare ad Apple, Nike o L'Oreal perché il tuo sarà altrettanto buono. Ecco quindi alcune linee guida per la creazione di un sito Web solido e professionale.

Segui le tendenze del web design

I grandi marchi aggiornano e migliorano costantemente i loro siti. Team di designer e sviluppatori esperti stanno lavorando per creare una risorsa insolita e moderna che susciti la curiosità delle persone e il desiderio di dare un'occhiata a tutto.

Sì, è molto costoso, ma ci sono opzioni gratuite, come Wix. Il nostro editor è stato creato appositamente in modo che tu possa creare un bel sito per qualsiasi tipo di attività e aggiungere qualche effetto alla moda, ad esempio, lo scorrimento parallasse o il video come sfondo. Puoi creare una vera pagina "lunga" e integrarla con elementi di design "piatto" *.

Pensiamo che in questa fase non ti farà male andare in giro per i siti dei designer e ottenere una buona ispirazione. I nostri consigli: rivista Ispirazione per il web, blog Lopart e rivista di design Camera di servizio; se l'inglese non è un ostacolo per te, leggi Design Vandelay , Rivista Smashing e Deposito di webdesign .

* Non capisci cosa significano tutte queste parole? Quindi devi leggere il nostro.

Inizia con il branding

Le grandi aziende hanno un'identità aziendale riconoscibile e un posizionamento molto chiaro. Usano caratteri, colori e slogan ben definiti. Riconoscerai inequivocabilmente il logo rosso della Coca-Cola, che sia sul sito web, sulle bottiglie o sui cartelloni pubblicitari lungo la strada.

Che importa se la tua azienda non è grande come Coca-Cola? Questo non significa che non devi fare il branding. Un'identità aziendale ben congegnata è importante. Grazie ad esso, le persone saranno in grado di identificare rapidamente il tuo prodotto, e lì è già un tiro di schioppo per l'acquisto. Pertanto, disegna un bel logo, inventa uno slogan, scegli caratteri e colori del marchio e organizza le pagine dei social media di conseguenza. Per ulteriori suggerimenti, consulta il nostro articolo su.

Meglio di meno

Comprendiamo che vuoi raccontare in dettaglio il tuo prodotto e la tua attività, ma non ti consigliamo di sovraccaricare il sito e stancare i tuoi visitatori. Il sito si carica molto male, è difficile da leggere e respinge i visitatori. Il meglio è nemico del bene, quindi devi imparare a fermarti in tempo.

Pensiamo a cosa può essere rimosso dal tuo sito. Se i testi sono pieni di termini tecnici e professionali, liberatene. Pensi che i tuoi visitatori abbiano davvero bisogno di conoscere la biografia dettagliata di tutti i tuoi dipendenti? Improbabile. Alcune cose, ovviamente, non possono essere abbreviate, ad esempio una descrizione dettagliata di beni o servizi, ma questo è normale, queste informazioni sono utili. Vale anche la pena spostarlo dove non passerà sicuramente inosservato. Tutto ciò che rallenta il processo di acquisto può essere rimosso senza il minimo rimpianto.

Ora diamo un'occhiata al design. Riduci il numero di colori a tre o quattro, rimuovi le immagini non necessarie e presta attenzione alla tipografia. Ricordati di lasciare molto spazio libero, detto anche "aria". Quando c'è molta "aria" sul sito, le persone notano tutti gli elementi critici, ad esempio necessari per spingere i visitatori ad acquistare, iscriversi, registrarsi e così via.

Mostra il prodotto in homepage

Vuoi aumentare il numero di ordini? Quindi, assicurati che le persone vedano subito il tuo prodotto. Guarda i siti web di marchi famosi. Vedete, mettono i prodotti non solo nella pagina dello shopping, ma anche nella home page in modo che le persone li notino sicuramente. Se lo hai fatto e stai pensando a come aumentare le vendite, sentiti libero di copiare questa tecnica.

Naturalmente, le foto dei prodotti devono essere grandi e di altissima qualità. Non dimenticare che questo è un negozio online in cui nulla può essere toccato o misurato, quindi le persone prendono una decisione di acquisto guardando l'immagine. Se non hai i soldi per un fotografo professionista, leggi il nostro articolo su. Un po' di pratica e ci riuscirai! E non dimenticare le capacità del nostro editor, puoi aggiungere un'applicazione al sito in modo che il cliente possa ingrandire l'immagine della cosa di interesse e dargli una buona occhiata.

Fai una buona navigazione

Pensiamo che ti sia capitato di trovarti su un sito mal concepito e di correre confuso alla ricerca della pagina desiderata. Di norma, lasciamo questi posti a mani vuote e con il desiderio di non tornare mai più. E tutta la colpa è della navigazione mal concepita. Non ripetere questo errore e assicurati che il visitatore sia chiaro fin dai primi secondi.

Se ti viene posta sempre la stessa domanda, crea una pagina con le risposte alle domande più frequenti. Puoi usare l'applicazione Domande frequenti su Wix... Il suo vantaggio è che le persone ottengono le informazioni di cui hanno bisogno e allo stesso tempo non sei distratto da altre cose.

Vuoi dimostrare che la tua azienda è reattiva e amichevole? Aggiungi l'applicazione " Tidio Live Chat»Per rispondere alle domande in tempo reale. Puoi installarlo sul tuo smartphone e non stare seduto al computer tutto il giorno, ma dedicarti agli affari ed essere in contatto allo stesso tempo.

Dimostra che le persone si fidano di te

È positivo che tu provi a rimanere in contatto e a rispondere alle domande in tempo, ma questo non è sufficiente per creare fiducia con i tuoi clienti. Per fare ciò, è necessario lavorare di nuovo sul sito. Crea una sezione a parte con la storia dell'azienda, raccontaci chi sei, in cosa credi e cosa ritieni importante. Troppe informazioni sono inutili: il testo deve essere breve, sincero e comprensibile. È abbastanza difficile mostrare che tipo di persona sei su Internet, ma pensiamo che una pagina del genere farà perfettamente il lavoro.

Ti consigliamo inoltre di aggiungere le recensioni dei clienti al sito, nella home page o in una sezione separata. Dopo averli letti, le persone sapranno che il tuo prodotto è affidabile. A proposito, anche Yandex e Google prestano attenzione alle recensioni, il che significa che influenzano.

Crea una versione mobile del sito

Più della metà degli utenti di Internet naviga online da tablet e smartphone. Ciò significa che la versione mobile del sito non è un capriccio, ma una necessità. Fortunatamente, non devi chiederti come farlo. Nell'editor Wix versione mobile viene generato automaticamente, devi solo testarlo e modificarlo. Non dimenticare che la versione mobile non è una copia esatta del desktop, quindi rimuovi tutti gli elementi non necessari e rendi visibili i pulsanti e i contatti.

Non dimenticare i social

Presta attenzione a come i colleghi più anziani ed esperti gestiscono le loro pagine sui social media. Sì, per una copertura più completa del pubblico è necessario sia un sito Web che pagine su Facebook, Vkontakte, Instagram, ecc. I social media sono ideali per pubblicare notizie, scrivere su un prodotto e rispondere a domande. È importante non solo parlare di lavoro, ma formarsi un'immagine e costruire relazioni normali e di fiducia. Se non sei davvero sicuro di cosa fare, leggi l'articolo su e segui tutti i nostri consigli.

Dopo aver avviato una pagina su un determinato sito, informane i visitatori del tuo sito. Aggiungi i pulsanti dei social media all'intestazione, al piè di pagina o alla sezione dei contatti. Ti consigliamo inoltre di aggiungere l'applicazione: è gratuita e le grandi aziende la utilizzano volentieri. Con il suo aiuto puoi gestire fino a dieci account dal tuo sito: pubblicare notizie, rispondere in tempo ai commenti e sorprendere i clienti con velocità, impeccabilità e professionalità.

Pronto a entrare nelle fila dei grandi marchi? te stesso su Wix: è facile e gratuito!