wejścieHtml w stylu jabłka. MNIEJ CSS: Menu w stylu Apple
Wielu klientów, opisując swoje życzenia dotyczące przyszłej strony, wyraża się zwięźle: „Chcemy czegoś w stylu Apple!”. Ich zdaniem taka odpowiedź powinna dać wykonawcy wyczerpującą informację, natychmiast postawić kropkę nad „i” i wyeliminować wszelkie niejasności. Ale w rzeczywistości wszystko jest oczywiście bardziej skomplikowane. W końcu wszystko może zaimponować człowiekowi w stylu Apple – prezentacja nowego tabletu, prostego białego pudełka od iPhone’a, czy samej strony Apple. A najbardziej obraźliwe jest, całkiem możliwe, powiedzenie „zrób to w stylu Apple”, sam klient po prostu nie wie, co to tak naprawdę oznacza. A co z nieszczęśliwym wykonawcą, który być może po prostu nie wie, czego się od niego w końcu oczekuje?
Spróbujmy to rozgryźć!
Zasada jabłka
Podejście Apple opiera się na bardzo prostej zasadzie – nie da się stworzyć naprawdę wysokiej jakości produktu bez podjęcia nad nim wszystkich obszarów pracy. Wszystko musi być zrobione na najwyższym poziomie. Gdy wypuszczany jest nowy telefon, nie można liczyć na fenomenalną jakość jego ekranu i niską cenę, jeśli w jego ponurym korpusie migoczą pęknięcia, a hasło reklamowe na wielkim billboardzie jest napisane z błędami.
„No cóż, zaoszczędziliśmy na copywritingu – nie sprzedajemy tekstów, tylko telefon” – pomyśli większość.
Ale to wszystko! Z punktu widzenia Apple’a doświadczenie posiadania ich produktów pojawia się jeszcze przed zapłaceniem ciężko zarobionych pieniędzy za dowolnego iPoda, a zatem w tym łańcuchu nie ma elementów nieistotnych. To nie tylko technologia, nie tylko opakowanie, ale także reklama i wizytówka oraz strona internetowa i teksty na stronie. Nie ma tu drobnych elementów. A „samo opakowanie może opowiedzieć całą historię”. W związku z tym pierwszą rzeczą, którą należy zrozumieć o „stylu Apple”, jest skrupulatna uwaga we wszystkich obszarach pracy.
Drugą ważną cechą produktów Apple jest elegancka prostota. Odgrywa bardzo ważną rolę w Apple.
„Dlaczego uważamy, że prostota jest dobra? Ponieważ kiedy mamy do czynienia z przedmiotami, ważne jest, abyśmy czuli, że nimi zarządzamy.”
Trzecią krytyczną cechą są szczegóły. Wszystkie te drobiazgi, których nie zauważasz, a które tworzą codzienny komfort korzystania z produktów Apple – animacje przejść, dźwięki, kliknięcie, które słyszysz podczas regulacji głośności, uczucie płynności, z jaką przewijasz stronę i wiele innych. , wiele więcej.
Ale wszystko, co do tej pory opisałem, dotyczyło produktów. W naszym oryginalnym przykładzie mówiliśmy o stworzeniu strony internetowej. Jak zastosować te podejścia do projektowania stron internetowych? Aby odpowiedzieć na to pytanie, zajrzyjmy na stronę Apple i spróbujmy zrozumieć, jakich stylistycznych trików używa.
Podejścia
Zdjęcia i ilustracje
Pierwszą rzeczą, która rzuca się w oczy, gdy odwiedzasz witrynę Apple, są wysokiej jakości zdjęcia produktów. Prawdę mówiąc, wierzę, że te zdjęcia wykonują połowę pracy, wykrzykując przeciągające się „Wow!” na gościa. Wszystkie są duże, jasne, wykonane w tym samym stylu i pozwalają dostrzec wszystkie detale.
Sama magia zdjęć. Niektórzy mówią, że to „normalny blok z zaokrąglonymi rogami”, ale na takich fotografiach jest godny podziwu.
Lekkość i czystość
Kolejną pozycją będzie lekkość - wszystkie elementy na stronie są bardzo wygodne i swobodne, białe tło obszaru treści daje poczucie lekkości. I żeby nie było wrażenia, że cała strona się kruszy – zbiera ją jasnoszare tło z jasną ramką.
Czcionki
Apple używa tylko dwóch krojów pisma Adobe Myriad do nagłówków i standardowej czcionki macOS X, Lucida Grande. Oba kroje pisma są surowymi i nowoczesnymi krojami szeryfowymi, które zachowują jedynie ogólny minimalistyczny styl. Co znamienne, obecne jest tutaj również pragnienie wysokiej jakości – ze względu na chęć zadbania o to, aby duże nagłówki na stronie wyglądały pięknie w każdych warunkach, Apple używa obrazów jako podpisów, a nie tekstu.
Steve Jobs zawdzięcza też swój pełen szacunku stosunek do czcionek w Apple – po skończeniu studiów uczęszczał na różne kursy, w tym na kurs wykładów z kaligrafii.
Zaokrąglone rogi
Również na stronie znajdują się słynne (jakże bez nich!) zaokrąglone rogi. Są dosłownie wszędzie! Szczerze mówiąc – czasem wydaje się, że iPhone został wymyślony tylko po to, by kontynuować tradycję używania zaokrąglonych rogów.
Zaokrąglone rogi są wszędzie – w obudowie telefonu, ikonach aplikacji, a nawet na przycisku Home.
Efekty
Kolejną pozycją są również słynne efekty flary i gradientu soczewek Aqua. Ostatnio ich liczba na stronie wyraźnie spadła. Często używane są do podkreślenia konkretnego elementu.
Menu główne na stronie Apple. Hołd dla słynnego stylu Aqua – po rezygnacji Scotta Forstalla coraz bardziej dominuje minimalizm, skeomorfizm i karmelowe efekty.
Zadowolony
Apple zwróciło nie mniejszą uwagę na zawartość strony, tekst i jego prezentację. Ciekawą cechą może być brak tak lubianej przez wielu sekcji „O firmie”, ponieważ głównymi produktami na tej stronie są.
Nowoczesne efekty
Coraz częściej strona zaczyna wykorzystywać animację lub inne podobne efekty - dodają dynamiki, pokazują zalety w nowym świetle, czy pomagają zrozumieć, jak działa jakaś część.
I to wszystko?
Oczywiście tego podejścia nie można bezkrytycznie stosować do wszystkich witryn. Jest miejscem w witrynach prezentacyjnych lub promocyjnych. A co najważniejsze, nie można powtarzać stylu, kierując się jedynie wskazówkami wizualnymi. Strona internetowa to kompletny, kompletny produkt, którego każdy etap tworzenia musi być przeprowadzony na wysokim poziomie, z miłością i pomysłami.
Niewykonanie tylko jednego z kroków natychmiast zniszczy kruchą magię „Stylu Apple”.
Korzystanie z opisanych powyżej technik pomoże Ci stworzyć piękny, schludny i nowoczesny projekt, ale nie uwolni Cię od pozostałych etapów tworzenia - pisania kompetentnych tekstów i używania ich w odpowiednich ilościach, tworzenia prezentacji wideo i wysokiej jakości zdjęć.
Kult Apple’a nie pozostawia nikogo obojętnym, a jednym z kluczowych czynników decydujących o popularności Apple’a jest jego unikalny design. Zaprojektowany przez Apple w Kalifornii wyraźnie pokazuje, że projektanci traktują swoje produkty jak dzieła sztuki.
Cupertino, Kalifornia — 16 listopada firma Apple ogłosiła wydanie nowej książki w twardej oprawie zatytułowanej „Designed by Apple in California”. Od iMaca (1998) po Apple Pencil (2015), dwie dekady innowacji projektowych zostały uwiecznione na 450 zdjęciach przeszłych i obecnych produktów. Książka powstawała przez 8 lat i była dedykowana pamięci Steve'a Jobsa.
„Pomysł stworzenia czegoś ważnego dla ludzkości od samego początku motywował Steve'a, ta myśl jest naszym ideałem i celem, z którym Apple rusza w przyszłość” – mówi Jony Ive.
„Designed by Apple in California” jest wynikiem ścisłej współpracy wielu zespołów projektowych i profesjonalistów z zupełnie różnych dziedzin. Wszyscy mają nadzieję, że książka da ludziom zrozumienie, jak i dlaczego produkty Apple są tworzone i istnieją. Wszystkie zdjęcia zostały wykonane przez Andrew Zuckermana techniką, którą określił jako „celowo skromny styl”. Zdjęcia ilustrują zarówno szczegóły procesu projektowania, jak i same gotowe produkty.
To książka o designie, ale nie dotyczy samych projektantów, procesu twórczego czy rozwoju produktu. Obiektywnie odzwierciedla styl, wizerunek i ideologię designu Apple. Wiele produktów wygląda tak przejrzyście, prosto i logicznie, że nie mają rozsądnej alternatywy. Dla każdego urządzenia przemyślana jest nawet konstrukcja instrumentu, z którego jest wykonane.
„Jako projektanci żyjemy w przyszłości, kochamy to, co już zrobiliśmy i mamy obsesję na punkcie tego, czego jeszcze nie zrobiliśmy”.
„Jedną z najważniejszych rzeczy, których nauczyliśmy się przez 20 lat wspólnej pracy, jest potrzeba wzajemnego słuchania, ponieważ najjaśniejsze pomysły często podsuwają ci, którzy mówią bardzo, bardzo cicho”.
Zaprojektowana przez Apple w Kalifornii książka to limitowana edycja w dwóch formatach: mały (25,9 x 32,4 cm) za 199 USD i duży (33 x 40,6 cm) za 299 USD. Drukowany jest na specjalnie wykonanym papierze w specjalnym kolorze z matowymi, posrebrzanymi krawędziami. Sprzedawane wyłącznie na Apple.com w Stanach Zjednoczonych, Australii, Wielkiej Brytanii, Niemczech, Hongkongu, Korei, Francji, Japonii i na Tajwanie oraz w wybranych sklepach Apple.
Jesteś szczęśliwym posiadaczem małej, ale fajnej firmy. Do triumfu jeszcze długa droga, ale nie masz wątpliwości, że z biegiem czasu Twój biznes stanie się powodem do dumy i przykładem do naśladowania. Nawiasem mówiąc, nie musisz czekać na ten moment: możesz już teraz pozycjonować się jako wysokiej klasy profesjonalista, przekonując się, jak duża i poważna firma.
Nie wiesz, jak powinna wyglądać taka strona? Nie martw się, teraz wszystko wyjaśnimy i powiemy, jak postępować. Jeśli zastosujesz się do naszych rad, nie będziesz już musiał wzdychać do Apple, Nike czy L'Oreal, ponieważ Twoje własne będą równie dobre. Oto kilka wskazówek, jak zbudować solidną, profesjonalną stronę internetową.
Śledź trendy w projektowaniu stron internetowych
Wielkie marki stale aktualizują i ulepszają swoje witryny. Zespoły doświadczonych projektantów i programistów pracują nad stworzeniem niezwykłego i nowoczesnego zasobu, który wzbudza ciekawość i chęć przyjrzenia się wszystkim.
Tak, to bardzo drogie, ale są darmowe opcje, takie jak Wix. Nasz edytor został stworzony specjalnie po to, abyś mógł stworzyć fajną stronę dla każdego rodzaju działalności i dodać do niej modny efekt, na przykład przewijanie paralaksy lub wideo jako tło. Możesz zrobić rzeczywistą „długą” stronę i uzupełnić ją elementami o „płaskim” designie*.
Uważamy, że na tym etapie nie zaszkodzi chodzić po witrynach dla projektantów i czerpać dobrą inspirację. Nasze rekomendacje: magazyn Inspiracje internetowe, blog Lopart i magazyn projektowy Pokój dyżurny; jeśli angielski nie jest dla ciebie przeszkodą, przeczytaj Projekt Vandelay , Rozbijający magazyn oraz Magazyn projektowania stron internetowych .
* Nie rozumiesz, co oznaczają te wszystkie słowa? Więc musisz przeczytać nasze.
Zacznij od brandingu
Duże firmy mają rozpoznawalną tożsamość korporacyjną i bardzo jasne pozycjonowanie. Używają dobrze zdefiniowanych czcionek, kolorów i haseł. Bez wątpienia rozpoznasz czerwone logo Coca-Coli, czy to na stronie internetowej, butelkach czy billboardach wzdłuż ulicy.
Co z tego, że Twoja firma nie jest tak duża jak Coca-Cola? Nie oznacza to, że nie musisz robić brandingu. Ważna jest przemyślana identyfikacja wizualna. Dzięki niej ludzie będą mogli szybko zidentyfikować Twój produkt, a tam już jest rzut beretem do zakupu. Dlatego narysuj ładne logo, wymyśl hasło, dobierz markowe czcionki, kolory i odpowiednio ułóż strony w mediach społecznościowych. Więcej wskazówek znajdziesz w naszym artykule na temat.
Lepiej mniej
Rozumiemy, że chcesz szczegółowo opowiedzieć o swoim produkcie i biznesie, ale nie radzimy przeciążać witryny i męczyć odwiedzających. Strona ładuje się bardzo słabo, jest trudna do odczytania i odpycha odwiedzających. Najlepszy jest wrogiem dobra, więc musisz nauczyć się zatrzymywać na czas.
Zastanówmy się, co można usunąć z Twojej witryny. Jeśli teksty są pełne terminów technicznych i fachowych, pozbądź się ich. Czy uważasz, że Twoi goście naprawdę muszą znać szczegółowe biografie wszystkich Twoich pracowników? Mało prawdopodobny. Niektórych rzeczy oczywiście nie da się skrócić, na przykład szczegółowy opis towaru lub usługi, ale to normalne, ta informacja jest przydatna. Warto nawet przenieść go tam, gdzie na pewno nie pozostanie niezauważony. Wszystko, co spowalnia proces zakupu, można usunąć bez najmniejszego żalu.
Teraz spójrzmy na projekt. Zmniejsz liczbę kolorów do trzech lub czterech, usuń niepotrzebne obrazy i zwróć uwagę na typografię. Pamiętaj, aby zostawić dużo wolnej przestrzeni, zwanej również „powietrzem”. Kiedy w witrynie jest dużo „powietrza”, ludzie zauważają wszystkie krytyczne elementy, na przykład niezbędne, aby skłonić odwiedzających do zakupu, rejestracji, rejestracji i tak dalej.
Pokaż produkt na stronie głównej
Chcesz zwiększyć ilość zamówień? Upewnij się więc, że ludzie od razu zobaczą Twój produkt. Zajrzyj na strony znanych marek. Widzisz, umieszczają produkty nie tylko na stronie zakupów, ale także na stronie głównej, aby ludzie na pewno je zauważyli. Jeśli tak i zastanawiasz się, jak zwiększyć sprzedaż - śmiało skopiuj tę technikę.
Oczywiście zdjęcia produktów muszą być duże i bardzo wysokiej jakości. Nie zapominaj, że jest to sklep internetowy, w którym niczego nie można dotknąć ani zmierzyć, więc ludzie podejmują decyzję o zakupie, patrząc na zdjęcie. Jeśli nie masz pieniędzy na profesjonalnego fotografa, przeczytaj nasz artykuł na temat. Trochę praktyki i odniesiesz sukces! I nie zapominaj o możliwościach naszego edytora, możesz dodać aplikację do serwisu, aby klient mógł powiększyć obraz interesującej go rzeczy i dobrze się jej przyjrzeć.
Zrób dobrą nawigację
Sądzimy, że zdarzyło Ci się znaleźć się na słabo przemyślanej witrynie i pędzić w zamieszaniu w poszukiwaniu żądanej strony. Z reguły wychodzimy z takich miejsc z pustymi rękami i pragnieniem, aby nigdy nie wracać. A cała wina to źle przemyślana nawigacja. Nie powtarzaj tego błędu i upewnij się, że odwiedzający jest wyraźny od pierwszych sekund.
Jeśli ciągle zadawane Ci jest to samo pytanie, utwórz stronę z odpowiedziami na najczęściej zadawane pytania. Możesz skorzystać z aplikacji Często zadawane pytania na temat Wix... Jego zaletą jest to, że ludzie otrzymują potrzebne informacje, a jednocześnie nie rozpraszają Cię inne rzeczy.
Chcesz pokazać, że Twoja firma jest responsywna i przyjazna? Dodaj aplikację " Czat na żywo Tidio»Aby odpowiadać na pytania w czasie rzeczywistym. Możesz zainstalować go na swoim smartfonie i nie siedzieć cały dzień przy komputerze, ale zajmować się biznesem i jednocześnie być w kontakcie.
Pokaż, że ludzie ci ufają
Dobrze, że starasz się być w kontakcie i odpowiadać na pytania na czas, ale to nie wystarczy, aby zbudować zaufanie klientów. Aby to zrobić, musisz ponownie pracować na stronie. Stwórz osobną sekcję z historią firmy, opowiedz nam kim jesteś, w co wierzysz i co uważasz za ważne. Zbyt wiele informacji jest bezużytecznych: tekst powinien być krótki, szczery i zrozumiały. Dosyć trudno jest pokazać jaką osobą jesteś w Internecie, ale uważamy, że taka strona sprawdzi się doskonale.
Polecamy również dodawanie opinii klientów do serwisu - na stronie głównej lub w osobnym dziale. Po ich przeczytaniu ludzie będą wiedzieć, że Twój produkt jest godny zaufania. Nawiasem mówiąc, Yandex i Google również zwracają uwagę na recenzje, co oznacza, że mają wpływ.
Stwórz mobilną wersję strony
Ponad połowa internautów korzysta z sieci z tabletów i smartfonów. Oznacza to, że mobilna wersja strony to nie kaprys, ale konieczność. Na szczęście nie musisz zastanawiać się, jak to zrobić. W Edytorze Wix wersja mobilna jest generowany automatycznie, wystarczy go przetestować i dostosować. Nie zapominaj, że wersja mobilna nie jest dokładną kopią pulpitu, więc usuń wszystkie niepotrzebne elementy i spraw, aby przyciski i kontakty były widoczne.
Nie zapomnij o mediach społecznościowych
Zwróć uwagę na to, jak starsi i bardziej doświadczeni koledzy zarządzają swoimi stronami w mediach społecznościowych. Tak, aby uzyskać pełniejszy obraz odbiorców, potrzebujesz zarówno strony internetowej, jak i stron na Facebooku, Vkontakte, Instagramie itp. Media społecznościowe są idealne do publikowania wiadomości, pisania o produkcie i odpowiadania na pytania. Ważne jest nie tylko rozmawianie o pracy, ale także kształtowanie wizerunku i budowanie normalnych, opartych na zaufaniu relacji. Jeśli nie jesteś pewien, co robić, przeczytaj artykuł i postępuj zgodnie ze wszystkimi naszymi zaleceniami.
Po uruchomieniu strony w określonej witrynie poinformuj o tym odwiedzających. Dodaj przyciski mediów społecznościowych do nagłówka, stopki lub sekcji kontaktów. Polecamy również dodanie aplikacji - jest darmowa, a duże firmy chętnie z niej korzystają. Z jego pomocą możesz zarządzać nawet dziesięcioma kontami ze swojej strony: publikować wiadomości, odpowiadać na komentarze na czas i zaskakiwać klientów szybkością, nienagannością i profesjonalizmem.
Gotowy dołączyć do grona wielkich marek? się na Wix - to proste i darmowe!
Projektowanie stron internetowych w stylu Apple ewoluowało i ewoluowało na przestrzeni lat, począwszy od 1996 roku. Jak sama nazwa wskazuje, pomysł na projekt należy do korporacji Apple: jest to styl strony internetowej i interfejsów produktu. Projektowanie stron internetowych w stylu Apple zyskało dużą popularność dzięki minimalizmowi i skupieniu uwagi użytkownika na konkretnym produkcie.
Typowe cechy projektowania stron internetowych w stylu Apple
- Ścisła hierarchia w składzie pierwiastków. Głównym priorytetem jest wizerunek produktu. Zdjęcie wysokiej jakości, wyraźne, duże, umieszczone na środku strony i otoczone białą przestrzenią. W najlepszych tradycjach minimalizmu.
- Paleta kolorów składa się zazwyczaj z trzech odcieni: czarnego, białego, szarego. Jednocześnie, w przeciwieństwie do stylu płaskiego, szeroko stosowane są gradienty, cienie i metody oddawania objętości.
- Czcionki charakterystyczne. Styl nagłówków to Adobe Myriad, zwykły tekst Lucida Grande.
- Zadowolony. Strona główna serwisu zawiera minimum informacji. Szczegółowy opis znajduje się na osobnych stronach. Nie ma efektu przesycenia. Użytkownik sam wybiera interesujące go informacje.
- Właściwości techniczne. Projektowanie Apple koncentruje się na formacie HTML 5, przy użyciu nowoczesnych standardów projektowania. Oficjalna strona Apple z zasady nie korzysta z Flasha.
Dla jakich witryn jest odpowiedni?
Styl Apple to idealny sposób na zaprezentowanie produktu lub usługi. Ten styl jest często stosowany w projektowaniu sklepów internetowych, witryn promocyjnych poświęconych każdemu rodzajowi produktu: od szkoleń po sprzedaż nieruchomości. Tak wygląda projekt w stylu Apple dla witryn z oprogramowaniem:- Jumsoft http://www.jumsoft.com/money/
- Versionsapp https://versionsapp.com/
Witajcie drodzy czytelnicy! Projektowanie i tworzenie stron internetowych rozwija się bardzo szybko. Każdego dnia widzimy coraz więcej nowych produktów, czy to aplikacji, czy nowych usług, które czynią nasze życie online bardziej produktywnym i wygodnym. A projektowanie stron internetowych to tylko nieograniczona przestrzeń, ograniczona jedynie talentem i umiejętnościami „artysty” (projektanta). Więc porozmawiajmy dzisiaj o MNIEJ To dynamiczny język znaczników stylów, który uprości pisanie stylów CSS.
Co to jest MNIEJ?
LESS to dodatek CSS. Oznacza to, że każdy kod CSS jest poprawnym LESS, ale dodatkowe elementy LESS nie będą działać w prostym kodzie CSS. To świetnie, ponieważ istniejący CSS jest już działającym kodem LESS, co obniża próg wejścia w nową technologię.
LESS dodaje wiele przydatnych właściwości dynamicznych do. Wprowadza zmienne, operacje, elementy i domieszki. Możliwość modułowego pisania arkuszy stylów pozwala zaoszczędzić wiele kłopotów. 
LESS znacznie ułatwia styl pisania. Na przykład, używając domieszek, tworzymy coś w rodzaju funkcji, które mogą przyjmować argumenty. Mieszanki- pozwalają na uwzględnienie wszystkich właściwości klasy w innej klasie, po prostu dołączając nazwę klasy jako wartość jednej z właściwości.
1 | Zaokrąglone rogi (@promień: 5px) ( |
Skompilowany CSS będzie wyglądał tak:
1 | #nagłówek ( |
Pobierz bibliotekę prefix-free.js i połącz ją z index.html:
< script src= "prefix-free.js" type= "text/javascript" > |
To kończy przygotowania i przechodzi bezpośrednio do tworzenia menu w stylu Apple.com
znaczniki HTML
Znaczniki menu są dość proste. Menu tworzone jest na podstawie nieuporządkowanej listy. Otwórz edytor HTML i wklej następujący kod:
1 |
MNIEJ stylów
W tej sekcji zaczniemy pisać kod menu w języku LESS. Dla tych, którzy są nowicjuszami w programowaniu, zarówno pod względem pisania, jak i składni LESS, nie martw się, postaram się umieścić wszystko na półkach, aby było jasne. Być może nawet komuś spodoba się ten sposób pisania stylów na stronę, ponieważ jest naprawdę bardziej produktywny.
Przyjrzyjmy się, z jakich części składowych będzie się składać menu: 
Jak widać na powyższym zrzucie ekranu, nawigacja Apple.com składa się z 6 głównych części:
- Używany jest cień;
- Granica;
- Separator między pozycjami menu;
- Gradient dla tła;
- Efekt przyciemniania po najechaniu myszą;
- Tekst menu.
Istnieją dwa sposoby wykorzystania stylów pisanych:
- Schrupać
Ważny: podczas korzystania z pierwszej metody, aby style.less były połączone przed podłączeniem biblioteki less.js! Trzeba też pamiętać o połączeniu bez prefiksu.
Tak więc połączenie stylów wygląda tak:
1 |
Odzyskiwanie hasła
|