Jak sprawić, by następna witryna internetowa zyskała na popularności

Projektowanie stron internetowych to jedna z tych dziedzin, które, jeśli są dobrze wykonane, to na pewno o tym wiesz. Wygląda na dopieszczony, dopracowany i ogólnie rzecz biorąc, po prostu dobrze zrobiony - rzuca się w oczy! Można to osiągnąć na wiele sposobów, a mianowicie poprzez "dopieszczenie" projektu. Poniżej przedstawiamy kilka sposobów na osiągnięcie tego celu.

wiadomość sponsorowana



1. Podstawowy układ strony

Zanim zabierzesz się za tworzenie atrakcyjnej strony internetowej, musisz najpierw zadbać o jej podstawowe elementy. Na tym etapie przeprowadziłeś już badania, odpowiednio ułożyłeś witrynę i wykonałeś większość podstawowych prac projektowych, ale nie wykonałeś jeszcze "szlifu". W tym poradniku przyjrzymy się niektórym technikom stosowanym na stronie internetowej poświęconej dostawom czekolady; techniki te można jednak zastosować wszędzie.

Z drugiej strony, możesz również przeczytać o procesie projektowania logo dla logo UKE, które widzisz poniżej.

2. Sprawdź wyrównanie i odstępy

Wyrównanie i odstępy w projektowaniu stron internetowych tworzą porządek, organizują stronę i grupują części witryny w celu ułatwienia nawigacji. Na poniższym zrzucie ekranu możesz zobaczyć wytyczne, które zapewniają, że wszystko jest wyrównane (siatka pochodzi z www.960.gs). Zauważ, że logo i cały tekst są wyrównane do lewej? Zwróć też uwagę na równe odstępy wokół pól i tekstu. Aby upewnić się, że wszystkie elementy są wyrównane, użyj wskazówek w programie Photoshop, co można zrobić, przeciągając "linijki" z zakładki "Linijki". Naciśnij klawisze Ctrl+R, aby włączyć linijki.


wiadomość sponsorowana



3. Zastosuj antyaliasing do tekstu

Coś, na co często nie zwraca się uwagi przy projektowaniu stron internetowych, to stosowanie antyaliasingu w tekście. Dla tych, którzy nie wiedzą, antyaliasing jest techniką minimalizowania artefaktów zniekształcenia. Istnieje kilka sposobów na zminimalizowanie zniekształceń w tekście, ale najlepszym sposobem jest skorzystanie z panelu "Znaki". Można wybrać pomiędzy opcjami Brak, Ostry, Wyrazisty, Mocny i Gładki. Najlepszym sposobem sprawdzenia, co działa najlepiej, jest eksperymentowanie, ponieważ różne czcionki i rozmiary dadzą różne wyniki; jednak ustawienie Ostry zwykle jest najlepsze.

4. Dodaj pociągnięcie o wielkości 1 piksela

Coś, co naprawdę robi różnicę w wyglądzie strony, to użycie obramowań i linii z pociągnięciami o wielkości 1 piksela. Takie obramowania naprawdę dodają projektowi dodatkowej wyrazistości, ponieważ stanowią dodatkowy kontrast dla otaczających elementów i nadają projektowi większą głębię. Zwróć uwagę na poniższy zrzut ekranu w powiększeniu; widzisz wewnętrzne fioletowe linie biegnące wzdłuż wewnętrznej strony boksów? Możesz dodać te 1-pikselowe obramowania, korzystając z opcji obrysu dostępnej w panelu "Opcje mieszania". Ta technika świetnie sprawdza się również w przypadku dużego tekstu.

5. Dodaj subtelne efekty gradientu

Gradienty pojawiają się wszędzie w projektowaniu stron internetowych i nie bez powodu - dodają one głębi i prawdziwej estetyki projektowi. W przeciwieństwie do druku, gdzie gradienty wydają się płaskie, na ekranie ożywiają projekt. Zauważ delikatny gradient od ciemnego do jasnego fioletu na poniższym zrzucie ekranu. Zwróć także uwagę na niewielką przezroczystość. Efekty te nadają projektowi nowy wymiar, sprawiając, że obraz wychodzi z ekranu. Aby utworzyć takie subtelne (podkreślam: subtelne) efekty, użyj opcji mieszania w programie Photoshop.

wiadomość sponsorowana


6. Dodaj subtelne cienie (Drop Shadows)

W połączeniu z gradientami i strobowanymi obramowaniami można zastosować subtelne cienie. Po raz kolejny cienie te nadają projektowi nową głębię i wymiar, ponieważ sprawiają, że różne elementy na stronie grają ze sobą, dzięki czemu rzucają się w oczy. Na poniższym zrzucie ekranu zauważ, że logo, tekst i ramki mają zastosowane subtelne cienie, które oddzielają je od innych elementów. Aby uzyskać takie efekty, można skorzystać z opcji mieszania w programie Photoshop - należy jednak zachować umiar w ich stosowaniu.

7. Hierarchia i wezwanie do działania

Kiedy ktoś po raz pierwszy odwiedza Twoją stronę, co ma zrobić w pierwszej kolejności? Czy istnieje jasna hierarchia tego, co należy przeczytać lub zrobić w pierwszej kolejności? Jaki jest cel witryny? Są to pytania, które należało rozważyć na początku projektu, jednak teraz jest dobry moment, aby wrócić do tych decyzji i zastanowić się nad nimi. Czy można zmienić kolory, rozmiar lub położenie strony, aby osiągnąć lepsze rezultaty? Zauważ na poniższym zrzucie ekranu, że wezwaniem do działania na stronie UKE jest przycisk "Wybierz koszyk", który jest umieszczony w dogodnym miejscu po głównym haśle otwierającym.

8. Korekcja kolorów i wyostrzanie

W projektowaniu stron internetowych zdjęcia, ikony i obrazy są zazwyczaj dość widoczne, dlatego należy zadbać o ich najwyższą jakość. Sprawdź balans kolorów, ostrość i kontrast każdego obrazu i upewnij się, że jest on zrównoważony z resztą strony i innymi obrazami. Dobrym sposobem na to jest skorzystanie z funkcji "Poziomy", "Maskowanie wyostrzające" i "Krzywe" programu Photoshop.

9. Mniej znaczy więcej.

W projektowaniu stron internetowych sprawdza się stare powiedzenie: "mniej znaczy więcej" (w większości przypadków). Po zakończeniu projektowania strony internetowej zrób sobie przerwę i wróć do niej.

  • Czy jest coś, co można usunąć, naprawić, zastąpić, przenieść, zmienić lub edytować?
  • Czy jeden element nie zajmuje zbyt wiele miejsca lub nie przyciąga zbyt wiele uwagi?
  • Czy nie ma zbyt wielu kolorów?
  • Czy strona zachowuje równowagę?
  • Czy jest spójna?
  • Czy można wykorzystać więcej białej przestrzeni?

10. Podsumowanie

Następnym razem, gdy zabierzesz się za projektowanie kolejnej witryny, możesz zadać sobie następujące pytania:

  • Czy mam już gotowe podstawy?
  • Czy mogę poprawić wyrównanie lub odstępy?
  • Czy zastosowałem odpowiedni antyaliasing?
  • Czy mogę wyostrzyć obrazy lub tekst za pomocą pociągnięć lub obramowań?
  • Czy mogę nadać stronie więcej głębi, stosując gradienty lub cienie?
  • Czy istnieje jasna hierarchia z wezwaniem do działania?
  • Czy wszystkie obrazy mają poprawione kolory, są wyważone i wyostrzone?
  • I na koniec zadaj sobie pytanie: czy strona jest atrakcyjna?

11. Polecane lektury na temat projektowania stron internetowych

  • Jak usprawnić proces projektowania strony internetowej i poprawić jego wyniki
  • Od PSD do HTML: Tworzenie zestawu projektów stron internetowych krok po kroku
  • 10 zasad skutecznego projektowania stron internetowych
  • 5 kolejnych zasad skutecznego projektowania stron internetowych
  • 10 problemów z użytecznością w projektowaniu stron internetowych, których powinieneś być świadomy
  • Stosowanie diabelskiej proporcji w projektowaniu stron internetowych
  • 8 przydatnych wskazówek, które pomogą Twojej witrynie konwertować
  • 10 zasad SEO dla projektantów

A jeśli chcesz przeczytać więcej o projektowaniu stron internetowych, wyszukaj hasło "web design" w Smashing Magazine lub przejrzyj sekcję Interfejs w PSD Tuts.

Zdjęcia z Layers Magazine

Ten tutorial został pierwotnie napisany dla magazynu Layer w wydaniu maj/czerwiec. Poniżej możesz zobaczyć kilka szybkich migawek z powyższego artykułu w Layers Magazine.

wiadomość sponsorowana


Czy masz jakieś inne wskazówki, jak sprawić, by Twoja następna strona internetowa była efektowna?

Autor

Michał Szumlański

Redakcja oferion.pl

Zobacz również

Kontakt

E-mail: kontakt@oferion.pl

Korzystając z naszych porad, bez problemu poradzisz sobie z projektem firmowych gadżetów. Pokazujemy, jak ważne są firmowe wizytówki, oraz co powinno się na nich znajdować. Zaskocz swoich klientów oryginalnymi gadżetami reklamowymi.

Zadbaj o swój biznes: Ergonomiczna klawiatura, a komfort pracy biurowej