tak, to jest całkowicie możliwe, aby nauczyć się projektowania stron internetowych. Pytałem w tym tygodniu, jak ludziom udało się zdobyć umiejętności i starałem się przypomnieć sobie, co mi się udało.
istnieją trzy główne sposoby, aby nauczyć się projektowania stron internetowych.
- robiąc. Ludzie uczą się poprzez tworzenie stron internetowych.
- korzystając z zasobów internetowych. Każdy w pewnym momencie Znajduje w Internecie odpowiedzi na temat projektowania stron internetowych.
- czytając. Ten mnie zaskoczył. Większość projektantów twierdzi, że uczą się projektowania stron internetowych, po części czytając książki.
przejrzyjmy więc każdą z tych kategorii, aby dowiedzieć się, jak nauczyć się projektowania stron internetowych.
nauka projektowania stron internetowych wykonując
najlepszym sposobem, aby zacząć rozumieć strony internetowe, jest spojrzenie na to, jak istniejące strony internetowe są połączone i zbudować je samodzielnie.
obserwuj, jak działają inne strony internetowe
na początek większość stron internetowych w Internecie jest napisana, przynajmniej częściowo, w HTML. Aby zobaczyć HTML, który tworzy tę stronę, musisz „wyświetlić źródło” w przeglądarce, której używasz. Spróbuj przejść Cmd / Ctrl-U (dla Firefoksa), przejdź Cmd/Ctrl-Alt/Opt-U (dla Chrome), a jeśli używasz Internet Explorera, naprawdę musisz zadać sobie pytanie, czy projektowanie stron internetowych jest właściwą ścieżką kariery dla ciebie.
spróbuj przejrzeć HTML, aby zobaczyć, jak różne elementy na stronie internetowej są oznaczone. Możesz być w stanie zidentyfikować pewne tagi od razu. Na przykład <p> to akapit, <h1,2,3> to nagłówki, <img> to obraz, itd. Zauważysz, że większość z tych znaczników działa parami, oznaczając początek i koniec znacznika, na przykład <p>Text here</p> pokazuje otwieranie i zamykanie znacznika akapitu za pomocą ukośnika (/) poprzedzającego znacznik zamykający. Inne znaczniki nie działają parami, na przykład znacznik obrazu self closes <img src = "https://robcubbon.com/images/rob.jpg" /> instruuje przeglądarkę, aby wyświetlała obraz z określonym adresem internetowym jako źródłem (src).
inną rzeczą, którą możesz zauważyć Ze źródła HTML, jest to, że wszystkie strony HTML mają podobną strukturę. Wszystkie zaczynają się od deklaracji <!DOCTYPE> mówiącej, w której wersji HTML się znajduje, następnie deklaracji <HTML>, a następnie <head> dokumentu, który jest kontenerem różnych elementów, w tym linków do skryptów, arkuszy stylów, meta informacji itp. Po <head> pojawia się <body>, gdzie zaznaczone są elementy strony internetowej.
ćwiczenia: Wybierz cały kod źródłowy tej strony do dokumentu Notatnika (PC) lub TextEdit (Mac) i zapisz go na komputerze jako „test.html ” czy coś. Otwórz ten plik w przeglądarce i powinien wyglądać dokładnie tak samo jak wersja online. Teraz wyłącz połączenie z Internetem i zobacz, jak wygląda strona testowa. Całkiem inaczej, co? Spróbuj dowiedzieć się dlaczego.
narzędzia handlu
podczas gdy to robisz, będziesz potrzebować pewnych narzędzi.
- wiele przeglądarek i smartfonów. Spróbuj przetestować własne witryny na różnych przeglądarkach i telefonach(tutaj rozpoczniesz długotrwały romans z Internet Explorerem).
- edytor tekstu. Możesz użyć podstawowego Notatnika (PC) lub TextEdit (Mac), a może Coda (Mac) lub Dreamweaver – nie używaj Dreamweaver w trybie wizualnym, po prostu pracuj nad kodem, musisz zrozumieć, jak to działa pod maską.
- Zweryfikuj swoje strony internetowe za pomocą walidatora HTML i walidatora CSS (użyj wtyczki przeglądarki, takiej jak Web Developer dla Chrome, aby szybko je wywołać).
- narzędzia programistyczne Chrome i Firebug dla Firefoksa. Te narzędzia pomagają zrozumieć CSS i JavaScript, które, jeśli uważasz, że HTML jest trudny, wymagają trochę zrozumienia.
- edytory graficzne i graficzne. Głównym elementem projektowania stron internetowych są edytory obrazów, takie jak Photoshop lub Fireworks. Są one dość drogie, ale istnieje GIMP plus wiele edytorów graficznych online, jeśli dopiero zaczynasz.
tworzenie własnych statycznych stron HTML
podczas gdy twoje zrozumienie HTML, CSS i JavaScript rośnie, powinieneś tworzyć statyczne strony HTML, lokalnie lub na serwerze WWW. Stale baw się kodem, aby próbować robić fajne rzeczy. Spróbuj odtworzyć pewne elementy na innych stronach internetowych, kopiując fragmenty kodu.
chociaż strony internetowe, które ostatecznie utworzysz, prawdopodobnie nie będą tworzone z plików HTML, ważne jest, aby najpierw zrozumieć, jak tworzyć statyczne witryny HTML, zanim zaczniesz używać PHP i/lub systemów zarządzania treścią (CMSs) do tworzenia HTML.
tworzenie własnych stron internetowych za pomocą CMSs
większość stron internetowych jest tworzona przez CMSs-oprogramowanie, które może tworzyć strony HTML w ramach określonych szablonów. Najlepsze z nich to WordPress, Joomla i Drupal, ale istnieje wiele lżejszych CMS open source, z którymi możesz eksperymentować, nauczą cię, jak PHP i inne CMS, ASP, są używane do łączenia stron internetowych.
użyj MAMP (Mac) lub Wamp (Windows) na komputerze, aby uruchomić te systemy lokalnie, abyś mógł dobrze zrozumieć, jak działają.
korzystając z edytorów obrazów
musisz wiedzieć, jak używać Photoshopa lub czegoś podobnego. Będzie to potrzebne do stworzenia grafiki dla witryny, a także do zapewnienia pełnych wizualizacji tego, jak strona będzie wyglądać po zakończeniu, aby wspomóc proces projektowania.
Get designing
oczywiście nie wspomniałem, że powstałe strony będą musiały nie tylko sprawdzać, działać, być znalezione przez wyszukiwarki, służyć celowi i być reklamowane, ale także … muszą dobrze wyglądać.
aby poprawić swoje artystyczne oko, regularnie produkuj prace, a następnie staraj się je ulepszyć. Szkicuj projekty na papierze, a następnie pracuj nad nimi w Photoshopie lub jakimkolwiek innym programie graficznym. Praktyka pomoże Ci stać się lepszym projektantem. Później będę polecał więcej zasobów, które pomogą Ci w zasadach projektowania.
zasoby Online
kiedy ludzie chcą odpowiedzi, idą do Internetu i „Google it” lub przeszukują YouTube. Projektowanie stron internetowych nie jest inaczej. Istnieje wiele zasobów, które pomogą Ci online. Przede wszystkim są Szkoły W3, które projektanci stron internetowych określają jako najlepsze źródło samouczenia się online, jest też Tizag. Niektórzy polecają Lynda.com chociaż nie używałem go osobiście.
blogi
istnieje wiele wspaniałych blogów o projektowaniu. Są duże, które mogą Ci pomóc, takie jak SmashingMagazine, WebDesignerDepot, 1stwebdesigner i sieć Envato.
osobiście więcej dostaję od niezależnych webmasterów i grafików, którzy blogują. Są jednak ładunki, których nauczyłem się przez lata, więc oto tylko kilka i przepraszam wszystkich wspaniałych blogerów, których pominąłem z listy.
- CSS Tricks Chrisa Colyera to świetnie wyglądająca responsywna strona internetowa, ale także świetne informacje o projektowaniu stron internetowych i sztuczki
- Veerle Pieters ma świetne samouczki do Photoshopa i ilustratora na blogu Veerle ’ a
- David Airey jest kimś, kogo śledziłem przez jakiś czas na jego własnym blogu o tej samej nazwie, LogoDesignLove i IdentityDesigned. David interesuje się między innymi nadrzędną tożsamością organizacji.
- Chris Spooner wiele mnie nauczył dzięki samouczkom na swoim blogu w SpoonGraphics, a także informacjom i inspiracjom na Line25
- wspaniale zaprojektowana strona Fabio Sasso Abduzeedo oferuje wielką inspirację i dziwactwo.
- Nick La ’ S N. Design Studio i WebDesignerWall mają fantastyczne informacje i wielką inspirację.
Dodaj swoje ulubione blogi projektowe w komentarzach poniżej.
Fora
kiedy walniesz głową o ceglaną ścianę fora są świetnymi miejscami, aby uzyskać odpowiedzi. Zamieść opis swojego problemu i adres internetowy, a bardzo często ktoś skontaktuje się z Tobą z rozwiązaniem. Oto niektóre z moich ulubionych forów.
Lubię Estetica Design Forum, DesignForums.co.uk i Designer, s Talk. Tam Digital Point i Sitepoint dla szerszych zapytań, forum WordPress jest doskonałe i tam jest forum wojownika marketingu internetowego.
Książki
wielu projektantów stron internetowych twierdzi, że stare dobre książki fizyczne pomogły im nauczyć się projektowania stron internetowych. Oto kilka moich ulubionych i kilka innych, które zostały mi polecone. Linki są Amazon.com linki partnerskie.
- Zbuduj własną stronę w odpowiedni sposób za pomocą HTML & CSS 3th (third) edition by Ian Lloyd is a Sitepoint book I read years ago. To naprawdę pomogło mi w tym czasie, ponieważ koncentruje się na najlepszych praktykach projektowania stron internetowych. Upewnij się, że kupujesz aktualną edycję (w tej chwili trzecia edycja, która zawiera wiele NA HTML5).
- CSS: the Missing Manual by David Sawyer McFarland zawiera wyjaśnienia, przykłady i samouczki krok po kroku. Ta książka jest szczególnie polecana, ponieważ daje tło do CSS i zawiera wiele o CSS3.
- the Principles of Beautiful Web Design, 2nd Edition by Jason Beaird, twierdzi, że projektowanie jest umiejętnością, której można się nauczyć i uczy podstawowych zasad projektowania.
- Color Design Workbook: A Real World Guide to Using Color in Graphic Design by AdamsMorioka (editor) dostarcza istotnych informacji niezbędnych do kreatywnego i skutecznego stosowania koloru w pracy projektowej.
- nie każ mi myśleć: A Common Sense Approach to Web Usability, 2nd Edition by Steve Krug natychmiastowy klasyk na temat web usability, załadowany spostrzeżeniami i praktycznymi poradami.
- Getting Real: mądrzejszy, szybszy, łatwiejszy sposób na zbudowanie udanej aplikacji internetowej za pomocą sygnałów 37 może i polega na tworzeniu aplikacji internetowych, a nie stron, ale ma tak wspaniały sposób upraszczania procesów internetowych, że uważam go za przydatną lekturę.
- kopanie w WordPress przez Chrisa Coyiera & Jeff Starr jest wysoce polecany jako świetna książka WordPress. Dostępny w wersji PDF (przydatny do kopiowania kodu), jak również w wersji fizycznej.
jest wiele innych książek, które mógłbym dołączyć, zwłaszcza o teorii projektowania. Jeśli masz jakieś propozycje książek, które pomogły ci w projektowaniu stron internetowych, daj nam znać o nich w komentarzach.
co możesz zrobić
wielu projektantów twierdzi, że porażka jest w rzeczywistości najlepszym nauczycielem. Więc się tam i projektowanie stron internetowych! Kiedy, jak niewątpliwie się stanie, natkniesz się na ceglaną ścianę, możesz skorzystać z niektórych zasobów online tutaj, aby ci pomóc. A kiedy nie możesz już patrzeć na ekran komputera, możesz przeczytać o tym książkę!