Brief Projektowy: Mapa Drogowa Zanim Napiszesz Kod

Witajcie! 👋

Zbliżamy się do finału. Waszym zadaniem zaliczeniowym jest stworzenie własnej strony internetowej (One Pager / Landing Page). Technologia jest dowolna – może to być czysty HTML/CSS, może być WordPress, a dla ambitnych Next.js.

Ale zanim rzucicie się do VS Code, musimy porozmawiać o organizacji pracy.

Najczęstszy scenariusz porażki? Siadasz do komputera, piszesz <nav>, a potem gapisz się w ekran przez godzinę zastanawiając się: "Hmm, jaki kolor dać w tle i co w ogóle ma być w tej sekcji?".

Dziś wchodzimy w buty Agencji Interaktywnej. Wyobraź sobie, że jesteś wykonawcą, a Ty sam (lub Twój wymyślony biznes) jesteś Klientem. Żadna agencja nie zaczyna pracy bez dokumentu zwanego BRIEFEM.

🛑 Dlaczego musisz to zrobić?

Kodowanie to tylko tłumaczenie pomysłów na język maszyny. Jeśli nie masz pomysłu, nie masz co tłumaczyć. Dobry Brief to:

Oszczędność czasu: Nie zmieniasz koncepcji w połowie pracy.
Czysty kod: Wiesz, jakie sekcje są potrzebne, więc wiesz, jakich komponentów użyć.
Lepszy Design: Dobierasz kolory i fonty pasujące do celu, a nie "na czuja".

📋 Zadanie: Twój Brief Projektowy

Poniżej przygotowałem dla Was szablon. To Wasza "karta pacjenta" dla projektu. Waszym zadaniem jest skopiowanie poniższego schematu do notatnika i wypełnienie go PRZED rozpoczęciem kodowania.

To jest Wasz plan bitwy na projekt zaliczeniowy.

📄 SZABLON BRIEFU WWW (Kopiuj stąd)

1. Metryka Projektu

Nazwa Projektu: (np. "Kawiarnia u Ani" / "Portfolio Jana Kowalskiego")
Cel Strony: (Co użytkownik ma zrobić? np. "Zapisać się na newsletter", "Kupić e-booka", "Zadzwonić do mnie")
Grupa Docelowa: (Kto to będzie czytał? np. "Studenci szukający taniej kawy", "Rekruterzy IT")

2. Tożsamość Wizualna (Look & Feel)

Główny Kolor (Primary): (np. Granatowy #1e3a8a - oznacza zaufanie)
Kolor Akcentu (CTA): (np. Pomarańczowy #f97316 - do przycisków)
Styl: (Wybierz jedno: Minimalistyczny / Nowoczesny-Tech / Klasyczny-Elegancki / Brutalistyczny)
Inspiracje: (Wklej tutaj 2 linki do stron, które Ci się podobają wizualnie)

3. Struktura Treści (Sekcje One-Pagera)

Wypisz, co będzie na stronie, w kolejności od góry do dołu.

Navbar: (np. Logo + Linki: O mnie, Oferta, Kontakt)
Hero Section:
- Nagłówek (H1): (np. "Najlepsza Kawa w Mieście")
- Podtytuł: (np. "Wypalamy ziarna na miejscu. Sprawdź nas.")
- Przycisk (CTA): (np. "Zobacz Menu")
Sekcja 2 (np. O nas / Cechy): (Co tu będzie? 3 kafelki z ikonami?)
Sekcja 3 (Social Proof): (Opinie klientów / Zdjęcia z Instagrama / Logotypy technologii)
Sekcja 4 (Główna akcja/Formularz): (Gdzie użytkownik realizuje cel?)
Footer: (Copyright, Linki social media)

4. Stack Technologiczny

Technologia: (np. HTML+Tailwind / WordPress+InstaWP / Next.js+Shadcn)
Hosting: (Gdzie to wrzucisz? np. GitHub Pages / Vercel / TasteWP)

💡 Jak z tym pracować?

Pamiętacie lekcję o Promptowaniu? Ten wypełniony brief to idealny wsad dla AI!

Gdy już wypełnisz powyższy szablon, możesz go wkleić do chatu (ChatGPT/Claude) z dopiskiem:

"Działaj jako Senior Web Developer. Na podstawie powyższego briefu przygotuj mi strukturę plików HTML oraz tekst na stronę (Copywriting). Zaproponuj klasy Tailwind CSS pasujące do wybranej kolorystyki."

Dzięki temu w 5 minut masz gotowy szkielet, który normalnie tworzyłbyś 2 godziny.

🎯 Co podlega ocenie na zaliczeniu?

Nie oceniam Twojego gustu artystycznego (od tego jest ASP). Oceniam:

Spójność: Czy strona realizuje cel z Briefu?
Wykonanie: Czy linki działają? Czy obrazki się ładują?
Responsywność: Czy strona nie "rozjeżdża się" na telefonie?

Bierzcie szablon, wypełniajcie i do dzieła. Dobry plan to połowa sukcesu. Powodzenia! 🚀

Witajcie! 👋

Ale zanim rzucicie się do VS Code, musimy porozmawiać o organizacji pracy.

🛑 Dlaczego musisz to zrobić?

Kodowanie to tylko tłumaczenie pomysłów na język maszyny. Jeśli nie masz pomysłu, nie masz co tłumaczyć. Dobry Brief to:

Oszczędność czasu: Nie zmieniasz koncepcji w połowie pracy.
Czysty kod: Wiesz, jakie sekcje są potrzebne, więc wiesz, jakich komponentów użyć.
Lepszy Design: Dobierasz kolory i fonty pasujące do celu, a nie "na czuja".

📋 Zadanie: Twój Brief Projektowy

To jest Wasz plan bitwy na projekt zaliczeniowy.

📄 SZABLON BRIEFU WWW (Kopiuj stąd)

1. Metryka Projektu

Nazwa Projektu: (np. "Kawiarnia u Ani" / "Portfolio Jana Kowalskiego")
Cel Strony: (Co użytkownik ma zrobić? np. "Zapisać się na newsletter", "Kupić e-booka", "Zadzwonić do mnie")
Grupa Docelowa: (Kto to będzie czytał? np. "Studenci szukający taniej kawy", "Rekruterzy IT")

2. Tożsamość Wizualna (Look & Feel)

Główny Kolor (Primary): (np. Granatowy #1e3a8a - oznacza zaufanie)
Kolor Akcentu (CTA): (np. Pomarańczowy #f97316 - do przycisków)
Styl: (Wybierz jedno: Minimalistyczny / Nowoczesny-Tech / Klasyczny-Elegancki / Brutalistyczny)
Inspiracje: (Wklej tutaj 2 linki do stron, które Ci się podobają wizualnie)

3. Struktura Treści (Sekcje One-Pagera)

Wypisz, co będzie na stronie, w kolejności od góry do dołu.

Navbar: (np. Logo + Linki: O mnie, Oferta, Kontakt)
Hero Section:
- Nagłówek (H1): (np. "Najlepsza Kawa w Mieście")
- Podtytuł: (np. "Wypalamy ziarna na miejscu. Sprawdź nas.")
- Przycisk (CTA): (np. "Zobacz Menu")
Sekcja 2 (np. O nas / Cechy): (Co tu będzie? 3 kafelki z ikonami?)
Sekcja 3 (Social Proof): (Opinie klientów / Zdjęcia z Instagrama / Logotypy technologii)
Sekcja 4 (Główna akcja/Formularz): (Gdzie użytkownik realizuje cel?)
Footer: (Copyright, Linki social media)

4. Stack Technologiczny

Technologia: (np. HTML+Tailwind / WordPress+InstaWP / Next.js+Shadcn)
Hosting: (Gdzie to wrzucisz? np. GitHub Pages / Vercel / TasteWP)

💡 Jak z tym pracować?

Pamiętacie lekcję o Promptowaniu? Ten wypełniony brief to idealny wsad dla AI!

Gdy już wypełnisz powyższy szablon, możesz go wkleić do chatu (ChatGPT/Claude) z dopiskiem:

"Działaj jako Senior Web Developer. Na podstawie powyższego briefu przygotuj mi strukturę plików HTML oraz tekst na stronę (Copywriting). Zaproponuj klasy Tailwind CSS pasujące do wybranej kolorystyki."

Dzięki temu w 5 minut masz gotowy szkielet, który normalnie tworzyłbyś 2 godziny.

🎯 Co podlega ocenie na zaliczeniu?

Nie oceniam Twojego gustu artystycznego (od tego jest ASP). Oceniam:

Spójność: Czy strona realizuje cel z Briefu?
Wykonanie: Czy linki działają? Czy obrazki się ładują?
Responsywność: Czy strona nie "rozjeżdża się" na telefonie?

Bierzcie szablon, wypełniajcie i do dzieła. Dobry plan to połowa sukcesu. Powodzenia! 🚀