Jakie są kroki przy projektowaniu strony internetowej?

Dzwonię do wszystkich projektantów stron internetowych :)

Zaczynam robić stronę internetową dla małej firmy w moim rodzinnym mieście i będzie to mój pierwszy właściwy projekt. W przeszłości tworzyłem strony, które robiłem dla przyjemności. Biegle posługuję się HTML i CSS. Mam wymagania klientów i to, czego chce na stronie internetowej itp. Utknąłem na krokach, które powinienem wykonać po sfinalizowaniu wymagań. Przeszukałem internet i nie mogłem znaleźć nic odpowiedniego do moich pytań, ponieważ informacje są nieaktualne.

Moje pytania to:

Co to jest przepływ pracy projektantów stron internetowych w 2014 roku? (Ponieważ wszystko zmienia się tak szybko) Czy mogę utworzyć szkielety witryny, a następnie zaprojektować je w Photoshopie, a następnie kodować projekty?

Chcę tylko wiedzieć, jak działają procesy „projektowania”, na przykład jakie kroki muszę podjąć, aby stworzyć stronę internetową.

Z góry dziękuję.

Odkrycie i zakres

Usiądź z klientem, aby określić, cele, cel i potrzeby. Powinieneś był sporządzić wycenę specjalnie zaprojektowanej witryny i omówić czas zawracania. Pamiętaj, aby napisać wszystko, czego nie możesz dostarczyć. Musisz dowiedzieć się, jak będzie wyglądała strona. Takie jak responsive, tylko tablet i telefon, tylko komputer stacjonarny, tylko komputer stacjonarny i tablet. Musisz dowiedzieć się, czy projekt jest celem wieloetapowym, np. Klient będzie chciał wydać wersję komputerową i później mieć pełną aplikację mobilną.

Mapowanie treści

Mam nadzieję, że otrzymałeś wszystkie treści, które są pożądane dla witryny. Powinieneś zmapować witrynę i jej funkcjonalność. Zdecyduj, jak skalowalne są przyszłe modyfikacje, zdecyduj, w jaki sposób kod może być skonstruowany, jeśli dotyczy CMS lub aplikacji.

Przykład:

makieta

Po ukończeniu „drzewa” lub „mapy” za zgodą klienta pracowałbym nad narzędziem do szkicowania ręcznego lub makiety. Jeśli wykonujesz wyszukiwanie w prawym górnym rogu, jest wiele pytań na ten temat

Przykład:

Płytka stylu

Projektowanie w Photoshopie do projektowania stron internetowych przekracza cel dzisiejszej epoki. Nie znam wielu osób, które nadal używają Photoshopa, ponieważ czas potrzebny na stworzenie fantazyjnego przycisku mógł spędzić tyle samo czasu i zakodowany w przeglądarce. Jeśli będę musiał użyć aplikacji na specjalne żądanie, wdrożę ją w programie Illustrator lub InDesign. Radzę migrację, aby zaprojektować kafelek stylu, taki jak:

Na potrzeby kafelka nie przekazujesz klientowi projektu i stawiasz się w kącie „to nie wygląda na projekt, który mi dałeś”. Ponadto, jeśli planujesz witrynę, nie ma powodu, aby poświęcać czas na jej przygotowanie w Photoshopie, ponieważ poświęcisz dużo czasu na projektowanie niektórych urządzeń itp. Itp. Jeśli MUSISZ zaprojektować pełną witrynę, zrobiłbym to weź pod uwagę Illustrator, jak powiedziano, ze względu na jego plik SVG i możliwość eksportowania elementów witryny w porównaniu z programem Photoshop. W pewnym stopniu możesz nawet użyć InDesign do formatowania zawartości, ale używałbym Photoshopa tylko do manipulacji obrazem i jeśli to zrobię, prawdopodobnie wykonałbym roll z ImageMagick. Przenoszę Kafel Stylowy o poziom wyżej niż inne i koduję go na jednej stronie, więc wybiłem wstępne zadanie mojego mistrza.css plik.

Model szkieletowy

Wolę wdrożyć projektowanie w przeglądarce, jeśli nie zauważyłeś. Teraz mogę używać programu Illustrator do szkicowania witryny lub makiety witryny, ale zwykle wdrażam domyślny .cssplik szablonu z nie więcej niż 6 kolorami w skali szarości i koduję wszystko dla struktury witryny, ponieważ większość ludzi nie może uzyskać zrozumienie projektu i chcieć się bawić. Czasami robię to w PHP, ponieważ łatwiej jest wdrożyć system CMS. Następnie opracuję prostą subdomenę z DOSTARCZONYMI czcionkami klienta w czarno-biały sposób, aby cała funkcjonalność witryny była obecna i mogli przez nią przejść. Ponieważ nie spędziłem czasu na dodawaniu całej zawartości lub kolorów (ponieważ używam fikcyjnego tekstu referencyjnego: „Alternatywa dla Lorem Ipsum (fikcyjnego tekstu) dla stron internetowych„) Mogę łatwo modyfikować wszelkie zmiany, które są obecne, jeśli nie podoba im się jakiś element oparty na urządzeniu.

Koloruj i treści

Gdy klient wyloguje się ze struktury strony i funkcjonalności, napiszę resztę CSS i dodam wymagane animacje lub specyfikacje JavaScript. Ponieważ mam zatwierdzony kafelek stylu i jeśli go poprawnie opracowałem, mogę po prostu skopiować CSS i ustawić.

Debugowanie, debugowanie, debugowanie

Ostatnim krokiem przed wylogowaniem klienta jest debugowanie i upewnienie się, że mój kod jest solidny i nie zawiera błędów. Jeśli wszystko jest w porządku, powinienem mieć płynne wydanie. Ten krok obejmuje także testowanie porcji i testowanie obciążenia, jeśli to właśnie wyceniłeś i zaoferowałeś. Osobiście jestem głęboko przekonany, że każdy projektant powinien być świadomy tego, co opracowuje, tak jak Ty, miejmy nadzieję, robiłby, jeśli chodzi o projekt druku. Jeśli klient nie może sobie pozwolić na prawdziwego dostawcę hostingu, może ograniczyć wydajność witryny, a wszystko, co powie, to twoja wina i zrobiłeś coś złego.

Trening

Zazwyczaj licytuję podczas mojego krótkiego szkolenia / wyceny na stronach CMS. Niektórzy użytkownicy nie mają pojęcia, co robią, więc złożę ofertę na popołudnie z godziną wypełnienia na pytania, aby upewnić się, że coś omówię lub upewnij się, że wykorzystują mój projekt do najwyższych możliwości.

Kilka innych tematów, które mogą pomóc, ponieważ zadajesz podstawowe pytanie:

• Jaka jest różnica między modelami szkieletowymi a makietami?
• Jak zaprezentować klientowi makiety projektowania stron internetowych?
• Jakie są dobre praktyki „makiety” w projektowaniu stron internetowych?

Jestem również projektantem stron internetowych, który właśnie zaczął pracę w tej dziedzinie. Zrealizowałem jednak teraz kilka projektów. Dla mnie mój przepływ pracy wygląda następująco:

1. Wstępne spotkanie projektowe i rozwojowe W
   tym momencie zbieram wszystkie istotne informacje, w tym przewidywany termin zakończenia, sporządzam listę potrzebnych elementów od mojego klienta itp.
   
2. Makiety PhotoShop Obecnie
   znajduję projekt lub dwa lub trzy, które pasują do mojego klienta i wykonuję makiety w Photoshopie, używając ich brandingu, kolorów, stylów itp. Przesyłam je i omawiam , co należy zmienić / zachować na każdym , a następnie pozwól klientowi zdecydować, który projekt najbardziej mu się podoba.
   UWAGA: Jeśli używasz WordPressa do budowania, możesz przejść do http://themeforest.comi sprawdź mnóstwo motywów. Stamtąd możesz robić zrzuty ekranu i robić makiety, a następnie możesz także udostępnić demo na żywo (oczywiście bez dostosowań klienta). Jeśli Twojemu klientowi podoba się jedna z tych makiet, kup motyw i możesz go zmienić w dowolny sposób. To właśnie robię. Nigdy nie używam motywu (ani niczego innego w tym zakresie) bez odpowiedniego kredytu / płatności / itp. do oryginalnego twórcy. :)
   
3. Programowanie
   Następnie w końcu zaczynam opracowywać witrynę w środowisku programistycznym (NIE na żywo na stronie klienta, ale w miarę możliwości w subdomenie - IE dev.clienturl.com) Wysyłam aktualizacje do mojego klienta za każdym razem, gdy czuję, że strona się zbliża aby zakończyć, w ten sposób, jeśli wystąpią problemy, możemy je natychmiast naprawić.
4. ZAWSZE DZIAŁAJĄC NASTĘPNIE
   Nawet po uruchomieniu strony internetowej klienta i wydaje się, że jest zadowolony i nie poprosił o dalsze zmiany, koniecznie kontynuuj. Upewnij się tylko, że wszystko działa zgodnie z ich oczekiwaniami. Polecam również napisanie krótkiej ankiety dla każdego klienta, aby zakończyć ją po uruchomieniu witryny przez około tydzień. Możesz użyć komentarzy z tego miejsca jako referencji na swojej stronie.

Jeśli potrzebujesz pomocy, skontaktuj się ze mną za pośrednictwem mojej strony internetowej. Mam mnóstwo zasobów, którymi mogę się z Tobą podzielić, np. Na kontrakty, ankiety poprodukcyjne, wstępne kwestionariusze itp. Http://anchorsawaydesigns.com/

spróbuj uzyskać jak najwięcej informacji od samego początku, a następnie zastosuj podejście etapowe podobne do poniższego. Staraj się jak najbardziej informować swojego klienta, ponieważ nie będziesz chciał opracowywać czegoś w oderwaniu, aby później dowiedzieć się, że nie spełnia on jego oczekiwań. Jeśli zainwestujesz w dobre narzędzie do szkieletowania (używam balsamiq), wtedy połowa pracy jest dla ciebie wykonana.

1. Zbieranie wymagań
2. Wireframing
3. Projektuj makiety
4. Projekt sfinalizowany
5. Rozwój
6. Hosting

Powodzenia.

Cześć koleś, fajnie, że zaczynasz nowy projekt.

Kroki dla Twoich potrzeb:

1. najpierw decydujesz, jakiej technologii chcesz użyć w swoim projekcie, tzn. przewijanie jednej strony, wielu stron itp.

2. Następnie odpowiednio przygotuj szkic do swojego układu i przepływu pracy.

3. Teraz zacznij projektować układ w narzędziu, które lubię w Photoshopie, ale możesz użyć swoich upodobań.

4. Po tym dobrze, że pokażesz swój układ klientowi dla wszelkich zmian, np. kolor, czcionki itp., abyś mógł nie boleć głowy w czasie HTML.

5. Teraz po potwierdzeniu klientów. Czas zacząć kodować za pomocą HTML i Css.

6. Potem nadszedł czas, aby przekazać go programistom do dalszego programowania podstawowego języka, tj. PHP, .Net itp.

Cieszyć się............

W branży internetowej, aby usprawnić proces projektowania, projektowanie jest zakończone, a przed przedstawieniem ostatecznego projektu do dalszego opracowania lub przetestowania, konieczne są inne etapy pośrednie:

Krok 1: Zdobywanie inspiracji:

Jeśli będziesz stale obserwować, co robią inni projektanci lub witryny dla ich modeli szkieletowych, powoli pojawi się w głowie obraz tego, w jaki sposób model szkieletowy pomaga uporządkować informacje na ekranie.

i do tego możesz użyć narzędzia „Wirify” Wireframing, po prostu dodaj duży link do zakładki i wejdź na dowolną żądaną stronę internetową, kliknij zakładkę, zobaczysz, że strona zmienia się w szkielet.

Krok 2: Projektowanie procesu:

Różni projektanci na różne sposoby podchodzą do szkieletowania i jego tłumaczenia na elementy wizualne lub kod,

Tutaj nie tylko projektant wybiera ścieżkę, którą należy podążać, czasami klienci wolą bezpośrednio tworzyć makiety, a niektórzy wolą bardziej systematyczne,

Szkic => Model szkieletowy => Makieta => Kod

Krok 3: Szkicowanie:

Teraz, gdy jesteś zainspirowany, masz jakieś ogólne pomysły i planowanie podejścia, zawsze warto zacząć od szkicowania, bez względu na to, jak dobrze kontrolujesz mysz / rysik lub cokolwiek używasz, nie mogą pobić papieru, ołówka prostota.

Szkicowanie ręczne na papierze jest zawsze dobrym punktem wyjścia dla każdego projektanta. Zapewnia szybki i łatwy sposób skupienia i uporządkowania. Jeśli jesteś bardzo precyzyjny w szkicowaniu, możesz nawet użyć tego jako ostatecznego szkieletu.

Krok 4: Szkieletowanie:

Tworzenie szkieletu jest jednym z pierwszych kroków, które należy wykonać przed zaprojektowaniem.

Model szkieletowy pomaga organizować i upraszczać elementy i treści w witrynie internetowej i jest niezbędnym narzędziem w procesie programowania.

Model szkieletowy jest w zasadzie wizualną reprezentacją układu treści w projekcie .

Podobnie jak fundament budynku, musi on być zasadniczo wytrzymały, zanim zdecydujesz się na nadanie mu drogiej powłoki lakierniczej.

Wybierz swoje narzędzia

Oto lista 10 darmowych narzędzi do szkieletowania dla projektantów Mashable

Ustawianie siatki

Siatki są bardzo niezbędne do uzyskania symetrycznego i równoległego projektu.

za każdym razem, gdy spojrzysz na dobrze zaprojektowaną stronę internetową, przekonasz się, że jej treść zaczyna się od określonego punktu ciała, a kończy na jednym, są one zarządzane za pomocą siatek.

Określ układ za pomocą pól

Zdefiniuj hierarchię informacji za pomocą typografii

Czego należy unikać podczas szkieletowania:

• Za dużo dzieje się na stronie.
• Nacisk na kolor i design
• Za dużo szczegółów

Utworzenie modelu szkieletowego daje klientowi, deweloperowi i projektantowi możliwość krytycznego spojrzenia na strukturę witryny i pozwala na łatwe dokonywanie zmian na wczesnym etapie procesu.

Wireframing zapewnia następujące kluczowe korzyści:

Krok 5: Makiety / elementy wizualne:

Teraz ostateczny model szkieletowy można przekształcić w ostateczne makiety lub elementy wizualne:

Niektóre typowe narzędzia dla Mockuos to Adobe Photoshop, Corel Draw i bardzo nowe, ale już popularne Sketch, itp.

Hierarchia informacji

Konieczne może być zastanowienie się, co należy wyróżnić, a jakie informacje dodatkowe, a schemat kolorów, zmiana położenia i typografia są tak ustalone.

Typografia

Wybierz atrakcyjną wizualnie i czytelną typografię dla witryny z odpowiednią kombinacją alternatyw. Rozmiar czcionki, gramatura i kolory odgrywają kluczową rolę w czytelności.

Schematy kolorów

Schemat kolorów przedstawiający tożsamość marki i kolory psychologiczne jako czerwony dla niebezpieczeństwa, zielony dla sukcesu itp.

Krok 6: Prototypy :

Prototyp to wczesna próba, model, lub uwalnianie produktu zbudowany do testowania koncepcji lub procesu lub działać jako rzecz być replikowane lub uczyć.

Modele szkieletowe obsługują strukturę, makiety obsługują wizualizacje, a prototypy obsługują użyteczność (w produktach internetowych / aplikacyjnych).

Powstaje prototypowy produkt, a następnie jest on testowany i wykonuje się POC (Prof of concept). Teraz możemy przejść do produktu Real (oczywiście, jeśli nie trzeba wprowadzać żadnych zmian)

Link do oryginalnego artykułu ze zdjęciami i innymi linkami