# 125: Photoshopowanie pojedynczej strony wideo - CSS-Tricks

Anonim

W tym screencastie zajmiemy się zaprojektowaniem kolejnej bardzo ważnej strony. Jest to jedna z tych stron, które od początku fascynowały mnie projektowanie, ponieważ była ona szczególnie niedostatecznie obsługiwana przez ostatni projekt. W tym nowym projekcie podejdziemy do tego od podstaw i zaprojektujemy coś, co będzie lepiej pasowało do treści.

Pierwszą rzeczą do zrobienia jest maksymalne powiększenie samego filmu na stronie. Myślę, że byłoby wspaniale, gdyby film był większy na ekranie niż na YouTube. Lubię oglądać bardzo duże filmy, ale nie zawsze lubię pełny ekran - który ukrywa cały ekran.

Wtedy pojawia się pytanie, gdzie idzie tytuł filmu. Mamy już nagłówek witryny, nagłówek filmów i podrzędną nawigację z czarnym paskiem. Jeśli dołączymy również tytuł (i być może opis i metadane), który przesunie ten film o pełnej szerokości całkiem cholernie daleko w dół strony. Ta strona dotyczy wideo, więc trzymamy wideo nad innymi informacjami. Na szczęście możemy użyć czarnego paska, aby pokazać tytuł filmu, więc nie jest tak, że użytkownik jest zagubiony co do tego, na co patrzy lub gdzie się znajduje w hierarchii witryny.

Używamy również czarnego paska nawigacji, aby zaoferować link Subskrybuj w iTunes - który jest bardziej odpowiedni na tej stronie niż gdziekolwiek indziej w witrynie. To rodzaj dostosowywania szablonów treści, który sprawia, że ​​witryna się wyróżnia.

Pod filmem możemy utworzyć siatkę, która zasadniczo wygląda jak post na blogu, fragment, wpis w alamanacu lub cokolwiek innego. Treść i komentarze po lewej 2/3 i z boku (pasek boczny) treść po prawej 1/3.