Projektowanie wskazówek dotyczących intensywnego układu treści i przykładów
Tworzenie wszechstronnych układów dla sieci wymaga umiejętności i poświęcenia. Projektanci stron internetowych wykonują pracę tam, gdzie większość z nich nie jest w stanie, i w bardzo wyrafinowany sposób. W miarę ewolucji stron internetowych widzieliśmy potrzebę zapełnienia większej ilości miejsca i przechowywania większej ilości treści niż kiedykolwiek wcześniej. Jeśli już wiesz, jak zaprojektować stronę internetową, jest to ogromny bonus w kierunku lepszego zrozumienia tych metod. Podstawowe funkcje na stronie internetowej rzadko się zmieniają. Jednak z ponadprzeciętną zawartością strony w grę wchodzą inne czynniki, w tym biała przestrzeń, typografia, pozycjonowanie elementów, między innymi.
Będziemy szczegółowo omawiać kilka ważnych wskazówek dotyczących tworzenia układów intensywnie korzystających z treści. Mogą to być aplikacje sieci społecznościowych, duże witryny firmowe i korporacyjne lub cokolwiek pośredniego. Ważne jest, aby zadać sobie pytanie „co próbuję osiągnąć dzięki temu projektowi?„kiedy projektujesz strony, ponieważ pomoże ci to przewidzieć szerszą perspektywę.
Niestandardowe strony internetowe
Bez względu na to, jak doświadczony możesz być w praktycznym projektowaniu stron internetowych, to prawda, że wszyscy musieliśmy gdzieś zacząć. Projektowanie niestandardowych stron internetowych jest na ogół pierwszym krokiem do kariery w programowaniu stron internetowych przed zastosowaniem konwencjonalnych specyfikacji.
Zawsze zalecam utworzenie małej listy elementów strony uważanych za zainstalowane w szablonie. Kiedy już wszystko zostanie spisane, łatwiej będzie pozbyć się złych pomysłów lub zdobyć zapomniane lub zapomniane klejnoty. To także otwiera drogę do łatwego planowania, aby zmniejszyć stres na drodze.
Układ szkieletowy
W przypadku ogólnej 5-stronicowej strony internetowej często widać te same elementy powtarzane. Logo górnego rogu, linki nawigacyjne na głowicy, główny obszar zawartości prawdopodobnie podzielony na pasek boczny i inne funkcje (logowanie, pole wyszukiwania itp.).
Rozważmy dobry punkt wyjścia do rozwinięcia szczegółowych układów stron. Wielu projektantów uważa za pomocne naszkicowanie możliwych wzorów szkieletowych, aby wykluczyć nie tak oczywiste wady. Nie wymaga to żadnego wyszukanego papieru i może być nawet wykonane w zaniedbanym, rządzonym notesie. Celem modelu szkieletowego jest przybliżenie, gdzie powinien wyglądać układ strony, aby wypełnić szczegóły później.
Przy ciężkich układach treści należy wziąć pod uwagę, ile będzie zawierać platforma. Zbudowanie zamkniętego 2-3-kolumnowego układu do obsługi ponad 100 stron długiej, skomplikowanej treści nie pozostawi wiele miejsca na oddychanie. Szkicując i planując z wyprzedzeniem, możesz kontrolować ilość przestronnego pokoju na zawartość strony. To nie tylko enkapsuluje obszary tekstu lub blokuje, ale także zajmuje się obrazami i filmami.
Brilliant White Space
Możliwe są białe odstępy najważniejszy czynnik do wzięcia pod uwagę przy projektowaniu układu intensywnej treści. Zasada treści witryny jest alll, bardziej niż jakakolwiek zwykła strona internetowa. Jeśli czytelnicy nie są w stanie zrozumieć treści, ponieważ nie ma miejsca na przetrawienie słów, ruch będzie nierówny i niezadowolony.
Akapity i nagłówki stron są doskonałym miejscem na rozpoczęcie dostosowywania. Używając właściwości CSS powinieneś być w stanie manipulować zewnętrznymi marginesami i dopełniać każdy element tekstu wiersza. Obejmują one wszystkie nagłówki 1-6, akapity, cytaty blokowe, listy, wstępnie sformatowany tekst i kilka mniejszych elementów.
Jeśli chcesz zatrzymać uwagę czytelnika, ważne jest, aby zastosować odstępy między głównymi elementami tekstu. Akapity i mniejsze nagłówki działają najlepiej w przypadku dolnych marginesów 15px-25px. W przypadku większych elementów strony, takich jak h1 lub h2, rozważ 35px + (zależy to również od rozmiaru czcionki). Przestrzenie między elementami pionowymi są ważne przy przewijaniu i skanowaniu „na pierwszy rzut oka”. jednak Wysokość linii to kolejna ważna właściwość CSS, która wpływa na odstępy między liniami w elemencie tekstowym. Akapity powinny mieć znacznie większą wartość wysokości linii w porównaniu z ich rozmiarem czcionki, więc jest wiele dodatkowych wypełnień między liniami.
Rozważ dynamiczne style
Oprócz odstępów, typografia cyfrowa należy manipulować w taki sposób, aby zeskoczyć ze strony. Z setkami milionów witryn w dzisiejszym świecie często spotyka się ten sam typ czcionki wszędzie.
Jeśli projektujesz stronę internetową ciężką od treści, wynik będzie wyglądał jak kolejny nijaki szablon do końca. Istnieje wiele właściwości do zabawy z zaawansowanymi stylami typograficznymi. Cienie tekstu, mniej / więcej odstępów między literami, platformy tła, ikony… lista jest nieskończona.
Naprawdę jesteś projektantem, a twoim ostatnim słowem jest prawo. Projektowanie układu nie jest porównywalne z jednopasmową autostradą bez zmiany trasy. Podczas tego procesu możesz cofać się i zmieniać style, manipulować nowymi elementami lub całkowicie niszczyć koncepcję. Rozważ kilka innych przydatnych wskazówek CSS i pobaw się, aby zobaczyć, co najlepiej pasuje!
Wykorzystaj rozwijane menu
Przy tak dużej zawartości mało prawdopodobne jest, aby wszystkie linki pasowały do jednej strony. Istnieje wiele opcji dotyczących obsługi przeciążenia stron. Umieszczenie dodatkowych linków w blokach paska bocznego lub przyszycie do kolumn w stopce witryny to dwie celowe opcje.
Najbardziej wygodnym i wygodnym wyborem jest utworzenie rozwijanego schematu nawigacji z kategoriami głównymi i podkategoriami. Istnieje również wiele skryptów open source, które oferują podkategorie, jeśli masz bardzo szczegółowe tematy.
Prawdopodobnie najszybszą i najmniej frustrującą strategią jest rozpoczęcie od struktury JavaScript. Niektóre z najpopularniejszych to jQuery, MooTools lub prawdopodobnie Prototype. Wszystkie te biblioteki oferują dokumentację, a wiele z nich ma dostępne darmowe skrypty menu rozwijanego.
Zaplanuj widoki treści
W praktyce znacznie trudniej jest stworzyć uproszczony obszar ciała, aby pomieścić wszystkie treści, które zawiera przeciętna strona internetowa. Przy zmieniających się standardach przeglądarek i częściowo tandetnej obsłudze mobilnej nic dziwnego, że widzimy takie treściochłonne strony internetowe zestrzelone. Bądź wrażliwy na każdy styl wyświetlanej strony internetowej. Niektóre będą zawierać wiele obrazów, inne mogą zawierać główną grafikę lub wideo lub w ogóle brak grafiki. Po zakończeniu kodowania ostatecznego układu utwórz wiele stron HTML, aby pomieścić różne widoki.
Wszystkie będą miały ten sam wewnętrzny znacznik, z wyjątkiem zawartości wewnątrz głównego obszaru zawartości. Każdy indywidualny widok strony może być manipulowany i zapewnia wgląd w gotowy produkt. Przełącz to, aby zawierało wszystkie główne widoki, które według ciebie będą potrzebne przy każdej stronie. Inne przykłady elementów strony mogą obejmować pola komentarza, filmy lub osadzone galerie lub łącza podzielonej strony.
Zaplanuj dokładnie strategie
Prawdę mówiąc, nie jest wcale trudno stworzyć układ sieciowy. Wielu projektantów dowiaduje się o drobnych szczegółach, takich jak zakładanie elementów blokowych lub kolorowe hiperłącza. Te szczegóły są ważne, ponieważ wysyłają wiadomość brandingową, nawet z mniejszych elementów wiadomość powinna się połączyć z całością strony. Umysłowo zaplanuj etapy swojego projektu, aby dowiedzieć się, jak najlepsze podejście do każdej przeszkody. Jeśli pracujesz z klientem, dobrze byłoby przedyskutować, jaki rodzaj treści będzie wcześniej wypełniał strony. Daje to możliwość zaplanowania i zaplanowania najlepszego podejścia do ogólnego układu.
Kolejnym szczególnie interesującym tematem jest mobilny projekt. Ten nowy rynek ma ogromną ekspansję nie tylko na smartfony, ale także na wydajne tablety. Oznacza to, że użytkownicy mogą uzyskiwać dostęp do Twojego układu z ekranu telefonu komórkowego - upewnij się, że zawartość nie jest przepełniona i że jest ładnie prezentowana.
7 Przykłady stron internetowych o dużej zawartości
Poniżej znajduje się kilka przykładowych zrzutów ekranu z popularnych witryn o dużej zawartości. Są to głównie znane marki zarówno na rynku fizycznym, jak i cyfrowym. Sprawdź niektóre z poniższych pomysłów, aby znaleźć inspirację we własnych projektach. W sekcji komentarzy możesz również udostępniać inne, ciężkie strony internetowe.
Metrampaż
Clicker to nowa aplikacja społecznościowa dla miłośników telewizji i filmów. Możesz zarejestrować nowe konto i znaleźć swoje ulubione klasyczne programy telewizyjne, zarchiwizowane według sezonu i listy odcinków. Możesz porównać witrynę do IMDB z mniejszą ilością informacji i większą ilością treści wideo!
Przyszłość projektowania stron internetowych
Future of Web Design 2011 wprowadzi na rynek w Londynie nadchodzącą wiosnę. Sprawdź stronę główną, aby uzyskać więcej informacji i świetny przykład projektowania układu tekstu. Wszystkie szczegóły są autentycznie udostępniane i oferują prelegentów, harmonogramy, warsztaty, sponsorów i wiele innych.
Lord Likely
W tym komicznym układzie główny bohater Lord Likely został „nakręcony” i perforowany na ilustrację. Witryna jest podzielona na 3 kolumny, z których każda zawiera nowe treści sportowe, reklamy, linki do kanałów i archiwa. Sam projekt jest bardzo retro i sprytny w projektowaniu ilustracji.
Microsoft
Większość entuzjastów technologii zna Microsoft. W rzeczywistości większość ludzi, którzy rozumieją, czym jest komputer, może ci podać krótki opis Microsoftu i Billa Gatesa. Ich strona główna zawiera treści dla dziesiątek pakietów oprogramowania, aktualizacji wiadomości, informacji prasowych i informacji dla programistów. Nieco w dół strony możesz zobaczyć pionowe menu karty z dynamicznym przełączaniem zawartości.
Kraina wyszukiwarek
Wyszukiwarka Land to popularny magazyn internetowy skupiający się na wyszukiwarkach i marketingu internetowym. Często aktualizują się dzięki niesamowitym wpisom wysokiej jakości i codziennie wypuszczają setki tysięcy osób na swoją stronę. Główna strona dzieli się na 3 kolumny używane do przechowywania każdego modułu treści i reklamy.
Biały Dom
Projekt Białego Domu w Stanach Zjednoczonych wygląda bardzo czysto i profesjonalnie. Istnieje wiele informacji dotyczących harmonogramu prezydenta i innych ważnych wydarzeń politycznych. Jednym ze sposobów na złagodzenie pokoju na stronie jest dodanie małego suwaka treści do nagłówka strony. Świetnie nadaje się do wyświetlania 3-4 dużych nagłówków wiadomości, gdy użytkownicy wylądują na stronie.
Portal Yahoo
Jeśli chodzi o duże witryny z treścią, przejdź do Yahoo! musi zmierzać w kierunku szczytu. Wieśniak! oferuje swoim klientom setki usług, w tym pocztę internetową, wiadomości, filmy, a nawet wyszukiwanie w sieci. Sprawdź niektóre z Y! odsyłacze do portalu z paska bocznego, aby zobaczyć, jak porównują się ich szablony.
Wniosek
To tylko niektóre z kluczowych punktów i kroków do zbudowania konkretnych układów wymagających treści. Strony internetowe z dużymi zbiornikami są często postrzegane jako obciążenie trzymające paszę SEO i nic o realnej wartości. Design to wszystko, ponieważ jest to pierwsze wrażenie, jakie użytkownik otrzymuje z każdej strony. Przy dużej ilości treści może to być katastrofą z bałaganem i uogólnieniami. Nigdy nie przestawaj ćwiczyć, a za pomocą kilku projektów zdobędziesz mistrzostwo w wyobrażaniu sobie intensywnych układów.
