Projektowanie układów Web UI zabójcy z freebies - Ultimate Guide
Dziedzina projektowania stron internetowych nabrała tchu w ciągu zaledwie kilku lat. Na świecie jest teraz więcej aktywnych projektantów niż kiedykolwiek wcześniej, wszyscy współpracują przy innowacyjnych pomysłach na projekty. A koncepcje wielu z tych trendów zostały opracowane przez profesjonalnych projektantów graficznych.
Zanim zrozumiesz szczegóły budowy interfejsu użytkownika, może to potrwać miesiące lub nawet lata. Musisz wziąć pod uwagę rozmiary i rozmieszczenie elementów strony, a także czytelność tekstu i etykiet. Przy odrobinie wolnego czasu możesz zagłębić się w minimalistyczne podejście do budowania stron internetowych z mniejszym i mniejszym zamieszaniem. Nawet wtedy istnieją dziesiątki innych technik projektowania, które należy rozważyć.
W tym przewodniku połączyłem kilka nowoczesne techniki projektowania interfejsu użytkownika z gratisy można pobrać i baw się. Mam nadzieję, że będzie to stanowić motywację dla osób zainteresowanych karierą w grafice budowlanej / projektowaniu stron internetowych. Nawet profesjonalni projektanci stron internetowych mogą znaleźć kilka z tych trendów przydatnych w następnym projekcie.
Ćwicz z pełnymi szablonami
Gdy masz umiejętności projektowania własnego układu od podstaw, nie musisz zaczynać od szablonów. Z drugiej strony początkujący mogą czuć się bardziej komfortowo, poczynając od pełnego projektu i pracując nad drobnymi szczegółami.
Istnieje kilka doskonałych darmowych pobrań pełnych szablonów stron PSD dla portfeli, stron domowych, blogów i wielu innych kategorii. Są to idealne projekty, aby zacząć od zapoznania się z “generał” układ sieciowy. Każda strona internetowa będzie miała inne potrzeby dotyczące elementów strony i będziesz musiał określić, które elementy są ważne.
Oto przykład PSD o nazwie „AppCivilization”, zaprojektowany przez Martina Fabriciusa. Układ jest przeznaczony dla kreatywnego studia, które projektuje aplikacje mobilne i ewentualnie strony internetowe. Na dole znajdziesz mały panel ikon aplikacji prezentowanych w portfolio. Zauważysz również, że cały projekt jest podzielony poziomo na nagłówek, pokaz slajdów, główną treść i przyciemnioną stopkę.
Oryginalne źródło - Pobierz
Projektowanie stron docelowych
Spójrzmy na inny freebie, również zaprojektowany przez Martina. Ten następny przykład to strona docelowa, której można użyć do sprzedaży dowolnego rodzaju produktów. Zasadniczo są to towary cyfrowe, które mogą być pobierane przez użytkownika, tj. Aplikacje, zdjęcia, ikony, szablony itp.
Oryginalne źródło - Pobierz
Ale najlepszą częścią jego projektu jest to, że jest bardzo elastyczny dla początkujących do pracy. Nagłówek nadal wykorzystuje małą górną nawigację z dużym obrazem, ale w szczególności oczekiwane działania użytkownika są różne. On ma duży “Kup to!” przycisk, który wyróżnia się tuż nad fałdą. Na stronie docelowej produktu przyciągnęłoby to więcej uwagi niż pokaz slajdów jQuery.
Kolejną świetną techniką interfejsu użytkownika jest wyświetlanie funkcji małego iPhone'a w połowie strony. Martin zawiera podgląd podglądu iPhone'a, przycisk App Store oraz małą listę kluczowych funkcji. Gdy odwiedzający szukają szczegółów produktu, nie można uczynić rzeczy prostszymi niż za pomocą sformatowanej listy.
Więcej szablonów:
Oto kilka darmowych szablonów PSD, które wydaliśmy w karnecie:
- „Witryna biznesowa BiZ” Szablony PSD
- Szablon produktu PSD „ThinkJuice”
- Profesjonalna strona biznesowa Szablon PSD
- Szablon PSD „Polo360” Portfolio Site
Być może zainteresują Cię również następujące rzeczy:
- Szablony stron biznesowych
- Samouczki „Wkrótce” + szablony
Nawigacja na stronie głównej
Menu i przyciski są tylko narzędziami do tworzenia znacznie większych elementów strony. Nie ma wątpliwości, że główna nawigacja witryny ma bardzo istotny cel. Potrzebujesz go, aby Twoja witryna była łatwo dostępna z możliwymi metodami awaryjnymi dla użytkowników mobilnych.
Poniżej znajduje się fajny pasek nawigacyjny z efektem tekstury. Styl podświetlenia można opisać jako przyciemnione pole lub jako skierowaną w dół końcówkę wskazującą zawartość strony. Ten styl był widoczny przez lata i wygląda świetnie we właściwym otoczeniu.
Oryginalne źródło - Pobierz
Innym podobnym freebie jest ta teksturowana nawigacja nagłówka zaprojektowana przez Edi Gil. Naprawdę podoba mi się, jak ten drugi pasek nawigacyjny zawiera zarówno listę linków, jak i dodatkowe przyciski stron. Będziesz chciał zaoferować dodatkowe linki do użytkowników, w których mogą znaleźć Twoje profile w sieci.
Oryginalne źródło - Pobierz
Alternatywne style menu
Oprócz typowego poziomego paska nawigacyjnego należy wziąć pod uwagę inne style projektowania. Linki pionowe można podzielić na różne podtytuły, co pozostawia więcej miejsca na treść strony.
Weźmy na przykład menu freebie poniżej zaprojektowane przez stronę Icojam.
Każdy nagłówek jest zbudowany w celu rozwijania i zwijania na podstawie wybranego obiektu. Dodatkowo projekt pozwala na mały licznik liczb, aby siedzieć po prawej stronie każdej kategorii. Najlepiej wypełnij to jako nawigację blogową, aby policzyć, ile postów zostało złożonych w ramach każdego tematu.
Oryginalne źródło - Pobierz
Wskazówki nawigacyjne / samouczki:
- 50+ Czyste skrypty nawigacyjne oparte na karcie CSS
- Nawigacja nawigacyjna Najlepsze praktyki i przykłady
- Budowanie mobilnej nawigacji za pomocą jQuery
- Coding Breadcrumb Navigation W CSS3
- Projektowanie nawigacji za pomocą MNIEJ CSS
Czystsze formularze internetowe
Współczesny wiek Internetu jest daleki od statycznego miejsca spotkań. Użytkownicy nieustannie dzielą się informacjami i codziennie współpracują ze sobą. Większość tego tekstu i udostępniania multimediów jest zarządzana za pomocą formularzy internetowych.
Powinniśmy przyjrzeć się tylko kilku przykładom, w jaki sposób można zaprojektować czysto wyglądające wejścia i przyciski formularza. Projekt twoich elementów może w znacznym stopniu zachęcić odwiedzających do korzystania z nich. To z kolei zwiększa wiarygodność Twojej witryny i zwiększa liczbę odsłon.
Pola logowania
Do sprawdzenia jest kilka świetnych przykładów formularzy logowania PSD. To logowanie za darmo przez WP Scientist ma wszystkie standardowe elementy. Dwa pola wprowadzania danych logowania / hasła, przycisk przesyłania i pola wyboru do zarządzania plikami cookie sesji.
Ten model projektu jest idealny, jeśli możesz zaimplementować efekty za pomocą jQuery. Górna prawa strzałka sprawia, że myślisz o konfiguracji okna typu popup. Jest to wspaniała technika pozwalająca zaoszczędzić miejsce na Twojej stronie, ukrywając formularz, dopóki użytkownik nie kliknie łącza rejestracji.
Oryginalne źródło - Pobierz
Poniższy formularz można pobrać za darmo dzięki projektantowi Gil Huybrecht. Użył podobnego wzoru z ziarnistym tłem i teksturą papieru. To, co szczególnie podoba mi się w projektowaniu Gila, to „duże” elementy. Jest o wiele bardziej przyjazne lądowanie na formularzu logowania, który wypełnia całą stronę. Użytkownicy mogą łatwo zobaczyć, co piszą, i jest mniej bałaganu.
Oryginalne źródło - Pobierz
Jeśli masz doświadczenie jako programista frontendowy używający CSS3, to bardzo łatwo przetłumaczyć tę grafikę na kod. Możesz nawet zaimplementować wybrany efekt zewnętrznego blasku i zaokrąglone rogi dla przycisku i pól wejściowych.
Łączność
Inną formą, którą można znaleźć praktycznie na każdej stronie internetowej, jest formularz kontaktowy. Zwykle zawiera pola dla nazwy nadawcy, e-maila i treści wiadomości.
Poniższy darmowy przykład to wspaniały przykład użycia niestandardowych tekstur i ikon.
Projekt wykorzystuje również tekst zastępczy zamiast etykiet. Oznacza to, że gdy formularz pierwszy ładuje, każde pole jest ustawiane wartością domyślną (np. Twoje imię). Ale po rozpoczęciu wpisywania symbol zastępczy zostaje wyczyszczony, a zamiast tego wyświetlana jest treść. Wszystkie przeglądarki zgodne ze standardami będą obsługiwać ten efekt i mogą zaoszczędzić trochę miejsca na stronie.
Oryginalne źródło - Pobierz
Kolejnym wspaniałym darmowym narzędziem do pobrania jest formularz kontaktowy zaprojektowany przez utalentowanych Jonno Riekwel. Ten projekt jest znacznie prostszy i zawiera etykiety cech nad każdym wejściem. Jest to świetne rozwiązanie dla większych firm lub startupów, które muszą wysyłać wiadomości za pośrednictwem różnych działów w firmie.
Oryginalne źródło - Pobierz
Samouczki formularzy kontaktowych:
- Formularz logowania / rejestracji: pomysły i piękne przykłady
- Utwórz formularz logowania efektu skumulowanego papieru
- Utwórz formularz kontaktowy HTML5 / CSS3 oparty na Ajax
Wstążki i banery
Zaledwie 6 lub 7 lat temu zaokrąglone narożniki zaczęły rosnąć w popularnych trendach projektowych. Teraz poszliśmy jeszcze dalej z cieniami i narożnymi wstążkami.
Oryginalne źródło - Pobierz
Niektóre z tych elementów mogą być używane jako wyróżniki projektu, takie jak licznik komentarzy lub data publikacji bloga. Zszyta wstążka powyżej jest idealna dla portfeli lub stron projektu, na których chcesz zwrócić uwagę odwiedzających. Możesz także wypróbować podobną pionową wstęgę, w której wzór spada od góry.
Te małe efekty stron robią długą drogę, aby poprawić układ. Goście zwracają na to uwagę i pokochają te estetyczne uprzejmości. Należy jednak pamiętać, że małe taśmy narożne są tylko częścią tego trendu projektowego.
Oryginalne źródło - Pobierz
Dodatkowo pełne projekty banerów stały się szalenie popularne dzięki budowaniu rozpoznawalności marki. Możesz je wykorzystać w swoim logo, nawigacji, stronie głównej, a nawet na polecanych postach na blogu. Implikacje są praktycznie nieograniczone z dobrymi możliwościami projektowymi.
Wrapping the Corner
Kolejny bardzo specyficzny efekt wstęgi jest wykonywany przez owinięcie wzoru wokół rogu strony. Tworzy to iluzję, że twoja strona jest trójwymiarowa, a wstążka jest owinięta wokół górnej części witryny.
Poniższy projekt jest w 100% bezpłatny do pobrania i można go wykorzystać do własnych pomysłów na projekt. Możesz zobaczyć, jak przyciągnęłoby to uwagę odwiedzających i dlaczego ten trend stał się takim szaleństwem. Uważaj, aby nie nadużywać banerów. W dużych ilościach mogą one być bardzo irytujące, podobnie jak starsze błyszczące / lustrzane efekty „web 2.0”.
Oryginalne źródło - Pobierz
Projektowanie za pomocą przycisków
Oprócz hiperłączy możesz uzyskać najwięcej interakcji ze strony użytkowników za pomocą przycisków. Te elementy strony mogą wykonywać wszystko za pomocą wywołań jQuery i Ajax, z wyjątkiem tego, że można również użyć przycisków do łączenia ze statyczną zawartością, takich jak np. Pobieranie freebie.!
Zestaw interfejsu użytkownika poniżej, zaprojektowany przez Matt Gentile ma dużo więcej niż tylko przyciski. Jego zestaw PSD jest fantastyczny dla początkujących, którzy chcą wybrać gradienty i tekstury do budowania podobnych form. Często w zestawach interfejsu użytkownika znajdują się przyciski o wyższej jakości niż w przypadku pojedynczych PSD.
Oryginalne źródło - Pobierz
Jak tworzyć wariacje
Podczas spędzania czasu na ćwiczeniu tych technik będziesz chciał stworzyć wiele różnych stylów z czasem. Może to spowodować przełączanie podobnych przycisków między różnymi projektami i układami. Dobrym przykładem jest zestaw przycisków mlecznych oferowanych przez projektanta Robert van Klinken.
Oryginalne źródło - Pobierz
Każdy z trzech oryginalnych przycisków ma inny styl gradientu, z wyjątkiem stanów najechania i aktywnych, które wyglądają podobnie. Podczas pracy w Photoshopie musisz dopasować kolory między gradientami lub przenieść kolory na warstwę efektów. Dzięki temu zrozumieniu możesz nawet zbudować własny zestaw freebie przycisków do pobrania!
Oryginalne źródło - Pobierz
Tekstury drewna + papieru
Jeśli chcesz urozmaicić swoje podstawowe projekty układów, będziesz musiał przejść do bardziej sprytnych metod. Tekstury są zawsze mile widziane, jeśli można je odpowiednio zaimplementować za pomocą tła CSS lub treści o ustalonej szerokości. A dwie z najpopularniejszych tekstur, jakie widziałem, to drewno i puste papiery.
Pomysł na notatnik jest naprawdę prosty, ale może przekształcić się w fajny projekt marki, jako część elementu interfejsu użytkownika lub wbudowany w cały układ. Ale papier sam w sobie nie zawsze wygląda najlepiej, a inna tekstura może pomóc w połączeniu stylów. To jest miejsce, w które mogą wchodzić bardziej szczegółowe tekstury drewna.
Oryginalne źródło - Pobierz
Obrazy będą się wyróżniać i wyglądać cudownie owinięte w zewnętrzną skorupę. Cała koncepcja tekstury polega na nadaniu witrynie specyficznego uczucia lub emocji. Motywy drewna mogą wywoływać poczucie domu i natury. Jeremiah Wingett oferuje nawet niesamowity drewniany zestaw interfejsu użytkownika. Jeśli czujesz się kreatywny, spróbuj połączyć kilka własnych tekstur i zobacz, jak działają w środowisku internetowym.
28 Tekstury drewna wysokiej rozdzielczości
Wniosek
Najlepsi projektanci stron internetowych to ci, którzy ćwiczą codziennie i nigdy nie pozwalają, by ich porażki zniechęciły ich do ostatecznych celów. Musisz być szybki i szybko reagować zarówno na sukces, jak i nieudane próby. Wskazówki i gratyfikacje zawarte w tym przewodniku powinny być dobrym punktem wyjścia do rozpoczęcia nauki tworzenia różnych koncepcji stron dla projektu internetowego. Chcielibyśmy przeczytać twoje przemyślenia na ten temat w obszarze dyskusji.
