Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [www] Layout
Forum PHP.pl > Inne > Oceny
outsider
2.08.2010, 14:45:49
Witam

Prosze Was o ocene layout'u smile.gif Jest to nowa wersja strony, tekst jest z obecnej.

http://img686.imageshack.us/img686/6936/layoutsn.jpg

Pozdrawiam
wookieb
2.08.2010, 14:49:58
Brzydkie. Na pierwszy rzut oka widać, że jest robione przez osobę, która "pokombinowała z blending options" w photoshopie i nic więcej.
Zacznijmy od tego, jak dobrze potniesz górną część (powtarzalna tekstura?)
Sio z szeryfami.
To jest sztuka a na moje oko jest to brzydkie.
Ocena 3/10
phpion
2.08.2010, 14:56:05
Cytat(wookieb @ 2.08.2010, 15:49:58 ) *
To jest sztuka a na moje oko jest to brzydkie.

Nie tylko na Twoje winksmiley.jpg
outsider
2.08.2010, 14:59:29
ok, zaraz wypuszcze nowa wersje, dzieki za opinie tongue.gif
thomson89
2.08.2010, 15:04:25
- Szeryf może sprawdził by się w topie stronie i nagłówkach ale w reszcie - brzydkie.
- Dół nie pasuje do góry

+ Ładna tekstura w topie
Crozin
2.08.2010, 15:08:38
<troll>Żeby kancelarii adwokackiej nie było stać na grafika...?</troll>

W skrócie: brzydkie (nie chce mi się wymieniać co - całokształt)
outsider
2.08.2010, 16:35:15
~Crozin, w skrocie: do troll'a ci nie daleko winksmiley.jpg Lepiej napisalbys co jest nie tak, jakas rade, a nie pisac posty ktore nie sa na twoim poziomie.

Trudno mi bylo cos zmienic gruntownie, nie jestem dobrym grafikiem, tez nim nigdy nie bede, ale za rady jak zmienic/poprawic zeby bylo dobrze bylbym bardzo wdzieczny smile.gif

http://img30.imageshack.us/img30/5761/layoutnewox.jpg

Oscypek
2.08.2010, 17:06:39

Treści nie jest dużo do przekazania, ale niekoniecznie wszystko musi być takie duże? Grafiki dużo tam nie ma, to może warto nad typografią posiedzieć? Warto przeczytać, chociażby tutaj.

BTW Według mnie to nie jest sztuka, to jest rzemiosło - ma działać, ma być dla każdego. Jeżeli dobrze zrozumiałem sens tej wypowiedzi oczywiście smile.gif
outsider
3.08.2010, 09:34:55
troche poprawilem smile.gif
http://img84.imageshack.us/img84/2259/layoutnew2.jpg

teraz jak ?
thomson89
3.08.2010, 09:55:45
Jest już, ciutkę lepiej.

- W stopce, daj tę samą teksturę co w topie
- Usuń ze stopki te wypustki i zawrzyj je w teksturze co zrobisz
- Kolory menu nie pasują do reszty
- W menu te kreski pionowe zrób

+ Czcionki
SHiP
3.08.2010, 12:40:17
Hmm wygląda trochę na amerykański styl ale coś poszło nie tak:

  1. typografia: ogólnie jest dobrze ale
    1. rozmiar czcionek jest za duży
    2. na dole Kontakt jest źle umiejscowiony
    3. >> to cudzysłów niemiecki. Nie używaj go w listach.
    4. szerokość lini jest za duża
    5. dla własnego dobra lepiej nie mieszać krojów szeryfowych z nieszeryfowymi. Osobiście na tej stronie ustawiłbym szeryfowego Times ewentualnie Times new Roman jako krój główny
    6. dlaczego cały tekst na stronie wygląda jak pogrubiony?
    7. daj większy word-spacing w logo
    8. daj większy letter-spacing w nagłówkach: "Partnerzy", "Linki" w stopce
  2. Niebieski z fioletowym nie pasują


Ogólnie złożyłbym to troszkę inaczej. Całość zmniejszył dodał troche czerni(prawie czerni tj okolo #222) tu i tam i powinno to ładnie wyglądać.

Rada ode mnie: włącz wikipedię na złotym podziale i zastosuj coś takiego u siebie na stronie. Typograficznie wyjdzie cudo a dużo narobić się nie trzeba. Przy okazji zmniejszysz szerokosc lini dodając coś obok treści

outsider
3.08.2010, 14:17:25
Cytat(thomson89)
Usuń ze stopki te wypustki i zawrzyj je w teksturze co zrobisz

do konca nie wiem co masz na mysli smile.gif

Cytat(SHiP)
dlaczego cały tekst na stronie wygląda jak pogrubiony?

to jest projekt z photoshopa, napewno przez to.

zmniejszylem troche czcionki, kontakt wysrodkowalem. Nie bede teraz zmienial ukladu, chyba ze obecny jest do bani smile.gif

poprawione: http://img828.imageshack.us/img828/3761/layoutnew4.jpg
#222: http://img200.imageshack.us/img200/4231/layoutnew4b.jpg
thomson89
3.08.2010, 14:31:16
Ten drugi (#222) o wiele lepiej się prezentuje. Tylko tą niebieską linię usuń. I jednak troche tych świateł pousuwaj.

Chodziło mi o to, żeby zrównać stopkę.

http://ifotos.pl/zobacz/ttttt_wrhxax.png/
Damonsson
3.08.2010, 15:03:19
Nie, w życiu, ten czarny wygląda jak strona zakładu pogrzebowego.
SHiP
3.08.2010, 17:32:49 
[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. 	<meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
  4. 	<link href='http://fonts.googleapis.com/css?family=Vollkorn' rel='stylesheet' type='text/css'>
  5. <style type="text/css">
  6.  
  7. body,html, *{ margin:0; padding:0; border:0; font-family: 'Vollkorn', times, times new roman; color:#444;}
  8. body{ background:#eee; font-size:16px; }
  9. a{color:#222; text-decoration:none;}
  10. #wrapper{width:760px; margin: 0 auto;}
  11.  
  12. #top{padding:0.5em}
  13.  
  14. #nav{list-style:none; background:#fff; height:2em;}
  15. #nav li{float:left; padding:0.5em; margin-left:2em;}
  16.  
  17. #content{ width:470px; float:left; clear:both;}
  18. p{padding: 0.5em 1em; font-size:1em; line-height:1.5em; text-align:justify;}
  19. #content h2{padding:0.5em 0.5em; 0 0.5em;  letter-spacing:0.1em;}
  20.  
  21. #something{width:290px; float:left;}
  22.  
  23. #footer{clear:both; padding:5px}
  24.  
  25. h1{ text-align:center; font-size:3em; font-variant:small-caps; text-transform:capitalize; letter-spacing:0.1em;}
  26. #top h2{ text-align:center; font-size:2em; font-variant:small-caps; text-transform:capitalize; letter-spacing:0.1em;}
  27.  
  28. .box{width:220px; margin:0 5px; float:left; background:#fff; min-height:180px; padding:10px;}
  29. .box h3{text-align:center; letter-spacing:0.1em;}
  30. .box ul{ list-style:circle; list-style: none;}
  31. .box ul li{padding:0.5em;}
  32. .contact p{text-align:center}
  33. </style>
  34.  
  35. <head>
  36. <body
  37.  
  38. <div id="wrapper">
  39. 	<div id="top">
  40. 		<h1>Kancelaria adwokacka</h1>
  41. 		<h2>adwokat Kamil Draga</h2>
  42. 	</div>
  43.  
  44. 	<ul id="nav">
  45. 		<li>Home</li>
  46. 		<li>Kontakt</li>
  47. 	</ul>
  48.  
  49.  
  50. 		<div id="content">
  51. 			<h2>Title of something</h2>
  52. 			<p> Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque massa felis, tempus eu interdum et, porttitor id justo.</p>
  53.  
  54. 			<p>Nunc commodo fermentum nibh ut scelerisque.Fusce pretium, felis at porta commodo, sem neque convallis nunc, quis malesuada nisi turpis ac orci. Sed faucibus ultricies quam, vel ultricies elit commodo quis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur facilisis turpis a diam dictum molestie. Fusce sit amet ante purus, bibendum pretium massa. Phasellus vehicula eros gravida ipsum malesuada commodo.</p>
  55. 		</div>
  56.  
  57. 		<div id="something">
  58. 			<p>Nunc consequat ullamcorper ligula, ut varius nibh gravida vel. Pellentesque viverra auctor porttitor. Aenean tincidunt ante sit amet nunc mollis dignissim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.  Mauris laoreet orci eget turpis vehicula in interdum libero convallis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque massa felis, tempus eu interdum et, porttitor id justo.</p>
  59.  
  60.  
  61. 		</div>
  62.  
  63. 	<div id="footer">
  64.  
  65. 		<div class="box">
  66. 			<h3>Partnerzy</h3>
  67. 			<ul>
  68. 				<li><a href="#">Adwokat Grzegorz Kiwic, Jastrzębie Zdrój</a></li>
  69. 			</ul>
  70. 		</div>
  71.  
  72. 		<div class="box">
  73. 			<h3>Linki</h3>
  74. 			<ul>
  75. 				<li><a href="#">Sąd Najwyższy</a></li>
  76. 				<li><a href="#">Sąd Apelacyjny w Katowicach</a></li>
  77. 			</ul>
  78. 		</div>
  79.  
  80. 		<div class="box contact">
  81. 			<h3>Kontakt</h3>
  82. 			<p>adw. Kamil Draga<br/>
  83. 			ul. Wita Stwosza 7/217<br/>
  84. 			40-040 Katowice<br/>
  85. 			tel. kom. 506 227 786<br/>
  86. 			tel (fax) 32 494-05-40<br/>
  87. 			<a href="mailto:example@example.com">Napisz wiadomość</a>
  88. 		</div>
  89. 	</div>
  90.  
  91.  
  92. </div>
  93. </body>
  94. </html>
[HTML] pobierz, plaintext


Ja to w ten sposób widzę. Tutaj jest zero grafik ale masz mniej wiecej zasady typograficzne zachowane. Pisane na szybkiego wiec mogą być jakieś błędy.
outsider
5.08.2010, 16:36:23
Dzieki za odpowiedzi.
SHiP, dzieki za poswiecenie smile.gif
Przerobilem projekt, zloty podzial zrobiony na oko (w CSS zrobi sie dokladnie), stopke zmodyfikowalem:

http://img713.imageshack.us/img713/2083/layoutnew5.jpg

Czekam na dalsze opinie.

PS. Fajna sprawa te google font - niestety nie ma polskich znakow
thomson89
5.08.2010, 18:09:48
Jest o niebo lepiej niż na początku, ale nadal nie idealnie. Chciałbym zobaczyć to w wersji html, ponieważ tutaj ten szablon jest jakby zamglony.

EDIT: Kontakt, partnerzy linki, troszkę za mała czcionka.
Kujski
5.08.2010, 18:48:03
Przejrzałem wszystkie projekty i ostatni jest już w miarę czytelny smile.gif co mi się nie podoba:

- czcionka Times New Roman (wolę Arial lub Verdane)
- linki w stopce powinny być wg mnie ciut mniejsze i bez podkreślenia do tego najlepiej białe smile.gif
- górne menu troszkę mniejsze i czcionka również biała do tego litery w odnośnikach zapisane w stylu Strona główna, O mnie...
- dodanie jeszcze jednego koloru dla ożywienia strony - pomocny może okazać się Adobe Kuler http://kuler.adobe.com/

No i może jeszcze pare poprawek ale te by były najbardziej istotne smile.gif

PS. co do szerokości zawartości proponuję podział 960px szerokość całości a kolumny z tekstem 660px, boczna 300px ale to już kwestia gustu smile.gif
outsider
10.08.2010, 15:06:35
dzieki za rady, stworzylem cos takiego:
http://img835.imageshack.us/img835/7732/layoutnew6b.jpg
mam nadzieje ze lepiej tongue.gif
r4xz
10.08.2010, 15:37:37
lepiej i to znacznie. ode mnie 2 rady:
- tekst w lewej kolumnie "indywidualna praktyka adwokacka..." na czarno
- zmienić tło w nagłówku oraz stopce (np. kolor + mały gradient)
thomson89
10.08.2010, 19:49:00
W tej chwili, zmieniłbym tło w stopce na to co masz w menu.

Czemu mam wrażenie, że czcionka (tekst) na stronie jest lekko zielonkawa?

PS: Jak się zniechęcasz to porównaj pierwszy projekt z tym ostatnim tongue.gif
outsider
11.08.2010, 09:05:26
Cytat
Czemu mam wrażenie, że czcionka (tekst) na stronie jest lekko zielonkawa?

tak, #0b3928 smile.gif dac czarna ?

Cytat
PS: Jak się zniechęcasz to porównaj pierwszy projekt z tym ostatnim

od razu wracaja mi sily tongue.gif

po poludniu wrzuce poprawiona wersje
gigzorr
11.08.2010, 09:08:21
no ja bym na twoim miejscu spróbował czarny zamiast tego zielonkawego bo wnerwia =d
kolor newsa i ten cytat na dole moze zostac tak , ale tresc newsa czy czegos tam daj na czarny i pokaz .
Kujski
11.08.2010, 10:27:20
Ja komentarze i cytaty dałbym w takim stylu jak na obrazku smile.gif w kolorach dopasowanych do Twojej strony.

Przykładowy cytat.
outsider
11.08.2010, 17:03:25
Dzieki wszystkim za komentarze i dobre rady smile.gif
Gotowa strona:
http://kamildraga.pl/
Musze powiedziec ze nie bylo latwo z ta prawa kolumna smile.gif Pod IE(6,7,8) tylko po jednej poprawce tongue.gif az nie moglem uwierzyc...
thomson89
11.08.2010, 22:04:44
Jak dla mnie strona jest trochę za wąska. Jeszcze kolor cytatu bym zmienił bo się zlewa z tym obramowaniem.

Ogólnie: bajka! Gratuluje!


Ramzaa
12.08.2010, 17:50:55
Tak jak poprzednik - strasznie wąska strona, dałbym trochę szerszy content, a z pewnością ładniej by wyglądało. Ogólnie wrażenie pozytywne, tak trzymać.
r4xz
12.08.2010, 17:59:11
i problem z dolnym cieniem przy większych rozdzielczościach
darophp
12.08.2010, 18:20:09
980px i będzie ok, chociaż .. mógłbyś się postarać, bo od początku ten fiolet jest za ciemny !
Kujski
13.08.2010, 12:18:56
Brawo smile.gif bardzo ładna strona wyszła smile.gif
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.