• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Jakie narzędzie do tworzenia mockupów strony dla amatora

Aruba Cloud - Virtual Private Server VPS
+3 głosów
290 wizyt
pytanie zadane 30 czerwca 2024 w Rozwój zawodowy, nauka, praca przez Nosferatu1922 Początkujący (370 p.)

W skrócie o co chodzi - robię hobbystycznie strony internetowe, w różnych technologiach. O ile od strony technicznej nie mam większych problemów, o tyle żeby być samodzielnym w 100% to muszę też ogarniać takie rzeczy jak design strony. I tu zaczynają się schody, bo nie mam jakiegoś szczególnego talentu artystycznego, więc szukam jakiegoś prostego narzędzia które pomoże mi szybko przygotować wizualizację tego co chcę osiągnąć. Założenia: 

  1. Program nie musi być darmowy.
  2. Pracuję sam, nie potrzebuję żadnych dodatków ułatwiających pracę w zespole.
  3. Nie chcę i nie potrzebuję uzyskać żadnego kodu, żaden html, css nic. Szybciej sobie to wyklikam od zera patrząc na wizualizację, niż będę się wczytywał w dokumentację jakiegoś progamistycznego barachła. Idealnie gdyby finalnym efektem był jakiś plik graficzny czy inny pdf, po prostu widok. 
  4. Najważniejsze - potrzebuję mieć dostęp do bogatej biblioteki templatek, nie wyobrażam sobie robienia takich rzeczy od zera, zmarnuję mnóstwo czasu, a efekt będzie i tak mizerny. 

 

Z tego co testowałem do tej pory - najlepsza dla mnie wydaje się Canva, ale jest to dalekie od ideału - po pierwsze opcje designerskie są aż za bardzo uproszczone, widać że to nie jest program robiony z myślą o tworzeniu stron, po drugie ilość templatek tylko na początku wydaje się duża, tak naprawdę nawet z wersją pro nie ma szału. Olbrzymim plusem jest możliwość korzystania z gotowych i robienia samemu różnych assetów typu logo itp.

Figma - chyba overkill dla mnie, mnóstwo niepotrzebnych rzeczy typu opcje dla zespołów, poza tym o ile mógłbym się musić i nauczyć interfejsu, to bez jakiegoś szablonu się nie obejdzie, więc chyba musiałbym dodatkowo wykupić jakieś biblioteki z szablonami czy coś.

Pokładałem spore nadzieje w narzędziach AI i generalnie jest to bezwartościowy śmietnik. Ma to może sens przy generowaniu jakiegoś drobnego elementu dla strony, obrazka itp, ale dla całego layoutu to strata czasu. Nie testowałem tylko Midjouney, za darmo chyba się nie da, ale wątpie czy będzie aż tak bardzo lepszy.

Podsumowując - może ktoś zna/korzysta z jakichś innych narzędzi, których nie wymieniłem i może coś polecić. Albo ma inne przemyślenia odnośnie tego co wymieniłem i może mnie trochę w tym naprostować? Będę wdzięczny za wszystkie luźne przemyślenia.  

Aha - jest jeszcze jedna opcja - solidna kilkumiesięczna nauka web designu od podstaw. Żeby nie było - też to biorę pod uwagę, ale tak jak mówiłem - nie czuję żebym miał ku temu predyspozycje.

 

komentarz 2 lipca 2024 przez reaktywny Nałogowiec (46,230 p.)
Figma i Adobe XD.

Zapytaj ciotkę Google także o narzędzia on-line, są takie mniej znane, czasem darmowe i całkiem OK do podstawowych rzeczy.

1 odpowiedź

+2 głosów
odpowiedź 2 lipca 2024 przez coolxer Obywatel (1,080 p.)
wybrane 2 lipca 2024 przez Nosferatu1922
 
Najlepsza

Sporo czasu poświęciłem na naukę webdesignu, znam wiele zasad, dobrych praktyk i potrafię wskazać co i gdzie można poprawić, ale też brakuje mi drygu w tym kierunku i mam problem z tworzeniem własnych rozwiązań. 

Jakiś czas temu znalazłem relume. Pomijając funkcje generowania strony, jest dostępny całkiem fajny i pokaźny zestaw gotowych komponentów webowych. Co więcej udostępniony jest darmowy template do figmy (link), który zawiera nie tylko te komponenty, ale i ma zaimplementowanego stylebooka, który jest zlinkowany z tymi komponentami. Pozwala to nie tylko działać szybko, ale także osobom mniej "artystycznym" tworzyć dobre projekty, zgodne z podstawowymi zasadami dobrego UI i UX.

Do używania wymagana jest podstawowa znajomość figmy (do ogarnięcia pewnie w kilka godzin), bez zaawansowanych funkcji. Myślę, że na początek w zupełności starczy darmowa wersja figmy i chyba 3 pliki projektowe (zawsze można mieć kilka projektów w jednym pliku - jeśli nie są zbyt zaawansowane).

komentarz 2 lipca 2024 przez Nosferatu1922 Początkujący (370 p.)
Tak, gdzieś mi się już ta nazwa rzuciła w oczy, zdecydowanie przetestuję, jak mówisz że warto, Pozdrawiam :)
komentarz 2 lipca 2024 przez reaktywny Nałogowiec (46,230 p.)

@coolxer,  relume to głównie (w zasadzie tylko) jak ktoś korzysta z CMS Webflow.

1
komentarz 2 lipca 2024 przez coolxer Obywatel (1,080 p.)

Owszem jest to dedykowane głównie webflow i z nim działa najlepiej, ale nic nie stoi na przeszkodzie aby korzystać z gotowych komponentów i siatek relume i figmy w tradycyjny sposób, czyli po prostu projektując design strony, która później zostanie odwzorowana w dowolnej technologii (w przypadku webflow możemy to bezpośrednio exportować). Nie ma tutaj ograniczenia tylko do webflow. Z pewnych informacji wiem, że przygotowywana jest także integracja z Greenshift wp (fajny, szybki, lekki plugin do budowania strony na wordpressie), a gdyby ktoś korzystał z elementora to mniej rozbudowany, lecz podobny zestaw można znaleźć jako skelementor. Ja osobiście teraz przerzuciłem się na astro SSG (bezpieczne, łatwe w utrzymaniu strony statyczne) + sporadycznie wordpress, a do projektowania stosuję figma + relume.

komentarz 2 lipca 2024 przez reaktywny Nałogowiec (46,230 p.)
Do Astro rozumiem stosujesz figmę i relume?? Możesz napisać kilka zdań jak wygląda u Ciebie workflow pod Astro.js?  Jestem nim również mocno zainteresowany.
1
komentarz 2 lipca 2024 przez coolxer Obywatel (1,080 p.)
Generalnie jeśli chodzi o astro, to jestem dopiero na początku drogi - zapoznanie się z całym ekosystemem, przeglądniecie integracji i motywów - a ostatecznie utworzenie własnego. Trochę to czasu zajęło, ale myślę, że warto. Dopiero teraz będę stawiał na tym pierwszą stronę, co jednak biorąc pod uwagę przygotowanie powinno być naprawdę szybkie. Doceniam wordpressa, ale denerwuje mnie kilka rzeczy: bezpieczeństwo, utrzymanie i aktualizacje, ciągłe ograniczenia i limity funkcjonalności oferowane przez wtyczki (instalacja kolejnych to problemy z wydajnością, a własne wdrożenia nie są tak proste). W astro wszystko odpada, a jedyną wadą dla kogoś może być brak możliwości samodzielnej edycji i uzależnienie od kodera (co według mnie może być nawet plusem, bo ktoś bez wiedzy i doświadczenia tylko może popsuć stronę), a w tym przypadku zamiast za utrzymanie i opiekę, może płacić za realny rozwój strony. Według mnie to się nadaje także do bloga (plusem użycie markdown), a wyjątkiem jest ecommerce i portal z newsami.

Co do workflow to tak jak wspomniałem nie mam jeszcze wypracowanego jakiegoś solidnego, ale wstępnie wyobrażam sobie to tak, że najpierw projektuję stronę w figmie (z użyciem pakietu od relume), a następnie wdrażam ten projekt z użyciem mojego szablonu w astro, konfigurując design system w tailwind. Nie ma zatem tutaj nic magicznego, ale użycie siatek relume + konfiguracja tailwind pozwala to nieco przyspieszyć i umilić. Nie jestem też fanem stosowania całkowitych gotowców czy nawet ich części a relume daje tylko siatki.

A jak to wygląda u Ciebie? Zajmujesz się stronami internetowymi zawodowo? Mi osobiście ciężko jest ruszyć ze sprzedażą swoich usług i projektów. Ogrom pracy włożyłem w poznawanie różnych technologii (od stricte coderskich, po różne rozwiązania wordpressowe i webflow) i web designu i trochę kręcę się w kółko. Ideałem byłoby znalezienie kogoś, kto już to ogarnia i szuka kogoś do pomocy.
1
komentarz 3 lipca 2024 przez reaktywny Nałogowiec (46,230 p.)
Jeszcze w Astro nic nie robiłem, dopiero mu się przyglądam.

Jak szukasz ofert pracy / zleceń to polecam zrobić portfolio kilku stron i zarejestrować się na UseMe.com - Firmy same będą się zgłaszać, ponadto jest lista zleceń pod linkiem:

https://useme.com/pl/jobs/category/serwisy-internetowe,34/

Podobne pytania

0 głosów
0 odpowiedzi 282 wizyt
pytanie zadane 26 grudnia 2020 w Inne języki przez an0nymous123 Początkujący (280 p.)
–1 głos
1 odpowiedź 430 wizyt
0 głosów
1 odpowiedź 912 wizyt
pytanie zadane 21 grudnia 2018 w HTML i CSS przez jared Gaduła (3,600 p.)

93,324 zapytań

142,323 odpowiedzi

322,390 komentarzy

62,653 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...