Jak stworzyć makietę do następnego projektu internetowego za pomocą Adobe XD

Jedną z najbardziej ekscytujących części tworzenia nowej strony internetowej jest faza tworzenia projektu. W wielu przypadkach ludzie po prostu uruchamiają WordPressa i zaczynają testować projekty. Jednak takie podejście nie jest najlepsze, jeśli chcesz jak najszybciej uruchomić swoją witrynę.

Makiety do projektowania stron internetowych pozwalają naszkicować, jak będzie wyglądać Twoja witryna. Gdy masz już makieta na miejscu, wszystko, co musisz zrobić, to przetłumaczyć ją na ekran i gotowe. W tym artykule porozmawiamy o tym, dlaczego warto używać makiet do następnego projektu internetowego. Następnie przedstawimy Ci Adobe XD, bezpłatne narzędzie, którego możesz używać do tworzenia makiet, i nauczymy Cię, jak z niego korzystać.

Wyśmiejmy to!

Dlaczego powinieneś tworzyć makiety dla swoich stron internetowych

Wielu z nas lubi szkicować wstępne projekty nowych stron internetowych, zanim zaczniemy nad nimi pracować. Nie musi to być nic wymyślnego – wyobraź sobie rodzaj szkicu, który wykonałbyś na odwrocie serwetki, i wpadniesz na pomysł.

To właśnie nazywamy „szkieletem” projektu. To odwzorowanie w niskiej wierności tego, jak wyglądałby produkt końcowy. Chodzi o to, abyś mógł przelać swoje pomysły na papier, zobaczyć, czy mają sens i podzielić się nimi z innymi.

Z drugiej strony makiety są znacznie bardziej wierne. Zamiast serwetki prawdopodobnie zechcesz użyć dedykowanego narzędzia do projektowania. Celem w tym przypadku jest zaprojektowanie czegoś, co będzie jak najbardziej przypominało produkt końcowy.

Istnieje wiele zalet tworzenia makiet do projektów internetowych, takich jak:

• Zaplanuj cały projekt witryny bez konieczności dotykania wiersza kodu lub kreatora stron.
• Możesz zwizualizować położenie każdego elementu, jego wygląd i sposób, w jaki do siebie pasują.
• Możesz przejrzeć makiety z innymi członkami swojego zespołu, aby uzyskać więcej informacji zwrotnych.
• Dużo łatwiej jest pokazać klientowi makietę niż zbudować całą stronę internetową, a następnie zapytać go o zdanie.

Tworzenie makiet stron Twojej witryny ma wiele zalet. Wymagają jednak również dużo dodatkowej pracy, ponieważ nie będą się składać. Aby stworzyć makiety o wysokiej wierności, potrzebujesz doświadczenia z wyspecjalizowanymi aplikacjami do projektowania. Mając to na uwadze, przejdźmy do następnej sekcji.

Wprowadzenie do Adobe XD

Adobe XD to lekka aplikacja stworzona, aby pomóc projektantom UX/UI w tworzeniu wysokiej jakości szkieletów, obszarów roboczych, interaktywnych prototypów i makiet. W przeciwieństwie do innych aplikacji Adobe nie potrzebujesz subskrypcji, aby korzystać z Adobe XD. Po prostu załóż bezpłatne konto Adobe, pobierz i zainstaluj aplikację i gotowe.

Chociaż aplikacja zawiera podobne funkcje do innych programów, takich jak Photoshop, Adobe XD jest bardziej nastawiony na projektowanie UX/UI. Na przykład umożliwia łatwe dodawanie do projektów elementów, takich jak przyciski i formularze. Może nawet aktualizować elementy w wielu obszarach roboczych, takie jak logo, jeśli wszystkie są częścią tej samej witryny. W połączeniu wszystkie te cechy sprawiają, że tworzenie makiet jest dziecinnie proste.

Kluczowe cechy:

• Twórz obszary robocze dla swoich makiet i makiet.
• Projektuj układy dla sieci i urządzeń mobilnych.
• Z łatwością dodawaj do swoich projektów niemal każdy rodzaj elementu, jaki możesz sobie wyobrazić.
• Aktualizuj połączone elementy (takie jak logo) w wielu projektach jednocześnie.

Cena: za darmo | Więcej informacji

Jak tworzyć makiety internetowe za pomocą Adobe XD

Aby rozpocząć, przejdź do strony głównej Adobe XD i kliknij przycisk Pobierz XD za darmo . Nowa strona otworzy się teraz i pobieranie powinno rozpocząć się automatycznie. Po zakończeniu uruchom plik instalatora, który poprosi o podanie danych logowania do konta Adobe, zanim będziesz mógł kontynuować:

Pamiętaj, że nie potrzebujesz płatnej subskrypcji, aby wykonać ten krok, więc po prostu załóż bezpłatne konto Adobe, jeśli go nie masz. Gdy to zrobisz, wprowadź swoje dane uwierzytelniające do instalatora, a rozpocznie się pobieranie aplikacji Adobe XD. Proces powinien zająć tylko kilka minut, ale pamiętaj, że Adobe zainstaluje jednocześnie swoją Creative Cloud.

Gdy Adobe XD będzie gotowy do pracy, możesz uruchomić program i zapyta Cię, jaki rodzaj projektu chcesz najpierw rozwiązać:

W tym samouczku wybraliśmy opcję Web 1920 , którą widzisz na powyższym obrazku. Po wejściu do Adobe XD na środku ekranu pojawi się pusty kwadrat reprezentujący nowy obszar roboczy:

Możesz dodać wiele obszarów roboczych – każdy reprezentujący unikalną stronę – klikając przycisk Warstwy w lewym dolnym rogu ekranu. Teraz wybierz swój początkowy obszar roboczy, wybierz opcję Duplikuj , a na pulpicie pojawi się nowy obszar roboczy:

Możesz dowolnie przeskakiwać między obszarami roboczymi, ale na razie skupmy się na tym, jak edytować tylko jeden, który będzie naszą makietą strony głównej. Wybierzmy jeden z obszarów roboczych i nieco zwiększmy powiększenie, korzystając z menu po prawej stronie ekranu:

To samo menu zawiera opcje dostosowywania rozmiaru obszaru roboczego, wypełniania go kolorem i wyświetlania siatki, dzięki czemu masz lepszą kontrolę nad umieszczanymi w nim elementami. Na razie po prostu ustaw kolor tła:

Teraz dodajmy pierwszy element naszej makiety, dodatkowy pasek nawigacyjny u góry ekranu. Możemy to zrobić za pomocą narzędzia Prostokąt w menu po lewej stronie:

Poszliśmy dalej i dodaliśmy trochę koloru tła do paska nawigacyjnego, a także tekstu, używając narzędzia Tekst z menu Adobe XD:

Teraz przejdźmy dalej i zobaczmy, jak Adobe XD radzi sobie z wezwaniem do działania (CTA). Aby go dodać, ponownie użyjmy narzędzia Prostokąt . Zaokrągliliśmy także rogi przycisku za pomocą menu po prawej stronie, a także ustawiliśmy kolor tła i dodaliśmy do niego tekst:

Na powyższym zrzucie ekranu widać opcję używania zaokrąglonych rogów zamiast zwykłych, a już wiesz, jak dodać tekst i zmienić kolor tła. Następnie popracujmy jeszcze raz nad zwykłym menu, używając narzędzi Tekst i Prostokąt . Oto jak wygląda nasza makieta po kilku przejściach:

W tym momencie jesteśmy gotowi do dodania logo Elegant Themes, przeciągając plik obrazu z naszego komputera do naszego obszaru roboczego:

Jeśli nie zauważyłeś, tworzymy makietę indeksu bloga Elegant Themes. Oczywiście proporcje nie są idealne, a kilka szczegółów jest błędnych. Jednak naszym celem było pokazanie, co możesz zrobić z Adobe XD nawet bez praktyki.

Następnie dodajmy główny nagłówek i pasek wyszukiwania za pomocą (zgadłeś), narzędzi Prostokąt i Tekst :

Teraz, aby uzyskać coup de grace , dodajmy do naszej makiety fragmenty wpisów na blogu. Na początek dodajmy jeszcze dwa prostokąty do naszego obszaru roboczego. Możesz go utworzyć i powielić, aby ułatwić sobie życie. Gdy je przeciągniesz, zauważysz, że Adobe XD pokazuje wymiary, aby utrzymać je w jednej linii:

Teraz mamy nasze dwa puste prostokąty. Dodajmy do nich tytuły za pomocą narzędzia Tekst :

Na koniec dodajmy polecane obrazy każdego posta. Tak jak poprzednio, musisz przeciągnąć pliki obrazów do Adobe XD z komputera.

Cofnijmy się teraz o krok i spójrzmy na naszą pełną makietę:

Nie jest to idealna gra co do piksela, ale wygląda wystarczająco dobrze, aby rozpocząć raczkującą próbę. Innymi słowy, korzystanie z Adobe XD powinno być spacerkiem po parku, nawet jeśli nie masz doświadczenia w korzystaniu z narzędzi do projektowania – i możesz za jego pomocą stworzyć naprawdę fajne makiety.

Ostatecznie każda makieta tworzona w Adobe XD obejmuje dodawanie żądanych elementów, używanie odpowiednich kolorów i umieszczanie obrazów tam, gdzie jest to potrzebne. Każda z tych czynności jest dość prosta, więc nie ma się czego bać.

Wniosek

Makiety to doskonały sposób na przeniesienie wszystkich pomysłów na papier (lub ekran). Następnie możesz je udoskonalać, aż znajdziesz idealny projekt dla swojej witryny. Dużo łatwiej jest tworzyć wiele makiet, a następnie próbować je później replikować w witrynie, więc jest to technika, którą powinieneś przyjąć.

Korzystając z Adobe XD, tworzenie makiet o wysokiej wierności staje się bardzo proste. Nie ma tak dużego nacisku jak Photoshop, ale może wykonać świetną robotę, jeśli chodzi o makiety i makiety (plus, jest darmowy!).

Masz pytania dotyczące używania Adobe XD do tworzenia makiet dla swoich witryn internetowych? Porozmawiajmy o nich w sekcji komentarzy poniżej!

Obraz miniatury artykułu autorstwa Darko 1981 / shutterstock.com