Trendy w projektowaniu stron internetowych na rok 2010
Puryści mówią, że świetny projekt jest ponadczasowy. Tak, w idealnym świecie powinniśmy ignorować trendy.
Jednak z pragmatycznego punktu widzenia monitorowanie i uwzględnianie trendów w projektowaniu ma duże znaczenie, zwłaszcza w odniesieniu do stron internetowych.
Spójrzmy prawdzie w oczy: sieć zmienia się w szybkim tempie. W przeciwieństwie do innych mediów, trendy w projektowaniu w Internecie nie wynikają tylko z estetyki.
Zmienia się technologia, która może drastycznie zmienić możliwości medium.
W 2010 r. Obserwujemy, jak projektanci nadal przekraczają granice projektowania stron internetowych, ustalając następujące jasne trendy ...
Drukowanie projektu
Design strony zawsze był źródłem inspiracji dla internetu. Projektowanie stron internetowych trwało już wystarczająco długo, aby rozwinąć silny rdzeń projektantów, którzy nigdy nie pracowali w druku. W rezultacie widzimy więcej inspiracji czerpiących z druku, ponieważ ci projektanci wyglądają poza internetem.
Serif Czcionki
Jednym z najważniejszych problemów typografii jest czytelność. Projektanci druków zawsze preferowali czcionki szeryfowe, ponieważ krawędzie poprawiają widoczność i ułatwiają rozpoznawanie kształtów liter.
Czcionki Sans-serif zostały ogólnie uznane za łatwiejsze do odczytania na ekranie. Jednak przy większej liczbie użytkowników przeglądających w wysokiej rozdzielczości i ulepszeniach w technologii wygładzania czcionek, czcionki szeryfowe stały się bardzo czytelne dla tekstu głównego.
Duże nagłówki
Projektanci druków używają dużych nagłówków, aby przyciągać uwagę przez wieki. Materiały do druku musiały mieć duży wpływ, jeśli oczekiwano, że zostaną w ogóle odczytane. Gdybyś zobaczył nudną broszurę na biurku, zechciałbyś ją odebrać? Prawdopodobnie nie.
Trend ten rozpoczął się w 2009 roku i zyskał dopiero na popularności. Okazało się, że duże nagłówki przyciągają uwagę i komunikują się jasno.
Układy wielokolumnowe
Projektanci muszą pracować w ramach ograniczeń swojego medium. W przeciwieństwie do sieci, drukowanie nie oferuje opcji przewijania, ponieważ jest oprawiony według wymiarów papieru. Korzystanie z kilku kolumn pozwala zmieścić więcej treści w tym samym miejscu.
Teraz, dzięki zwiększonym rozdzielczościom ekranu i pojawianiu się układów gridowych, coraz więcej projektantów dostosowuje tę metodę do sieci, aby strony internetowe były łatwiejsze w użyciu i pasowały do większej ilości treści.
Big Lead Image
Obraz jest wart tysiąca słów. Choć może minąć trochę czasu, zanim zdjęcie będzie miało taki sam wpływ na sieć, jak ma to miejsce w przypadku druku (który ma znacznie wyższą rozdzielczość), przyjęcie dostępu szerokopasmowego sprawiło, że duże zdjęcia stały się bardziej wykonalne.
Zauważamy, że coraz więcej witryn korzysta z dużych, imponujących obrazów, aby przyciągnąć użytkowników i stworzyć wciągające wrażenia.
Diagramy i infografiki
Projektanci druków używają grafiki do przekazywania złożonych informacji przez lata. Widać to najczęściej w czasopismach i rocznych raportach.
Grafika może komunikować złożone relacje i współczynniki w sposób, który jest zbyt trudny do zrobienia za pomocą zwykłego tekstu. Infografie mają zwykle prosty, ale wizualnie bogaty wygląd, a coraz więcej projektantów wykorzystuje infografikę lub naśladuje styl w swoich projektach.
Prostota
Antoine de Saint-Exupery powiedział kiedyś: "Doskonałość osiąga się nie wtedy, gdy nie ma nic więcej do dodania, ale kiedy nie pozostaje nic do odebrania" . Zalety prostoty w projektowaniu są liczne.
Prawo Hicka mówi nam, że czas potrzebny do podjęcia decyzji zwiększa się wraz z każdą opcją. Dodatkowo teoria "sygnał do szumu" mówi nam, że wszystko, co nie dodaje się do wiadomości lub funkcji strony internetowej (sygnału), przeszkadza i sprawia, że projekt jest mniej skuteczny (hałas).
Proste projekty są łatwiejsze w użyciu i zrozumieniu, a także pozwalają na większą przejrzystość w przekazywaniu wiadomości.
Projekt minimalistyczny i siatka
Minimalizm jest potężny, ale trudny do opanowania. Zawiera tylko podstawowe informacje. Cała reszta jest usuwana, co skutkuje maksymalnym oddziaływaniem obecnych elementów.
Minimalistyczne projekty wymagają sprawnego systemu kratowego. Oczywiście będą miały dużo białej przestrzeni, a więc bez tej siatki minimalistyczny design będzie czuł się rozłączony i niechlujny. Siatka nadaje jej strukturę i strukturę.
Układy jednej strony
Istnieje kilka sposobów uproszczenia. Układ jednostronicowy ma dwa następujące sposoby: ukrywanie i usuwanie.
Skuteczne układy jednostronicowe ukrywają wszystkie elementy, które nie są priorytetowe. Jeśli użytkownik chce zobaczyć jeden z tych elementów, może kliknąć, aby go odsłonić. Jest to o wiele bardziej skuteczne niż pozostawianie wszystkiego widocznego, co sprawiłoby, że strona byłaby skomplikowana i przytłaczająca.
Podobnie zasada za układami jednostronicowymi sprawia, że dodatkowe strony nie są potrzebne. Dzięki dostępności potężnych bibliotek JavaScript i szybszym połączeniom wiele stron internetowych nie potrzebuje teraz kilku stron. Projektanci mogą łatwo dopasować informacje na jednej stronie, nie zawracając sobie głowy hierarchią.
Ogromna biała przestrzeń
We wczesnych dniach projektowania stron internetowych nie mieliśmy zbyt wielu ekranów, z którymi moglibyśmy pracować, więc nie pokazaliśmy zbyt wiele miejsca. Jeśli kiedykolwiek próbowałeś zaprojektować stronę internetową o rozdzielczości 640 × 480, będziesz dokładnie wiedzieć, o czym mówię.
Teraz, gdy mamy wyższe rozdzielczości i możliwość ukrywania i ujawniania elementów za pomocą JavaScript, wykorzystanie białej przestrzeni jest znacznie łatwiejsze.
Biała przestrzeń jest kluczowa dla dobrego projektu. Daje oko miejsce do odpoczynku. W naturalny sposób poprawia jakość projektu. Pokazuje również, które elementy są ze sobą powiązane poprzez bliskość.
Układy typograficzne
Podczas gdy ograniczaliśmy się do kilku "bezpiecznych czcionek internetowych", które miały bardzo niewielką kontrolę nad ich wyświetlaniem, mamy teraz szeroką gamę narzędzi wzbogacających naszą typografię.
Projektanci stron internetowych od dawna lubią używać typu jako subtelnego narzędzia do komunikowania wiadomości. Przy coraz większej kontroli i możliwościach coraz więcej projektantów skupia się na typografii jako głównym elemencie projektu.
Techniki CSS3
Nie jesteś pewien, czy możesz jeszcze skorzystać z CSS3? Pomyśl jeszcze raz. Pionierzy sieci, tacy jak Andy Clarke i Jeremy Keith, długo mówili o "progresywnym ulepszaniu" w projektowaniu stron internetowych.
Progresywne ulepszanie polega na projektowaniu stron internetowych, tak aby były one możliwe do zastosowania w starszych przeglądarkach, a jednocześnie "ulepszane" dla użytkowników, którzy angażują się w najnowsze technologie.
Projektowanie w tym obozie pozwala wykorzystać właściwości CSS3, takie jak zaokrąglone rogi, tła obramowania oraz cienie tekstu i pudła. Użytkownicy nowoczesnych przeglądarek zobaczą ładniejszą wersję, a te na starszej technologii ( kaszel | IE6 | kaszel ) zobaczą wersję podstawową.
Animacja CSS3
Animacja w sieci przebiegała przez wiele etapów. Początkowo mogliśmy animować tylko z plikami graficznymi GIF. Potem byliśmy ograniczeni do Flasha. Teraz możemy wybierać spośród Flash, Silverlight, GIF, JavaScript, a nawet CSS3. Subtelna animacja może być niezapomniana, a CSS3 czyni ją lekką i łatwą.
Zaokrąglone rogi
Styl Web 2.0 z 2005 i 2006 r. Sprawiał, że popularne filmy były zaokrąglone, aż do irytujących. W tym czasie ich tworzenie było trudne. Nie było ustalonego sposobu na tworzenie naprawdę zaokrąglonych narożników. Zamiast tego symulowano je za pomocą CSS, hacków JavaScript i plików graficznych.
CSS3 pozwala nam teraz generować zaokrąglone narożniki bezpośrednio w przeglądarce, co sprawia, że są nie tylko łatwiejsze w tworzeniu, ale także znacznie wydajniejsze, ponieważ użytkownik nie musi pobierać dodatkowych obrazów ani plików JavaScript.
Projektanci coraz częściej wykorzystują tę nową funkcjonalność przeglądarki w 2010 roku.
Cienie skrzyni i tekstu
Używanie cieni do tworzenia głębi zostało zrobione (i czasami przesadzone) od najwcześniejszych dni sieci. Ale nie zawsze było to praktyczne. Aby dodać cienie do tekstu, trzeba było użyć obrazów, które wydłużały czas ładowania i utrudniały konserwację. Cienie w pudełku wymagały kilku zdjęć i sztuczek CSS, takich jak "przesuwane drzwi".
CSS3 ma wysoce konfigurowalne możliwości cieniowania, które pozwalają na szeroki zakres kreatywnych efektów, w tym nie tylko cienie, ale także wewnętrzne cienie. Twórcy projektów wykorzystują już te efekty CSS3 do symulacji zarówno wytłoczonych, jak i nadrukowanych efektów.
RGBa i Krycie
Przez lata praca z kryciem i przejrzystością w sieci była prawie niemożliwa. Miałeś trzy możliwości: symulować przezroczystość za pomocą płaskich obrazów, radzić sobie z niezgodnością przeglądarek PNG lub zmagać się z podstawowymi przełącznikami i filtrami przezroczystości CSS.
CSS3 zapewnia projektantom znacznie większą spójność i swobodę w używaniu nieprzezroczystości z właściwością RGBa. Chociaż możesz korzystać z przezroczystości na niezliczone sposoby, jednym z obszarów, który pomógł, jest szczególnie w przypadku złożonych tła nałożonych półprzezroczystymi kolorami. Wcześniej efekt ten był niepraktyczny lub niemożliwy do stworzenia bez uciekania się do złożonych obrazów PNG.
Kompatybilny z urządzeniami mobilnymi
Sieć mobilna dała milionom użytkowników możliwość sprawdzania konta bankowego podczas oczekiwania w kolejce, sprawdzania najnowszych wyników w metrze i aktualizowania statusu Twittera podczas jazdy. (Który z nich jest niebezpiecznym nawykiem?) Sieć mobilna nadal szybko rośnie.
Doszliśmy do tego, że każda firma musi zastanowić się, czy ich strona internetowa będzie używana w ruchu, a jeśli tak, to w jaki sposób. Innowacyjne firmy już zainwestowały dużo w użyteczne i przyjazne dla użytkowników mobilne wersje swoich stron internetowych.
Kreatywność
Dynamiczny wzrost wykorzystania mediów społecznościowych jest dowodem na to, że ludzie chcą się łączyć i dzielić czymś, co ich pasjonuje.
W dziedzinie projektowania zaobserwowaliśmy duży wzrost w dzieleniu się i przeglądaniu pracy innych ludzi. Jako projektanci jesteśmy bombardowani twórczością innych. Nie tylko podnosi to standard jakości projektowania, ale zachęca do dzielenia się pomysłami, co przyczynia się do kultury kreatywności i innowacji.
Czyste ilustracje
Jeśli jesteś podobny do mnie, dorastałeś oglądając filmy Disneya, podziwiając wszystkie wysiłki, jakie przyłożono do stworzenia każdej klatki animacji. Minęły czasy, kiedy ilustracja została wykonana atramentem i markerami, a ta ewolucja narzędzi doprowadziła do bardzo twórczego podejścia do projektowania.
Wielu projektantów dowiaduje się, że gładkie, czyste, wyraźne ilustracje tworzą charakterystyczne wrażenie, którego nie można odtworzyć za pomocą fotografii lub prostych obiektów clipart. Rezultatem jest szeroka gama profesjonalnie ilustrowanych projektów, które są wciągające i zachęcające.
Teksturowane Tła
Teksturowane tła nie są niczym nowym w sieci. Ale w ciągu ostatnich kilku miesięcy technika ta okazała się interesującą odmianą. Nazywam to "mikrostrukturami", które są subtelnymi, ledwo zauważalnymi teksturami w tle.
Miniatury
Być może mówisz: "Miniatury istnieją już od zarania sieci. Jak to się dzieje? "To prawda, że zawsze były używane, ale tylko bardzo prosto. Masz miniaturę, którą możesz kliknąć, aby uzyskać większy obraz. Wykonało to zadanie, ale było nudne.
W ciągu ostatnich kilku miesięcy projektanci zaczęli pytać: "W jaki sposób możemy sprawić, by miniatury były bardziej ekscytujące?" Doprowadziło to do wzrostu liczby miniatur, które są zarówno sprytne, jak i użyteczne.
Akwarela
Wraz z rozwojem sieci, coraz więcej projektantów jest inspirowanych różnymi źródłami i mediami. Nic dziwnego, że sztuka jest jednym z tych źródeł.
Jednym z wyłonionych stylów jest symulacja akwarel. Delikatny i elegancki wygląd tego stylu jest wyraźny i uspokajający.
Pismo odręczne
Czcionki odręczne i skryptowe są nadużywane najbardziej. Z tego powodu wielu projektantów unika obu rodzajów, albo z obrzydzenia, albo ze strachu przed amatorskim wyglądem. Ale ostatnio wielu projektantów odkryło, że przy właściwym używaniu odręczny styl przekazuje poczucie rzemiosła i planowania. Używane w odpowiednim kontekście, to potężny sposób komunikacji.
Media społecznościowe
Ponieważ ludzie spędzają teraz więcej czasu na Facebooku niż Google, nic dziwnego, że projektanci szukają innowacyjnych sposobów na integrację mediów społecznościowych na swoich stronach internetowych.
Niektórzy projektanci posunęli się nawet do publikowania swoich treści w sieciach społecznościowych, a następnie wykorzystują swoje strony internetowe do ich agregacji.
Można śmiało powiedzieć, że wraz z rozwojem roku 2010 coraz więcej projektantów znajdzie twórcze sposoby na integrację mediów społecznościowych z ich stronami internetowymi w celu lepszego zaangażowania użytkowników.
Naprawiono elementy
Teraz przeglądarki lepiej obsługują position: fixed element, widzimy sprytniejsze zastosowania tego.
Istnieje wiele sytuacji, w których stały element (taki jak trwała nawigacja) może służyć celom biznesowym właściciela i sprawić, że strona będzie bardziej użyteczna.
Naprawione elementy są niezapomniane i zwiększają wygodę użytkownika. Mają niezliczone kreatywne zastosowania, a my nadal będziemy je wykorzystywać.
Ten post dla gości to współpraca dobrych ludzi w Web Hosting Search i projektanta i programisty Rossa Johnsona. Sprawdź, czy wyszukiwanie w Web Hosting jest prawidłowe hosting i 3point7designs dla większej estetyki projektowania stron internetowych przez Rossa
Które z tych trendów najbardziej podążasz? Jakie są inne pojawiające się trendy?