Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

2 Stron V   1 2 >  
 Reply to this topicStart new topic
> [www] Layout
outsider
post 2.08.2010, 14:45:49
Post #1





Grupa: Zarejestrowani
Postów: 267
Pomógł: 36
Dołączył: 8.08.2008

Ostrzeżenie: (0%)
-----

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

Ten post edytował *OuTSideR* 2.08.2010, 14:46:59
Go to the top of the page
+Quote Post
wookieb
post 2.08.2010, 14:49:58
Post #2





Grupa: Moderatorzy
Postów: 8 989
Pomógł: 1550
Dołączył: 8.08.2008
Skąd: Słupsk/Gdańsk
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


--------------------
9marshals.com, Fantastyka, Parser bbcode ( UPDATE 1.2 ), Kalkulator wielkości informatycznych
Go to the top of the page
+Quote Post
phpion
post 2.08.2010, 14:56:05
Post #3





Grupa: Moderatorzy
Postów: 6 070
Pomógł: 860
Dołączył: 10.12.2003
Skąd: Dąbrowa Górnicza
Cytat(wookieb @ 2.08.2010, 15:49:58 ) *
To jest sztuka a na moje oko jest to brzydkie.

Nie tylko na Twoje winksmiley.jpg
Go to the top of the page
+Quote Post
outsider
post 2.08.2010, 14:59:29
Post #4





Grupa: Zarejestrowani
Postów: 267
Pomógł: 36
Dołączył: 8.08.2008

Ostrzeżenie: (0%)
-----

ok, zaraz wypuszcze nowa wersje, dzieki za opinie tongue.gif
Go to the top of the page
+Quote Post
thomson89
post 2.08.2010, 15:04:25
Post #5





Grupa: Zarejestrowani
Postów: 1 178
Pomógł: 51
Dołączył: 7.01.2009
Skąd: Gdańsk

Ostrzeżenie: (0%)
-----

- 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


--------------------
Sklep 70%
Go to the top of the page
+Quote Post
Crozin
post 2.08.2010, 15:08:38
Post #6





Grupa: Zarejestrowani
Postów: 6 476
Pomógł: 1306
Dołączył: 6.08.2006
Skąd: Kraków

Ostrzeżenie: (0%)
-----

<troll>Żeby kancelarii adwokackiej nie było stać na grafika...?</troll>

W skrócie: brzydkie (nie chce mi się wymieniać co - całokształt)
Go to the top of the page
+Quote Post
outsider
post 2.08.2010, 16:35:15
Post #7





Grupa: Zarejestrowani
Postów: 267
Pomógł: 36
Dołączył: 8.08.2008

Ostrzeżenie: (0%)
-----

~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
Go to the top of the page
+Quote Post
Oscypek
post 2.08.2010, 17:06:39
Post #8





Grupa: Zarejestrowani
Postów: 6
Pomógł: 0
Dołączył: 7.02.2008

Ostrzeżenie: (0%)
-----


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
Go to the top of the page
+Quote Post
outsider
post 3.08.2010, 09:34:55
Post #9





Grupa: Zarejestrowani
Postów: 267
Pomógł: 36
Dołączył: 8.08.2008

Ostrzeżenie: (0%)
-----

troche poprawilem smile.gif
http://img84.imageshack.us/img84/2259/layoutnew2.jpg

teraz jak ?
Go to the top of the page
+Quote Post
thomson89
post 3.08.2010, 09:55:45
Post #10





Grupa: Zarejestrowani
Postów: 1 178
Pomógł: 51
Dołączył: 7.01.2009
Skąd: Gdańsk

Ostrzeżenie: (0%)
-----

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


--------------------
Sklep 70%
Go to the top of the page
+Quote Post
SHiP
post 3.08.2010, 12:40:17
Post #11





Grupa: Zarejestrowani
Postów: 697
Pomógł: 47
Dołączył: 19.12.2003
Skąd: Lublin

Ostrzeżenie: (0%)
-----

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



--------------------
Warsztat: Kubuntu, PhpStorm, Opera
Go to the top of the page
+Quote Post
outsider
post 3.08.2010, 14:17:25
Post #12





Grupa: Zarejestrowani
Postów: 267
Pomógł: 36
Dołączył: 8.08.2008

Ostrzeżenie: (0%)
-----

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

Ten post edytował *OuTSideR* 3.08.2010, 14:19:08
Go to the top of the page
+Quote Post
thomson89
post 3.08.2010, 14:31:16
Post #13





Grupa: Zarejestrowani
Postów: 1 178
Pomógł: 51
Dołączył: 7.01.2009
Skąd: Gdańsk

Ostrzeżenie: (0%)
-----

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/


--------------------
Sklep 70%
Go to the top of the page
+Quote Post
Damonsson
post 3.08.2010, 15:03:19
Post #14





Grupa: Zarejestrowani
Postów: 2 355
Pomógł: 533
Dołączył: 15.01.2010
Skąd: Bydgoszcz

Ostrzeżenie: (0%)
-----

Nie, w życiu, ten czarny wygląda jak strona zakładu pogrzebowego.
Go to the top of the page
+Quote Post
SHiP
post 3.08.2010, 17:32:49
Post #15





Grupa: Zarejestrowani
Postów: 697
Pomógł: 47
Dołączył: 19.12.2003
Skąd: Lublin

Ostrzeżenie: (0%)
----- 

[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.


--------------------
Warsztat: Kubuntu, PhpStorm, Opera
Go to the top of the page
+Quote Post
outsider
post 5.08.2010, 16:36:23
Post #16





Grupa: Zarejestrowani
Postów: 267
Pomógł: 36
Dołączył: 8.08.2008

Ostrzeżenie: (0%)
-----

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

Ten post edytował *OuTSideR* 5.08.2010, 16:47:29
Go to the top of the page
+Quote Post
thomson89
post 5.08.2010, 18:09:48
Post #17





Grupa: Zarejestrowani
Postów: 1 178
Pomógł: 51
Dołączył: 7.01.2009
Skąd: Gdańsk

Ostrzeżenie: (0%)
-----

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.

Ten post edytował thomson89 5.08.2010, 18:10:43


--------------------
Sklep 70%
Go to the top of the page
+Quote Post
Kujski
post 5.08.2010, 18:48:03
Post #18





Grupa: Zarejestrowani
Postów: 104
Pomógł: 14
Dołączył: 28.09.2008
Skąd: W.

Ostrzeżenie: (0%)
-----

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


--------------------
Sukces to droga od jednej porażki do drugiej, bez zmniejszonego entuzjazmu.
Go to the top of the page
+Quote Post
outsider
post 10.08.2010, 15:06:35
Post #19





Grupa: Zarejestrowani
Postów: 267
Pomógł: 36
Dołączył: 8.08.2008

Ostrzeżenie: (0%)
-----

dzieki za rady, stworzylem cos takiego:
http://img835.imageshack.us/img835/7732/layoutnew6b.jpg
mam nadzieje ze lepiej tongue.gif
Go to the top of the page
+Quote Post
r4xz
post 10.08.2010, 15:37:37
Post #20





Grupa: Zarejestrowani
Postów: 673
Pomógł: 106
Dołączył: 31.12.2008

Ostrzeżenie: (0%)
-----

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)


--------------------
GitHub
Go to the top of the page
+Quote Post
« Następny starszy · Oceny · Następny nowszy »
 

2 Stron V   1 2 >
Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 18.05.2024 - 02:45
Powered By IP.Board © 2024  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn