Moja pierwsza strona "material design".

pytanie zadane 11 lipca 2015 w Nasze projekty przez DL TD Nałogowiec (36,710 p.)
edycja 3 września 2015 przez DL TD

Przez ostatnie 3 dni robiłem swój pierwszy layout, który ma przypominać lekko nowoczesny design. Niestety samemu nie jestem w stanie jej ocenić. Wszystkie uwagi na temat zmian i rad na przyszłość mile widziane :)

9 odpowiedzi

odpowiedź 11 lipca 2015 przez Hubert Murawski Stary wyjadacz (11,990 p.)

Czy ktoś kto wypowiadał się w tym temacie ma jakiekolwiek pojęcie o material design? Link już dostałeś do instrukcji od googla, ale jak na pierwszą stronę masz +. Jeżeli mieli byśmy się wgłębiać, bardziej jest to flat-design. Nie będę kryrtykować wiedząc, że to pierwszy projekt.

Wytłumacze Ci czemu bardziej widzę tutaj flat - otóż material design ma sprawiać wrażenie elementów nakładających się na siebie, które są w jakiś tam swoich wymairach (takie pseudo 3d). Flat design jest uboższą wersją gmd, ponieważ nie istnieją w nim takie reguły.

Zostawiam Ci 3 linki:

https://www.google.com/fonts/ - czcionki

https://www.google.com/design/icons/ - material icons

https://www.google.com/design/spec/style/color.html#color-color-palette- material palette

Powodzenia! ;)

Pokaż 6 poprzednich komentarzy

komentarz 12 lipca 2015 przez Comandeer Guru (607,060 p.)

Nie mówię na żywca, ale osobiście częściej spotykam się z makietkami w HTML + CSS niż z projektami w ps

komentarz 12 lipca 2015 przez DL TD Nałogowiec (36,710 p.)

Wtrącę się do tej fascynującej dyskusji :D @Hubert Murawski dziękuję za opinię :)

komentarz 12 lipca 2015 przez Hubert Murawski Stary wyjadacz (11,990 p.)

Uwierz mi Comandeer w grafice ważny jest projekt - dlaczego? Jeżeli chcemy zrobić coś naprawdę dobrego zaczynamy od... kartki, ołówka + kawy :) skąd taki początek? Otóż rysując uwalniamy dużo więcej kreatywności (tu nie chodzi o jakikolwiek talent do rysowania - a o umiejętne rozplanowanie całej strony). Dalszy eteap to photoshop - przeniesienie swoich wizji do programu, oczwyiście zaczynając od szkieletu potem odpowiednie umieszczenie elementów, ikon, czcionek ble ble ble (tutaj mógł bym pisać i pisać bo jak wiadomo różnica między kartką a ps'em jest ogromna). Potem dopiero to co mamy przed oczami tniemy (chociaż w MD cięcie jest praktycznie nie potrzebne, jak i we flacie. Dlaczego? Ponieważ większość elementów to jednolite kolory i wszystko zbudować można w css'ie).

Dzielę wszystko na te 3 etapy (nie wspominając o projekcie RWD czy AWD). Takie działanie skutkuje pokojem pełnym kartek w każdym miejscu :D

Oczywiście, jeżeli chodzi o czas (w mojej robocie nie jest to priorytetem - priorytetem jest to by było to jak najlepsze zarówno w wyglądzie jak i kodzie, dlatego jeżeli chodzi o zlecenia cenię swoją robotę) mógłbym spędzać marne 3 godziny lecąc na bootstrapie i oddając strony praktycznie bez mojej ingernecji w kod (są już nawet specjalne programy wyglądające jak photoshop, gdzie ustawiamy elementy i tworzy on stronę w bootstrapie -.-), lecz tak jak i ty przykładasz wagę do poprawności kodu, ja staram się zrobić jak najwięcej mogę w grafcie. Zresztą wystarczy zapytać się osoby współpracujące ze mną (Arek jakieś przemyślenia o kolejnych poprawkach w moim wykonaniu? :D).

Osobiście nie spotkałem jeszcze grafika (dobrego grafika), który by robił strony na żywca. Z doświadczenia powiem, ze klient prędzej dostarczy sam narysowany projekt jaki by chciał, co często zaprojektować jest ciężko. Pomijając fakt, że graficy potrafią zaskoczyć wysyłając projekt np. w CORELU.

Reasumując sam kiedyś tworzyłem trochę tak, trochę tak i nie wychodziły z tego najlepsze efekty,

komentarz 12 lipca 2015 przez Comandeer Guru (607,060 p.)

Ale ja nie mówię bez projektu. Chodzi mi o to, że projekt jest tworzony np. na podstawie komponentów w HTML - czemu by nie?

Jasne, przy bardziej skomplikowanym projekcie graficznym bez PS-a się nie obejdzie, ale do prostszych da się to zaprojektować w przeglądarce (mówię o makietce/prototypie, nie od razu gotowym produkcie).

komentarz 12 lipca 2015 przez Hubert Murawski Stary wyjadacz (11,990 p.)

Dobra mniejsza już, z chęcią umówię się na jakieś piwo to wymienimy się poglądami :D Jak już wspomniałem lepiej zawsze coś tam zaprojektować bo potem jest łatwiej zrobić nawet tą samą makietę.

odpowiedź 11 lipca 2015 przez edios55 Bywalec (2,600 p.)

Strona jest ładna, wygląd bardzo schludny lecz jest jeden minus. Jest trochę "nużąca" , po prostu nic się nie dzieje. Jeśli chodzi o ożywienie strony to polecam oficjalną instrukcje od google gdzie masz opisane zasady material design KLIK!

komentarz 11 lipca 2015 przez DL TD Nałogowiec (36,710 p.)

dzięki za odnośnik! :D

odpowiedź 11 lipca 2015 przez Damianoo4444 Bywalec (2,700 p.)

Cześć, stronka wygląda w porządku, tylko lepiej byłoby pokazać ją już z logiem :D

I osobiście bym zmienił troche menu. Masz tak, że jest lekko przyciemnione, tam gdzie sa przyciski. Ja bym przyciemnienie zrobił dopiero po najechaniu razem z tą kreską co sie rozuswa :D

Pozdrawiam :D

komentarz 11 lipca 2015 przez DL TD Nałogowiec (36,710 p.)

dobry pomysł! dzięki za opinię :D

odpowiedź 11 lipca 2015 przez migacz100 Mądrala (5,410 p.)

Widzę, że masz dodaną klasę hover pod menu; gdzie przynajmniej u mnie żadnego efektu po najechaniu na odnośniki z menu nie ma.

komentarz 11 lipca 2015 przez DL TD Nałogowiec (36,710 p.)

Czy na twoim monitorze menu ustawiło się pionowo i buttony są pod sobą? Jeśli tak to wiem gdzie mam problem :)

komentarz 11 lipca 2015 przez DL TD Nałogowiec (36,710 p.)

Nad responsive jeszcze popracuję w tym menu.

komentarz 11 lipca 2015 przez migacz100 Mądrala (5,410 p.)

Dokładnie tak i po tym jak to napisałeś oddaliłem trochę ekran i widzę, że wygląda to całkiem dobrze. Nie wiem czy to cię zainteresuje, bądź nie ale podam swoje wymiary monitora: 1280x1024 może to cię nakieruje.

komentarz 11 lipca 2015 przez DL TD Nałogowiec (36,710 p.)

Właśnie miałem się zapytać o rozdzielczość. Dziękuję za pomoc! :D

komentarz 11 lipca 2015 przez DL TD Nałogowiec (36,710 p.)

Poprawiłem trochę @media ;) Teraz jest wszystko dobrze?

komentarz 11 lipca 2015 przez migacz100 Mądrala (5,410 p.)

+Tak u mnie dobrzę, i jeśli używasz chroma to polecam : crtl + shift + i, a potem kliknąć ikonkę telefonu z górnego menu. Przydatny bajer.

odpowiedź 11 lipca 2015 przez Mieszko I Stary wyjadacz (10,980 p.)

Fajna strona. Dodaj jeszcze takie efekty, jak:

Przyklejane menu główne (możesz skorzystać z trzeciego odcinka CSS Mirosława Zelenta)
Po najechaniu i kliknięciu na dany "przycisk" przyciemnij trochę jego tło.

To tyle. Pozdrawiam.

komentarz 11 lipca 2015 przez DL TD Nałogowiec (36,710 p.)

Dokładnie! Zapomniałem o tym przyklejaniu, a dopiero co oglądałem ten film :)

komentarz 11 lipca 2015 przez Mieszko I Stary wyjadacz (10,980 p.)


<script src="jquery-1.11.3.min.js"></script>
    
<script>

    $(document).ready(function() {
    var NavY = $('.nav').offset().top;
     
    var stickyNav = function(){
    var ScrollY = $(window).scrollTop();
          
    if (ScrollY > NavY) { 
        $('.nav').addClass('sticky');
    } else {
        $('.nav').removeClass('sticky'); 
    }
    };
     
    stickyNav();
     
    $(window).scroll(function() {
        stickyNav();
    });
    });
    
</script>

Kod JS na szybko :)

odpowiedź 11 lipca 2015 przez iMineralis Początkujący (430 p.)

Strona pod względem kolorów ok - dobrze że ten żółty jest taki "łagodniejszy", przynajmniej nie rzuca się zbytnio w oczy. Na razie strona pod względem "innych inności" , czyli treści, animacji niestety jest nudna - ale rozumiem, jest to wersja strony nawet nie alpha, więc treści jako tako nie ma. Przydałoby się, żeby div z tekstem miał taką szerokość, jak wszystkie guziki tzn. szeroki od początku guzika "More" do końca guzika "About Me" :> Daję 7/10 jak na ten etap :P

odpowiedź 11 lipca 2015 przez Ivan Maniak (60,650 p.)

odpowiedź 11 lipca 2015 przez HaKIM Szeryf (87,590 p.)

Oceniłbym projekt, ale niestety nie wiem do kogo ma trafiać ta stronka ani o czym jest. : /

To tak jakby powiedzieć o stronie czarnej że jest piękna, bez wiedzy o tym że ma być ona o kwiatach.

Pozdrawiam. :)