Utwórz czysty układ strony internetowej w Photoshopie - Projektowanie układu strony internetowej to więcej niż układanie kolorowych obrazów i wypełnianie tekstu w ramkach tekstowych. Jest to podejście, które mówi wiele o działalności twojego klienta. Kolory i grafika witryny określają naturę firmy, a jakość projektu i łatwa nawigacja witryny powinny wiązać użytkownika z organizacją i przekształcać go w potencjalnego klienta.
Zaprojektowanie dobrze wyglądającego i łatwo dostępnego układu strony jest obowiązkowe dla każdego niedoszłego projektanta stron internetowych. Ten samouczek ma na celu poprowadzić Cię przez proces tworzenia prostej i przejrzystej strony internetowej od samego początku. Podczas tego procesu poznasz ważne punkty, które pomogą ci w dalszym zdobywaniu wiedzy na temat projektowania stron internetowych. 
Zapisz swoje wymagania przed zaprojektowaniem układu strony
Zanim zaczniesz projektować układ strony, powinieneś wiedzieć, jak będzie wyglądać Twoja strona i jakie są tematy, które powinieneś uwzględnić na stronie. Bardzo ważne jest sporządzenie listy elementów układu witryny, których klient potrzebuje na swojej stronie. Oprócz tego jakość dobrego projektanta polega na przygotowaniu makiety całej witryny, zanim zacznie pracę nad ostatecznym szablonem.
Różne firmy projektowe dostosowują różne poziomy strategii projektowania wstępnego, które mogą obejmować tworzenie ramek, prototypowanie, makiety, wersje beta i wiele innych. W tym samouczku utworzymy wersję próbną przed rozpoczęciem oryginalnego projektu szablonu. Używam szarych odcieni, które pozwalają zidentyfikować blok makiety
Brezentowy
Wiele lat wcześniej, podczas gdy było bardzo mało systemów operacyjnych i ograniczonych urządzeń do uzyskiwania dostępu do stron internetowych, wymiary strony zostały ustalone na jeden lub dwa rozmiary. Dzisiaj scenariusz jest zupełnie inny. Użytkownicy końcowi uzyskują dostęp do witryn na komputerach o różnych rozmiarach, telefonach komórkowych, iPadach i tabletach. W tej różnorodnej sytuacji nie ma szans, aby naprawić stronę internetową do określonego rozmiaru. Ale dla każdego urządzenia stosowane są pewne standardowe rozmiary branżowe. Powoli znajdziesz swój ulubiony rozmiar lub klient może skierować stronę internetową, aby naśladować rozmiary.
W takim przypadku pracujemy nad następującymi wymiarami. Nie martw się o wysokość, ponieważ z czasem będzie się zmieniać. Im więcej treści dodajesz do swojej witryny, tym większa będzie wysokość.
Pamiętaj, że przewijanie strony pionowo w dół jest powszechne, więc nie możesz ustawić określonej wysokości strony, chyba że nie chcesz, aby użytkownik przewijał Twoją stronę główną jako Google. Ale konieczne jest, aby nie przewijać w poziomie. Ogranicz szerokość zgodnie ze standardami branżowymi i nie bądź kreatywny dzięki przewijaniu w poziomie.
W Internecie rozdzielczość jest ograniczona do 72. Ostatnio na iPadzie i kilku tabletach ostatnio znaleziono obrazy i strony o wyższej rozdzielczości. Ale jest to rzadka okazja i lepiej trzymać się 72, biorąc pod uwagę prędkość Internetu na całym świecie.
Wybierz pliki za pomocą polecenia Ctrl + A i narysuj prowadnice równo w całym szablonie. Strona internetowa powinna być starannie zorganizowana, a każdy element powinien być spójny względem siebie. A wytyczne dotyczące układu strony internetowej pomogą ci to łatwo uzyskać.
Przygotuj makietę
Umieszczenie pliku makiety w oryginalnym szablonie pomaga zaoszczędzić sporo czasu. Projektowanie witryny staje się tak łatwe, że w ciągu kilku minut skończysz jej tworzenie. Jednak makieta pomoże tylko zaprojektować ramki. Uzupełnienie elementów projektu szczegółami, rozmieszczeniem typu i wyrównaniem zajmie więcej czasu niż narysowanie układu strony.
Schemat kolorów i inne możliwości
Następną rzeczą po przygotowaniu frameworka jest wybór schematu kolorów. Ale lepiej przygotować kolory przed rozpoczęciem pracy nad projektem.
Wszystko sprowadza się do przesłania, że przygotuj broń przed rozpoczęciem projektowania. Wszystko, w tym ikony, obrazy i wybór kolorów, powinno być gotowe przed rozpoczęciem pracy. Porządkowanie i planowanie pracy pozwoli zaoszczędzić więcej czasu i skupi się na projektowaniu bez przeszkód pomiędzy nimi.
Wybór kolorów może być wyborem projektanta, jeśli firma jest nowa i nie ma wcześniej tożsamości korporacyjnej. W niektórych przypadkach klienci dają wyobrażenie o tym, jakie odcienie powinny mieć logo lub tło. W przypadku istniejących firm, w których może być konieczne przeprojektowanie całej strony internetowej, może być konieczne wybranie tych samych kolorów, które odpowiadają potrzebom klienta.
Istnieje wiele stron internetowych, które mogą pomóc wybrać miliony schematów kolorów z archiwów. Wypróbuj następujące strony internetowe, aby cieszyć się szerokim wyborem kombinacji kolorów.
Color.adobe.com
Colourlovers.com
Tutaj wybrałem kilka odcieni niebieskiego do wykorzystania na stronie internetowej. Cała strona internetowa zostanie zaplanowana w następującym schemacie kolorów. Nie zapomnij wybrać trzech lub czterech różnych kombinacji kolorów, ponieważ nie wiemy, który klient preferuje kolory. Gdy klient sfinalizuje schemat kolorów, zapisz wartości odcieni i upewnij się, że kolory odgrywają istotną rolę w każdym pionie organizacji. Zwłaszcza w zakresie identyfikacji wizualnej.
Proces projektowania
Istnieje wiele sposobów na kontynuowanie pracy z projektantami. Nie ma twardych i szybkich reguł układu strony, które mogłyby definiować lub śledzić proces projektowania, jest to w większości proces, który projektant wybierze dla swojej wygody.
Niektórzy projektanci chcą zbudować całe bloki i ramki i rozpocząć pracę nad szczegółami w drugim etapie, a następnie typem, a na koniec dopasowaniami i korektami. Niektórzy lubią kończyć jedną część strony na raz i przenosić ją do następnej. Podążamy za drugim stylem.
Witrynę zakończymy w następujących krokach
- Nagłówek stopka
- Co robimy
- Usługi
- Formularz
- Aktualności
- Stopka
Nagłówek stopka
Praktyczna zasada określania wymiarów nagłówka lub banera zależy od Twojej kreatywności. Zgodnie z najnowszymi trendami na stronach internetowych pojawia się ogromny obraz obejmujący cały ekran komputera. Styl ten nazywany jest obrazem Bohatera, który ostatnio stał się dość popularny.
W tym przypadku zaczęliśmy od nagłówka o wysokości 120 pikseli i wysokości 550 pikseli dla banera. Szerokość powinna pasować do rozmiaru dokumentu.
Wzory o jednolitym kolorze mają płaski wygląd, który nie pasuje do większych ramek lub obrazów. Aby uniknąć płaskiego wyglądu, nałożyłem gradientową warstwę nakładki na baner. Daje banerowi głębokość, która powoli zmienia się z jednego odcienia do drugiego.
Następnie zaczęliśmy importować logo i umieszczać je w lewym górnym rogu nagłówka oraz kolejne większe logo na środku banera. Możesz również obserwować kształty wektorowe układu witryny w prawym górnym rogu, które służą do udostępniania linków do mediów społecznościowych.
Na tym etapie zakończyłem dodawanie tekstu w części Nagłówek i baner. Nazwa firmy, komunikat o marce wraz z linkami i usługami są dodawane w tekście. Możesz również obserwować przezroczysty przycisk na banerze.
Zwykły tekst lub zbyt duża czcionka bez specjalnych funkcji zepsuje wygląd twojej strony internetowej; strona wkrótce nudzi użytkownika, co może pozwolić mu szybko opuścić Twoją witrynę. Sprawdź kształt wektorowy, który dodałem do łączy usług w prawym górnym rogu banera. Styl jest prosty, ale wypełnia pustkę, unikając przyziemnego wyglądu.
Wybierz obraz odpowiedni dla firmy. W Internecie dostępne są miliony zdjęć stockowych i znalezienie obrazu, który spełni Twoje wymagania, nie potrwa zbyt długo.
W moim przypadku znalazłem obraz wysokiej jakości, który moim zdaniem będzie dobrze pasował do mojej witryny. Nie mam motywu biznesowego dla witryny, więc mogę swobodnie wybrać dowolny obraz, który dobrze wygląda na baneru.
Spróbuj pobrać niektóre obrazy HD z podanych poniżej bezpłatnych stron z obrazami
www.pixabay.com
Mieszanie to sztuka, którą powinieneś opanować, aby tworzyć piękne banery. Tutaj zmieszałem trzy warstwy, aby osiągnąć efekt pokazany na powyższym obrazku. Oto co zrobiłem
- Umieść warstwę obrazu na niebieskim kolorze transparentu
- Umieść nakładkę gradientu nad obrazem
- Zmień krycie obrazu o 40 procent i zmień tryb mieszania na różnicę.
- Sprawdź paletę warstw na powyższym obrazku, aby zrozumieć, w jaki sposób warstwy są ułożone jedna na drugiej.
Tak będzie wyglądał Twój nagłówek i baner, gdy właśnie nad nim pracowaliśmy. Pracujemy jednocześnie nad jedną częścią i nadszedł czas, aby przejść do następnego poziomu.
Dostosowanie ma kluczowe znaczenie, jeśli chodzi o pisanie; mieć pomysł, jak powinna wyglądać Twoja strona, a tekst powinien być wyrównany przed jego uruchomieniem. Na tym poziomie użyłem dwóch różnych ramek tekstowych, obie wyrównane do lewej.
Następnym krokiem jest zaprojektowanie części usługowej strony internetowej. Zaprojektowałem metaliczną gwiazdę w odcieniach szarości, aby zaprezentować różne usługi firmy. Zamiarem użycia symbolu gwiazdy jest usługa 5 gwiazdek.
Jeśli chodzi o wyrównywanie tekstu Przewodniki to twoi najlepsi przyjaciele. Spójność w obrębie typu i obiektów można uzyskać, dobrze wykorzystując białą przestrzeń i równe odstępy między elementami projektu. Użyłem wielu Wytycznych dotyczących układu strony, aby zobaczyć, że wszystkie obiekty w ramce powinny zachować odpowiednie odstępy i odległości, które zapewniają spore ilości białej przestrzeni.
Kolejnym krokiem naszego projektu jest utworzenie pola Formularz. W tym przypadku działam przeciwnie do metody zastosowanej przy projektowaniu banera. Umieścimy warstwę obrazu poniżej jednolitej warstwy barwnej i nałożymy warstwę gradientową na dwie warstwy, aby uzyskać lepszy wygląd. Gra z trybami mieszania jest zawsze niezbędna podczas umieszczania większych zdjęć.
Wybór zdjęć dla tej witryny nie ma z nią nic wspólnego. Myślę, że ten obraz pomoże stronie wyglądać lepiej.
Umieść obraz poniżej kolorowej warstwy tła. Aby naprawić obraz dokładnie do rozmiaru kolorowej warstwy, użyj opcji maskowania warstwy.
Spójrz na paletę warstw na powyższym obrazku. Jednolita niebieska warstwa znajduje się na górze obrazu, tryb mieszania jest konwertowany na nakładkę, a krycie jest zmniejszane do 65 procent.
Użyłem mapy gradientu na dwóch warstwach. Tryb mieszania zmieniono na odcień, a krycie pozostaje takie samo.
Formularz jest już gotowy, co prowadzi nas do końca czwartego poziomu w naszym projekcie strony internetowej.
Nasz następny poziom składa się z dwóch prostych ramek tekstowych. Przypomina drugi poziom strony internetowej i użyłem wyrównania dwóch pól podobnych do góry. Utrzymanie spójności w wyrównaniu jest dobrym sposobem na użycie białej przestrzeni.
Gdy dotarliśmy do ostatniej części strony, nadszedł czas, aby jeszcze raz spojrzeć na wymiary stopki. Projektant musi zaplanować wysokość stopki na podstawie linków, których powinien tam użyć. W tym przypadku podałem stopie wysokość 170 pikseli. Szerokość pozostaje taka sama jak na stronie internetowej.
Umieść linki i obrazy zgodnie z wymaganiami.
Tym samym zakończyliśmy część projektową naszej strony internetowej. Stosowane przez nas kombinacje kolorów są minimalne, w projekcie wykorzystujemy dużo białej przestrzeni i dodaliśmy prosty tekst z minimalnymi czcionkami. Chodzi o zaprojektowanie czystej strony internetowej, która, mamy nadzieję, została spełniona.
Jeszcze raz spójrz na projekt całej strony poniżej
