15 trendów w projektowaniu stron internetowych, na które trzeba uważać w 2012 roku

Jak dotąd rok 2011 przyniósł niesamowite zmiany w projektowaniu i technologii internetowej. Tworzenie stron internetowych stało się o wiele łatwiejsze do opanowania, nie wspominając o niezliczonych bibliotekach open source użytecznych w usprawnianiu procesu. A jednak wydaje się, że globalna społeczność projektantów jest daleka od rzucenia ręcznika.

Chcę przedstawić 15 pomysłów, które bardzo szybko wzrosły w ciągu ostatniego roku. Tendencje te obejmują techniki projektowania stron internetowych i grafiki, które prawdopodobnie odegrają dużą rolę w 2012 roku. Prawdopodobnie widziałeś kilka z nich w wielu swoich ulubionych witrynach online.

Na szczęście metody implementacji tych funkcji stają się coraz łatwiejsze do zrozumienia i znacznie cieńsze w kodzie.

1. Elastyczny projekt interfejsu

Doświadczenie przeciętnego użytkownika jest prawdopodobnie najważniejszym aspektem do rozważenia przy projektowaniu strony internetowej. Chcesz, aby elementy strony reagowały szybko na wejście klawiatury / myszy i zachowywały się zgodnie z oczekiwaniami. Niektóre przykłady mogą obejmować boczne menu rozwijane, listy rozwijane i okna wyskakujące.

Uwzględniając słynne biblioteki JavaScript, takie jak MooTools i jQuery, znacznie łatwiej animować te funkcje, a nawet więcej. Większość współczesnych przeglądarek obsługuje ten kod, a nawet łagodnie degraduje się, gdy skrypty nie są dostępne. Ostatecznie chcesz, aby użytkownik czuł się komfortowo podczas interakcji z dowolnym elementem projektu.

Podobnie należy wziąć pod uwagę dane wejściowe formularza i sprawdzanie danych. Na wielu stronach rejestracji otrzymasz małe odpowiedzi podczas pracy z każdym obszarem wejściowym. Możesz zautomatyzować sprawdzanie poprawnych adresów e-mail, zduplikowanych nazw użytkowników, a nawet podwójnie sprawdzić dane wejściowe hasła. Pozwoli to zaoszczędzić czas po stronie użytkownika i zapewni wygodny przewodnik podczas procesu rejestracji.

2. Urządzenia przenośne z ekranem dotykowym

W ciągu ostatnich kilku lat stało się oczywiste, że smartfony zyskują poparcie nawet wśród entuzjastów technologii. Ale dopiero od 2011 roku zaobserwowaliśmy eksplozję witryn mobilnych i szablonów dla urządzeń mobilnych.

Popularność urządzeń iPhone i iPad wraz z telefonami wyposażonymi w system Android oznacza, że ​​użytkownicy będą mieli pełną interakcję ze stronami za pomocą poleceń dotykowych. Przy każdej makiecie projektowej musi to stać się realistyczne. Trendy w mobilnym projektowaniu stron internetowych pokazały, że stworzenie całkowicie oddzielnego motywu mobilnego często zapewnia najlepsze rezultaty. W ten sposób możesz zachować całą dynamiczną zawartość na swoim głównym layoucie, jednocześnie obsługując odchudzoną wersję witryny dla użytkowników mobilnych.

3. Tony Freebies!

Kto może powiedzieć, że szczerze nie korzysta z bezpłatnych plików do pobrania? Projektanci stron internetowych od lat dzielą się swoimi treściami online, ale dopiero niedawno stało się to bardzo popularnym trendem wśród artystów cyfrowych. Powstało kilka społeczności, które oferują bezpłatne pliki do pobrania dla projektantów stron internetowych i grafików.

Dwa z moich osobistych ulubionych to Pobierz PSD i Designmoo, z których oba są często aktualizowane przez najwyższej jakości członków. Dodatkowo archiwum Freebies Hongkiat zawiera mnóstwo słodkich przysmaków do sprawdzenia. W każdej epoce, zanim dosłownie nigdy nie było tak łatwo pobrać darmowe interfejsy internetowe, układy, logo, banery i praktycznie każdy inny typ pliku PSD / AI!

Niektóre fajne pliki do pobrania

Poniżej przedstawiamy kilka fajnych darmowych gadżetów do sprawdzenia z wcześniejszych wersji 2011 roku. Jeśli uważasz, że ta lista zawiera kilka świetnych plików, poczekaj do 2012 roku.!

Zestaw Mini Web UI

Dark Mini Music Player

Przesuwne tagi

Suwak Dark Photo

Pola wyszukiwania

Zaloguj się / Formularz logowania

Zaloguj się Modal Box

Czysty formularz logowania

Tabele cenowe

Minimalne słupki ładowania

Załącznik Pop-up

4. Standardy HTML5 i CSS3

Oba te nowe archetypy projektowe narastają w ciągu całego 2011 roku. Projektanci stron internetowych semantycznych czekają lata, aby wypuszczać projekty wyłącznie w stylu CSS renderujące zaokrąglone rogi i cienie. Dodatkowo W3C poczynił wiele postępów w pozyskiwaniu wsparcia z najpopularniejszych przeglądarek.

Widzę tylko dobre rzeczy na przyszłość tworzenia stron internetowych HTML5 / CSS3. Projektanci front-end są często pomijani w dzisiejszej dziedzinie, ale mają tak wielkie znaczenie dla całego procesu tworzenia. Staraj się nie wciskać się w żadną „etykietę” opartą na technikach, które znasz i ćwiczysz codziennie. Oferujemy instrukcje dla początkujących dotyczące kodowania HTML5 / CSS3, jeśli czujesz potrzebę nadrobienia zaległości.

Trzymanie się tych nowych standardów ułatwi także rozwój w JavaScript i jQuery. Programiści już publikują i udostępniają swój kod projektu HTML5 / CSS3 online, a jeśli wszystko będzie kontynuowane, z pewnością zauważymy o wiele więcej tego w przyszłym roku.

5. Wstążki i banery

Chociaż ta technika projektowania nie jest dokładnie taka “Nowy” nigdy naprawdę nie przedarł się przez mainstream aż do niedawna. Prawdopodobnie widziałeś przykłady wstążek narożnych, pasków nawigacji banerów i małych odznak wstążki. Te trendy prawdopodobnie wybuchły z powodu ogromnej akumulacji szczegółowych samouczków, które można znaleźć w Google.

Projektanci stron internetowych są obecnie bardziej kompetentni w uruchamianiu własnych blogów, aby udostępniać informacje. Teraz proste techniki mogą być łatwo przekazywane między projektantami, aby powielić najpopularniejsze efekty. Istnieją nawet darmowe PSD, które można pobrać, aby oszczędzić sobie wysiłku.

6. Premium WordPress Themes

Ostateczna wersja WordPress 3.0 zawiera wiele długo oczekiwanych funkcji, takich jak niestandardowe typy postów i unikalne obrazy artykułów. Jednak najgłębsze zmiany, jakie widziałem, pochodzą ze sklepów programistycznych WordPress, które specjalizują się w motywach WP premium.

Po zakupie takiego motywu proces instalacji jest podobny do każdego innego. Jednak teraz możliwe jest dołączenie niestandardowej funkcjonalności wtyczki, motywów potomnych, nowych menu administratora i całej gamy innych funkcji bezpośrednio z motywu! WooThemes, ElegantThemes i Rocket Themes to tylko kilka marek, które wyróżniają się przede wszystkim. Ich jakość jest nienaganna i czuję, że ich programiści wykraczają poza możliwości tworzenia najlepszych szablonów i najbardziej intuicyjnych menu administracyjnych.

W 2012 roku mogę sobie tylko wyobrazić, że WordPress stanie się jeszcze łatwiejszy w użyciu. Oznacza to, że zostanie wydanych więcej wysokiej jakości motywów i jeszcze więcej niesamowitych blogów.

7. Czasopisma online

Mówiąc o tematach WordPress, powinniśmy także poruszyć szybko przyjęty sukces czasopism internetowych. Te strony internetowe nie różnią się tak bardzo od żadnego ogólnego bloga WordPress, oprócz ogólnej struktury i układu strony. Możesz zobaczyć te większe magazyny dzięki czystej prezentacji ich strony głównej i kolekcji autorów piszących na stronie.

W miarę jak czasopisma zaczynają się poruszać online, staną się źródłem dochodów dla wielu pisarzy. Przyznany temat, taki jak „projektowanie stron internetowych”, jest skierowany do mniejszej niszy niż, powiedzmy, gry lub ekonomia. Ale fakt, że widzimy więcej czasopism projektowych online niż drukowanych, pokazuje, gdzie w nadchodzących latach może zmierzać świat.

8. Łatwe cienie

Jako aspekt CSS3 projektanci mogą teraz łatwiej niż kiedykolwiek zaimplementować cień na stronie. Tekst skrzynki i elementy w stylu skrzynki otrzymały odpowiednie właściwości, aby zapewnić wyraźne efekty cienia.

Składnia cienia tekstu jest bardzo łatwa do zapamiętania i podąża za nią jak cień pudła. Ponieważ obrazy nie są już potrzebne do renderowania tych efektów, programiści mogą skupić się na dalszym rozwijaniu tych podstawowych pomysłów.

9. Typografia dynamiczna

Czcionki są dużą częścią sfery obejmującej tradycję projektowania stron internetowych. Najbardziej godne uwagi czcionki, w tym Arial, Helvetica, Georgia i Trebuchet MS, istnieją już od lat. Mimo że nadal służą głębokim celom standardów internetowych, istnieje wiele alternatywnych opcji zaawansowanej typografii stron internetowych.

Na przykład Typekit wymaga tylko kilku linii kodu, aby umieścić je w głowicy dokumentu. Następnie możesz określić, które nazwy czcionek mają zostać dołączone i dodać je do swojego CSS. Najlepsze w tej technice jest to, że opiera się głównie na JavaScript, więc użytkownik końcowy nie musi instalować czcionek.

Inną alternatywą są czcionki internetowe Google, które zachowują się w podobny sposób jak typekit. Polecam zainteresowanym projektantom, aby sprawdzili zapytanie CSS3 @ font-face media, ponieważ otrzymujesz znacznie więcej kreatywności. Ten kod może zostać użyty do importowania .ttf lub .otf plik czcionki z serwera WWW i dołącz go jako użyteczną czcionkę arkusza stylów! Przy tak wielu alternatywnych systemach wykorzystywanych do budowania dynamicznych czcionek oczekuję, że w 2012 r. W tym obszarze nastąpi gwałtowny wzrost liczby innowacji i talentu projektowego.

10. Pokazy slajdów w Galerii obrazów

Wraz z późniejszą popularnością jQuery zauważyłem, że coraz więcej pokazów slajdów jest umieszczanych w układach internetowych. Galerie są idealne do pokazania szybkiego podglądu zawartości strony wewnętrznej. Może to być zestaw wpisów do portfolio, zdjęć, wpisów na blogu z polecanymi obrazami, zrzutów ekranu demonstracyjnego itp.

Biorąc pod uwagę wiele unikalnych animacji przesuwnych i zanikających, nigdy nie było łatwiej zbudować szybki pokaz slajdów na stronie głównej. Jestem przekonany, że w 2012 r. Te trendy będą coraz większe, a nie tylko między projektantami. Aplikacje internetowe i firmy produkujące oprogramowanie wykorzystują pokazy slajdów jako samouczki z przewodnikiem do wyświetlania zrzutów ekranu i unikalnych funkcji.

11. Modalne skrzynki podręczne

Uważam, że modalne pudełka są wciąż dość nowe w Internecie, biorąc pod uwagę, że od lat pojawiają się w oprogramowaniu komputerowym i aplikacjach mobilnych. Celem okna modalnego jest oferowanie zawartości pudełka (takiej jak rejestracja lub logowanie użytkownika) na wierzchu bieżącej strony bez ładowania na nową stronę.

Wiele skryptów galerii obrazów o otwartym kodzie źródłowym wykorzystuje rodzaj efektu lightbox, w którym tło zanika ciemniej niż wyskakujące okienko. Naprawdę podoba mi się ta funkcja, gdy tylko ją zobaczę, chociaż nie została jeszcze przyjęta przez wielu. I chociaż modalne pudełka są seksowne i eleganckie, mogą być również bardzo trudne do kodowania i poprawnego działania.

Aby uzyskać pomysły na własne strony internetowe, sprawdź niektóre z popularnych społeczności społecznościowych. Reddit i Digg to pierwsze dwa, które przychodzą na myśl, ponieważ oba zawierają modalne skrzynki rejestracyjne / logowania o typowym układzie. Dodatkowo efekty interfejsu użytkownika w Google+ oferują znaczną ilość modalnej funkcjonalności.

12. Inspirujące listy

Kolekcje elementów listy pojawiły się od pierwszych dni projektowania stron internetowych. Gdy przeprowadziliśmy się do nowego stulecia, projektanci zaczęli używać uporządkowanych i nieuporządkowanych list HTML do przechowywania menu nawigacyjnych. Ale dzisiejsze listy mogą i są używane o wiele więcej.

W większości motywów blogów znajduję cały pasek boczny z listami! Nie wspominając o projektantach, którzy stworzyli niesamowite style CSS dla list w swoich artykułach. Na początku tego roku omówiliśmy inspirujące style list w innym poście, co może dać ci więcej informacji na ten temat. Patrząc w przyszłość w 2012 r., Spodziewam się naprawdę kreatywnych przykładów, być może na równi z niestandardowym układem Flowapp dla zadań i zadań.

13. Wygenerowane miniatury obrazów

We wszechświecie internetowym możemy zgodzić się, że treść jest królem. Ale większość projektantów zgodzi się również, że strona pustego tekstu szybko staje się nudna. Obrazy mogą dodać tę dodatkową przyprawę, jeśli wiesz, jak delikatnie je posypać. Jedną z takich metod jest użycie dynamicznych miniatur do wyświetlania podglądu każdej strony lub artykułu.

Dzisiejsze blogi nadal przyjmują trend z popularnym obrazem, więc dlaczego nie zastosować wygenerowanych miniatur również do swojego motywu? Często zwracają moją uwagę na nagłówek artykułu i pomagają rozbić stronę pełną linków tekstowych.

Jako inny przykład Dribbble oferuje całą galerię z listą miniatur dla każdego ujęcia projektowego. W takim układzie tabeli w wierszu bardzo łatwo jest uchwycić każdą miniaturę i przewinąć, aby znaleźć to, czego szukasz. Ta taktyka okazała się przyciągać uwagę całej społeczności projektantów! Er, przynajmniej członkowie Dribbble w najlepszym razie. Mogę jedynie oczekiwać, że w 2012 r. Zobaczymy dalszy wysiłek tych pomysłów, opierając się na takich przykładach z przeszłości.

14. Zbyt duże ikony

Ten wyjątkowy trend wywodzi się częściowo z popularności projektów ikon Mac OS X. Gdy programiści zaczęli uruchamiać strony internetowe dla swoich aplikacji na komputery Mac, zbyt często widzieliśmy ogromne rozmiary reprezentowane przez branding. W związku z tym trend ten został również podniesiony przez programistów iOS i teraz wygodnie mieści się w nowoczesnej kulturze projektowania.

Trudno przewidzieć, w jaki sposób te trendy będą sprawiedliwe, gdy przejdziemy do roku 2012. Z jednej strony ikony te mogą być niezgrabne i zajmować więcej miejsca niż to konieczne. Jednak nie jesteśmy nawet bliscy uderzenia w niedostatek aplikacji iOS / OSX, a projektanci wciąż tworzą niezrównane piksele. Nie wspominając już o tym, że projektanci stron internetowych dołączają teraz ponadgabarytowe ikony do niemal każdej marki! To dobry sposób na przyciągnięcie uwagi użytkownika i stworzenie nazwy dla firmy.

15. Przesadzone hiperłącza

Linki do kotwic są z pewnością w pierwszej piątce najważniejszych elementów każdej strony internetowej. Od lat dziewięćdziesiątych minęło wiele czasu, a popularne trendy w projektowaniu rosną tylko w postępie geometrycznym. Wygląda na to, że wkraczamy w erę, w której przesadzone wzornictwo ma pierwszeństwo.

Sprawdź kilka przykładów linków z Patterntap, aby zobaczyć, czy jakaś wyskoczysz i przyciągniesz wzrok. Jest tak wiele niesamowitych pomysłów na projektowanie hiperłączy, zarówno w efektach standardowych, jak i hover. Zaokrąglone narożniki CSS3, cienie tekstu i niestandardowe rodziny czcionek dodają jeszcze więcej wspaniałych pomysłów! Jednym z moich ulubionych przykładów jest SimpleBits, który używa krótkiej dynamicznej animacji na każdym z permalinków na swoim blogu.

Wniosek

Te pomysły to tylko niektóre z bardziej popularnych trendów, które zauważyłem, zdobywając pierwszeństwo w całym 2011 roku. Świetne projektowanie stron internetowych zawsze skupia się na skupieniu i utrzymaniu intencji użytkownika jako najwyższego priorytetu. Jest mało prawdopodobne, aby te filozofie różniły się w 2012 r., Ale sposób, w jaki budujemy układy i obecne dane, jest zawsze zmieniany. Poinformuj nas o swoich przemyśleniach lub pytaniach w obszarze dyskusji.