Jak zachować responsywność w projektach
Responsywne projektowanie stron internetowych jest popularne i nie jest absolutnie żadnym sekretem. Tego oczekują eksperci i na co wiele marek się zmienia. Nie chodzi tylko o stworzenie witryny przystosowanej do urządzeń przenośnych, ale o udostępnienie witryny każdemu rozmiarowi przeglądarki, na komputerze, tablecie lub smartfonie.
Najtrudniejszą częścią projektowania responsywności jest stworzenie witryny wyglądającej na dużą i małą. Zanim rozwiniesz swój program projektowy i pójdziesz do pracy, musisz wziąć pod uwagę wiele rzeczy. Jest to dodatkowy krok, który zwykle kończy się na tym, że warto go mieć w gotowym produkcie. Jest to bardzo oczywiste, gdy projektant nie planuje reakcji; strony zazwyczaj wyglądają naprawdę nudne i nudne.
To absolutnie konieczne, aby projektanci zachowali kreatywność w responsywnych witrynach. Coraz więcej osób używa tabletów i smartfonów, więc chcesz mieć pewność, że wszyscy będą mogli przeglądać Twoją witrynę. Oto kilka wskazówek, które pomogą Ci zachować kreatywność i skuteczność podczas projektowania responsywnej sieci.
1. Użyj doskonałej typografii
W przypadku witryn responsywnych musisz zastanowić się, co będzie dobrze wyglądać na mniejszym ekranie. Dobra typografia jest podstawą każdego dobrego projektu strony internetowej, ale jest prawie niezbędna w responsywnym projektowaniu stron internetowych. W miarę zmniejszania się rozmiarów ekranu, większość elementów powinna się również przekształcać, zmniejszać lub przesuwać. Przede wszystkim twoja typografia powinna mieć taką możliwość.
Po drugie, powinieneś używać różnych nagłówków i różnych rozmiarów w tekście. Teraz zwykle używamy bardzo dużych nagłówków i nagłówków do naszych projektów na komputery stacjonarne. Nie musi to w całości zostać przerwane, ponieważ myślisz o mniejszych rozmiarach. Tylko upewniając się, że używasz wtyczki, na przykład FitText, aby zmniejszyć rozmiary tekstu. To pomaga.
Kowal używa wielu różnych krojów, aby stworzyć bardzo interesujący wygląd i styl. Różnią się także rozmiarami tych czcionek na całej stronie. Co ciekawe w trybie pulpitu, sposób w jaki tekst i akapity są ułożone w różnych kolumnach. Kiedy okno jest zmniejszane, tekst zwija się w jedną kolumnę. Na szczęście tekst pozostaje spójny, zachowując tę samą skalę i styl.
Smashing magazine ma tendencję do robienia tego samego. Pozbywają się prawej strony projektu (reklam) całkowicie, gdy okno jest zmniejszane. Jednak tekst zawija się w oknie, a style, kolory i rozmiary pozostają spójne.
2. Używaj wspaniałych obrazów
Obrazy, podobnie jak typografia, są niezwykle ważne w każdym projekcie strony internetowej. Podobnie jak w przypadku typografii, w projektach responsywnych, gdy przeglądasz witrynę na mniejszych ekranach, Twoje zdjęcia również powinny wydawać się mniejsze lub pomniejszone. Istnieje mnóstwo różnych układów i różnych rozmiarów obrazu, które można wykorzystać w responsywnym projekcie. Ważne jest, aby zwracać uwagę na wybrane zdjęcia i sposób ich używania, ponieważ niewątpliwie ulegną one zmianie. Gdy ekrany stają się większe lub mniejsze, obrazy zmieniają kształt i ujawniają lub wycinają pewne fragmenty obrazu.
Najlepiej, jeśli chcesz, aby duże, fotograficzne obrazy nie zawierały graficznej zawartości, która może zostać wykadrowana po zmianie rozmiaru okna. Ponadto, podczas tworzenia graficznych obrazów, musisz upewnić się, że tworzysz obraz, który ładuje się szybko i będzie widoczny na mniejszym ekranie. To dlatego projektanci przyjęli płaską konstrukcję. To po prostu łatwiejsze.
W Pandiscio najpierw musisz zauważyć, jak większy obraz nagłówka wygląda na pulpicie. Jest pełny, rozciąga się na boki i jest dość wysokiej jakości. W miarę zmniejszania rozmiaru okna obrazy stają się mniejsze, zmieniają kształt (z prostokątnego na kwadratowy) i zostają przycięte. Znalazły obrazy, które wyglądają dobrze, gdy ekran zmienia rozmiar.
KinHR to strona, która wykorzystuje wiele różnych elementów graficznych, a także fotografie. Zauważ, że gdy duże i małe, obrazy nagłówka stają się mniejsze, jak na stronie Pandiscio. Jednak dzięki elementom graficznym ciała obrazy stają się mniejsze, ale zachowują swój kształt i nie są przycinane.
3. Nie śpij w nawigacji
Point blank, jeśli ludzie nie mają pojęcia, jak poruszać się po witrynie, to po prostu nie będą. Nawigacja jest trudniejsza w przypadku projektowania responsywnego, ponieważ jesteśmy przyzwyczajeni do tworzenia nawigacji dla projektów krajobrazu. Teraz musimy stworzyć nawigację, którą można łatwo skondensować, aby dopasować wymiary portretu.
To nie jest wielki problem, gdy masz garstkę linków. Możesz zmniejszyć lub zmniejszyć menu w pobliżu góry lub utworzyć menu rozwijane dla widzów. Najważniejsze jest to, jak radzisz sobie z nawigacją przy większej zawartości stron internetowych.
Mashable ma mnóstwo linków, ponieważ ma mnóstwo kategorii, a nawet więcej artykułów. Ponadto mają one własne strony firmowe, z którymi również trzeba się połączyć. Mashable postanawia stworzyć wyskakujące menu po lewej stronie ekranu dla mniejszych przeglądarek.
Monocle ma dwa najwyższe poziomy rozbudowanej nawigacji dla swojej witryny. W przypadku mniejszych przeglądarek utworzyli menu rozwijane dla największej zawartości i właśnie skrócili drugi poziom nawigacji.
4. Spraw, że będzie zabawny w użyciu
Kiedy klikniesz linki online, prawdopodobnie musisz tam usiąść i poczekać na załadowanie rzeczy, zanim zobaczysz stronę. Na telefonach jest bardzo denerwujące, aby dokładnie znaleźć następny przycisk, aby przejść do większej zawartości. Takie rzeczy nie są zabawne, ani intuicyjne.
Zwracając uwagę na szczegóły i sprawiając, że twoja strona jest bardziej intuicyjna, twoja strona jest bardziej dostępna. Zastanów się, jak to jest używać witryny w dowolnym rozmiarze przeglądarki. Zastanów się, jakie strony powinny zrobić, gdy wezwiesz do działania. Znajdź te rzeczy i napraw je, aby Twoja strona była łatwa, przyjemna i intuicyjna w użyciu. To także sprawia, że jest nieco bardziej interesujący!
Błoto czyni ich stronę bardziej interesującą, zwracając uwagę na ich przejścia. Tworzą one bardzo elegancki wygląd, pozwalając wielu elementom zsunąć się i zniknąć, zamiast po prostu poruszać się gwałtownie i pokazywać. To czyni świat różnicy.
Neue Yorke wykorzystuje wiele ruchów podczas przechodzenia z elementu portfolio do elementu. Znowu tworzy atmosferę bardzo wysokiej klasy i zachęca widzów do zainteresowania się tym, co wkrótce zostanie ujawnione.
5. Myśl poza polem
Kiedy wszystko inne zawiedzie, po prostu bądź kreatywny. Responsywne projektowanie stron internetowych nie ma na celu ograniczania sposobu, w jaki tworzymy witryny internetowe. Zawsze jest miejsce na kreatywność, czy to poprzez kodowanie czy projektowanie.
Enso stworzył witrynę, która wygląda na pozbawioną możliwości reagowania. Zwróć uwagę, jak nieco zmieniły układ, kiedy rozmiar się zmniejsza, ale zachowali swoją markę i kreatywność.
TBWA ma stronę, która ma świetny design. Ale mają też świetne obrazy. Mają też świetną typografię! Wykorzystali to wszystko, aby stworzyć wyjątkowy i interesujący responsywny projekt strony.
Wniosek
Utrzymanie kreatywności w responsywnym designie lub w dowolnym projekcie strony internetowej jest tak proste, jak wykreślenie koncepcji i rewizja, aby zachować swoje cele. Fajne rzeczy zdarzają się łatwiej, gdy zaczynasz planować, jak chcesz, aby Twoja strona działała i funkcjonowała, zamiast zaczynać od tego. Responsywne projektowanie stron internetowych nie musi być tak wielkim, wszechmocnym zadaniem, którego boją się projektanci. To raczej proste! Zachowaj wszystkie wcześniejsze rzeczy, o których dyskutowaliśmy, i twórz witryny, które są po prostu poza tym światem! Powodzenia dzięki responsywnemu projektowaniu stron internetowych.
Jakie wskazówki udostępniasz, aby angażować się w projektowanie responsywne? Czy znalazłeś bardzo kreatywny, responsywny projekt? Daj nam znać w komentarzach.