Przypadek do kodowania swoich szkieletów

Praca projektanta dzień po dniu może być pracochłonna. Na szczęście pole rozszerzyło się, a więc proces stał się prostszy. Dostępnych jest wiele bezpłatnych narzędzi i zasobów.

Modele szkieletowe wprowadzają elegancję do projektowania makiet. Są podstawową strukturą strony internetowej, z usuniętymi kolorami i ulepszeniami.

Służą do wyświetlania koncepcji projektu za pomocą tylko niezbędnych rzeczy i mogą stanowić przydatną perspektywę dla każdego projektu.

Większość szkieletów tworzonych jest w pakietach oprogramowania takich jak Adobe Photoshop i Fireworks, ale niektóre strony internetowe umożliwiają tworzenie obrazów szkieletowych bezpośrednio w przeglądarce.

W tym poście przejdziemy do kodowania podstawowego obrazu szkieletowego w HTML i CSS i zobaczymy, jak może on przynieść korzyści procesowi twórczemu.

Po co się męczyć?

Po co tracić czas na szkicowanie struktury strony? W niektórych przypadkach może to być niepotrzebne, ale może pomóc, gdy utkniesz w rutynie lub walczysz, aby zobaczyć duży obraz.

Może przynieść korzyści projektantom i klientom. W płatnej pracy odpowiadasz za zadowolenie klienta. Pokazanie podstawowej struktury ich wkrótce zaprojektowanej strony internetowej może dać klientom ulgę i poczucie kontroli nad całym procesem.

Ale jeśli projekt jest bardzo prosty lub ma prostą strukturę, to tworzenie szkieletu może nie być tego warte; kpiny z całej rzeczy w Photoshopie, z przyciskami i kolorami, mogą być równie szybkie.

Decyzja o tym, jakie podjąć kroki, wymaga czasu i krytycznego myślenia. W końcu szkielet jest jedynie narzędziem. Jest niedoceniany przez wielu projektantów stron internetowych, ale zaskakująco przydatny, gdy raz zrozumie.

Prototypowanie szkieletów w kodzie

Od lat oprogramowanie Adobe do projektowania jest głównym pakietem do tworzenia modeli szkieletowych, ale sieć uległa znacznym zmianom i wciąż ewoluuje.

Wzrost standardów kodowania i wzrost Dokumentacja HTML5 są dużymi krokami w kierunku wspólnej sieci. Teraz kodowanie podstawowej krawędziówki w HTML i CSS nie jest już pracą, a nie zadaniem w Fireworks.

Dzięki krawędziom można zaatakować projekt z różnych stron. Możesz nawet przetestować zgodność ze standardami CSS2 i CSS3 oraz przeglądarkami. Rzeczy nie muszą być skomplikowane na początku; szkielet po prostu służy jako solidny fundament do rozpoczęcia kodowania.

Udostępnianie treści staje się łatwiejsze dzięki szkieletowi. Możesz przechowywać wszystkie potrzebne pliki na dowolnym serwerze internetowym, a także skonfigurować katalog demonstracyjny i przekazywać aktualizacje na żywo klientom i nadzorcom projektu. Wprowadzanie zmian, takich jak szybkie zmiany w marginesach i szerokościach w CSS dokumentu, jest również proste.

Standaryzuj kod dla długiego transportu

Modele szkieletowe oszczędzają czas w procesie projektowania. Jeśli style CSS dla twoich podstawowych elementów są już napisane, to reszta to tylko wypełniacz (ważny wypełniacz, pamiętaj).

Rozpocznij poprawnie, z prawidłowym typem dokumentu HTML i strukturą katalogów. Typy dokumentów nie różnią się zbytnio od siebie. Możesz o nich przeczytać na Strona Specyfikacja W3C . Nie mają większego znaczenia w starym modelu World Wide Web, ale HTML5 jest dokładny i pozwala na rozwój Twojej witryny.

Musisz przetestować kompatybilność na jak największej liczbie systemów operacyjnych i przeglądarek, a etap prototypowania modelu szkieletowego to idealny moment, aby to zrobić, ponieważ jesteś już skoncentrowany na aranżacji układu.

To także dobry czas na pracę nad szablonem przyjaznym dla urządzeń mobilnych. Wraz ze zmianą struktury powinieneś być w stanie włączyć pomysły i manipulować kodem dokumentu. Rozwój staje się łatwiejszy, ponieważ istnieje mniej kodu, który może zaśmiecić twój styl mobilny i niestandardowy.

Rozpoczęcie struktury szkieletu dokumentu

Najlepszym sposobem na rozpoczęcie jest pusta plansza, ponieważ zapewnia ona największą kreatywność. Oczywistymi elementami do uwzględnienia w kodzie (jak w każdym innym dokumencie internetowym) są html , head i body .

To jest szkielet. Będziesz potrzebował kilku dodatkowych elementów, aby dobrze wyglądał szkielet. The div (lub dzielenie) jest godne uwagi. Jest to element używany do zaznaczania niektórych obszarów strony, takich jak logo lub pole wyszukiwania.

Divs są podstawowymi elementami prototypów szkieletowych HTML5. Wszystko i wszystko może być otoczone a div , a stylizacja to pestka, gdy stosujesz klasy i identyfikatory do elementów. Większość twojego głównego kodu zostanie podzielona przez divs ponieważ są podstawowymi elementami blokowymi.

Z nową specyfikacją HTML5, element o nazwie nav został wprowadzony. Można to połączyć z nieuporządkowaną listą i niektórymi właściwościami CSS w celu utworzenia i zdefiniowania głównego obszaru nawigacyjnego witryny. Poniżej znajduje się prosty przykład tego, jak możesz uporządkować swoją strukturę nav :

Praca z header i footer Elementy

Zauważysz w powyższym przykładzie, że użyłem a div z identyfikatorem header aby oddzielić nawigację po nagłówku. Jest to całkowicie dopuszczalne i nic nie jest nie tak z powyższym kodem. HTML5 daje nam jednak inne opcje.

The header element w nowych specyfikacjach HTML5 pozwala na dokładniejsze zdefiniowanie struktury, co jest przydatne głównie dla robotów indeksujących strony i czytników ekranu, które oddzielają "nagłówkową" część treści. Nie powinno to wpłynąć na twoich użytkowników, a zachowuje cały kod i pokazuje, że naprawdę rozumiesz, o czym mówisz.

Kolejnym interesującym elementem, który został dodany jest footer . Taki sam pomysł: użyj tego elementu zamiast div oddzielić treść stopki. Ogólnie rzecz biorąc, stopki są na uboczu i zawierają podstawowe informacje o stronie lub firmie.

Możesz dodać linki do stopki i użyć znaku a nav element do zdefiniowania niektórych z nich, ale byłoby to nierozsądne. The nav element określa główny obszar nawigacyjny, więc dodanie go do stopki lub gdziekolwiek indziej byłoby zbędne.

W tym scenariuszu, używając footer element i oddzielanie linków nawigacyjnych jako lista nieuporządkowana jest najlepsza. Możesz użyć kolumny stopki z pewną liczbą kolumn linków. Mogą być oddzielne div elementy wyświetlane obok siebie, wszystkie zawinięte w stopce głównej.

Techniki CSS do stylizacji szkieletów

Jeśli rozumiesz HTML i pracowałeś z internetem przez jakiś czas, to prawdopodobnie znasz jakieś podstawowe CSS. Wiele nowych funkcji CSS3 to dodawanie fantazyjnych zaokrąglonych narożników i cieni do tekstu.

Nie mam zamiaru sugerować, że styl CSS nie jest ważny, ale główny układ i pozycjonowanie to ostatecznie struktura Twojej witryny. Za pomocą CSS definiujesz szerokość, margines i odstępy. Są to podstawowe właściwości większości elementów internetowych i stanowią ostatni krok w tworzeniu naprawdę wyjątkowego modelu krawędziowego.

Jeśli jesteś zaintrygowany nowymi właściwościami i selektorami CSS3, to sprawdź magazyny Webdesigner kolekcja ulepszeń . Zawiera przewodniki po sieci dotyczące nowych funkcji w CSS3.

Dodawanie clearfix do stylów

Jeśli nie jesteś zaznajomiony z techniką clearfix, zrób niektóre badania . To popularna klasa, którą możesz dodać do div pojemnik zawierający dwa lub więcej bloków pływających.

Jeśli nigdy nie słyszałeś o clearfix, może wydawać się zagmatwane, ale koncepcja jest prosta. Pomyśl o pojemniku div to ma dwa div w środku, oba płynęły w lewo. Domyślnie większość przeglądarek renderowałaby dwie kolumny bezpośrednio dotykając się nawzajem i zawierającą div rozwinie stronę w dół, aby dopasować ją do najdłuższej kolumny.

Dodając clearfix klasy do kontenera, obie kolumny zmieszczą się szczęśliwie w kontenerze div , który rozszerza się wystarczająco głęboko, aby zmieścić oba elementy. Rozwiązuje to wiele problemów związanych z prototypowaniem modelu szkieletowego, szczególnie w przypadku układów dwukolumnowych (tj. Głównej treści i paska bocznego). Ta metoda będzie również działać dla układów trzy-, a nawet czterokolumnowych, każda kolumna będzie musiała zmieścić się w mniejszej przestrzeni.

Wyświetlanie CSS: utrzymywanie stylów zewnętrznych

Co zrobić z umieszczaniem CSS to kolejna ważna decyzja. Profesjonalni projektanci stron internetowych i programiści po prostu sugerują utrzymanie niezależności .css plik, oddzielny od kodu HTML.

W ten sposób struktura jest w jednym dokumencie, a układ i projekt są w innym. Oba są równie ważne dla szkieletów, ale wykonują różne zadania.

Cały kod HTML jest ściśle strukturalny. Możesz umieszczać linki wewnątrz akapitów wewnątrz kontenera div s wewnątrz innych pojemników i tak dalej. Stylizacja kontroluje rozmiar, odstępy, marginesy i litery akapitów i linków, a siatkowa definiuje szerokość kontenerów i ich rozmieszczenie na stronie.

Elementy strony dostarczają dalszych przykładów. Będziesz kodować div kontenery dla zawartości i pasków bocznych, ale możesz je stylować i pozycjonować za pomocą CSS. Dla projektanta zrozumienie sposobu oddzielania treści i stylu jest kluczem do opanowania krawędziowych ramek.

Wdrażaj zastępcze elementy strony

Efektowne efekty jQuery i elementy internetowe Ajax wydają się być wszystkim wściekłością. Trendy rosną, a prawie wszystkie popularne witryny internetowe zawierają dynamiczne treści. Ważne jest, aby rozważyć. Jeśli uzupełniają projekt, dlaczego nie ma w nim klocków?

Opracowanie całego systemu zaplecza dla dynamicznego logowania może nie być praktyczne, ale zwrócenie uwagi na biblioteki JavaScript, które będą potrzebne, to świetny początek. Możesz także kodować style, które strukturują to pole i ustawiać je na później, kiedy dodajesz kolory i szczegóły.

Te motywy można zastosować w wielu elementach interfejsu. Możesz użyć sugestii wyszukiwania podobnych do Google lub pozostawić notatki w swoim kodzie, aby zaimplementować dynamiczne wiadomości lub pudełko na Twitter, dzięki czemu twoja konstrukcja szkieletowa będzie dynamiczna i zapewni elegancki sposób reprezentowania obiektu półprzewodnikowego zamiast dynamicznej treści . W fazie prototypowania to wszystko, czego potrzebujesz.

Wspólne błędy w projektowaniu szkieletowym

Trudno się nie udać, gdy zaczynasz kodować podstawową strukturę strony internetowej, ale pamiętaj o pewnych szczegółach.

Pamiętaj, że celem modelu szkieletowego jest przedstawienie szkieletu bez wielu szczegółów. Jest to przydatne podczas początkowych etapów planowania elementów strony; możesz zagłębić się w swoją stronę i zobaczyć pełny obraz.

Utrzymuj rzeczy proste i uporządkowane. Przegapienie tego jest częstym błędem, a to ograniczy Twoją zdolność do dotrzymywania terminów. Model szkieletowy nie musi być w pobliżu idealny; to powinien być z grubsza zarys strony internetowej. Nawet szkielet HTML i CSS powinien składać się wyłącznie z konturów elementów strony.

Unikaj objazdów, koncentrując się na swoich głównych celach. Pamiętaj, dlaczego rozpocząłeś proces od modelu szkieletowego!

Modele szkieletowe mogą również rozwiązywać wiele problemów, które niweczą proces projektowania. Kodowanie prototypu w HTML i CSS jest najlepszym sposobem na uzyskanie przewagi nad projektem internetowym, dużym lub małym. To prosty, skuteczny sposób nadania kształtu twoim pomysłom.

ZA tona artykułów w Internecie odnoszą się do procesu wireframing. Omówiłem kodowanie i rozwój rzeczy, ale żeby dowiedzieć się więcej o wireframe, czytaj dalej. Wskazówki dotyczące projektowania są dostępne; po prostu musisz je znaleźć!

Ten post został napisany wyłącznie dla Webdesigner Depot przez Jake Rocheleau , namiętny projektant stron internetowych i entuzjasta mediów społecznościowych. Jake uwielbia czytać i pisać o najnowszych cyfrowych trendach internetowych i tworzeniu sieci w społeczności projektantów. Sprawdź go na Twitterze @jakerocheleau więcej informacji na temat jego pracy.

Jakie są twoje doświadczenia z procesem wireframe? Czy pracujesz najpierw w kodzie lub w innym oprogramowaniu? Jakie są według Ciebie zalety prototypowania w kodzie?