Hi everyone. I’m trying to do new design for my website. It’s local city website with news etc. This is actual website: http://jastrzebieonline.pl And I’m doing new version. I don’t want too much changes because users are used to this layout but I want to do it’s more modern way with modern design. For now I have this (it’s not complete yet): https://dl.dropboxusercontent.com/u/3690563/jo_final2.jpg Can you help me? Maybe you know some similar webpages with good design? I’m trying to do nice design but I also need to remember about clarity and making room for advertisers. It’s hard…
You misunderstand me. I know how to do website (I made this site from scratch on my own) but I need some advice ond webdesign.
To modernize it you have a lot of CSS work to do. The page is using all fixed dimensions using pixels. In today's world you need to have flexible pages that respond to the dimensions of the browser by using responsive units of measure like em, percentage, vw and vh. The animated banner ad is a huge negative factor. It takes up too much of the above the fold space and it is extremely distracting. Most user today will block ads on your site, because they find ads like that objectionable. If they block ads with something like ABP, then none of the ads will display. I think the first thing you ned to do is consolidate the CSS. Right now you have it all over the place including inline which is a real negative for maintenance and efficiency. If I was you The first thing I would do is remove all the CSS and reduce the page to a wireframe with nothing but markup for the layout. Then play with optional layouts to see if you can change the look without destroying the experience your users are used to getting. Then re-write the CSS to enhance the layout with flexibility in mind. If you need to support mobile then you are best to get a layout and presentation that works well on the very small screens and then build up to larger devices. If you do not need to support mobile then you should build flexibility to display from 800px width up to 1900px though I have found that a max-width of 1400px works well because most users with wider screens are not browsing at full width. As for specific detail, you are not going to get a lot of real detail help because the detailed design decisions need to come from knowing the site and its users and probably no one knows that better than you.
COBOLDinosaur, I know I need to do resposive site. That is why I want to do new design. But I want help with "designing city internet magazine" not HTML&CSS. I know a lot of css, responsive, resolutions topics. I'm making website for 5 years now but the biggest problem with this site is not how to do site itself but how to design it in terms of graphic.
Why hard? I've done it 5 years ago. And I build my own CMS so there is CMS but I don't want ready-made theme for my site. I want to build from scratch because it has to be unique. I need help with webdesigning not webdeveloping.
It's kind-of confusing trying to figure out what in blazes you are even asking for... but design and development SHOULD be the same thing, particularly if you are talking about taking the design responsive. This is because responsive design is the final step in a long line of stepping stones to accessible design and device neutrality -- concepts your existing page completely lacks as you are likely well aware (otherwise why would you be here?) That you seem to be concentrating on "designing it graphic" (also assuming massive language barrier issues here) means you've got your development process back-assward. Content of value, marked up semantically, so the content and markup dictate the layout. Building the markup with 100% semantics and ZERO concern for appearance at that stage (since if you choose your HTML based on the default appearance of the tags you're choosing all the wrong tags for all the wrong reasons), progressively enhanced with CSS, media targets and media queries for a semi-fluid, elastic AND responsive layout. It ALMOST sounds like you're asking for help with something like dicking around in Photoshop, which no matter how many sleazy scam artists claim otherwise is NOT web design. Could you better clarify what it is you actually want help with, as I'm just not getting it -- and from your reaction to what other posters have said I don't think anyone else here has deciphered your meaning either; though that existing site is a laundry list of how NOT to write a website, so have your HTML skills improved since that train wreck was made?
Yes, it's kind of around Photoshop thing. For me webdesign is layout, typography, colors etc. And I need help with that. Maybe in new design fonts are for example too small/too big, colors are bad, layout is too tight etc. Can you explain me why "existing site is a laundry list of how NOT to write a website"? I've improved my skills since then but I don't thing existing page is list of how not to write website.
Thing is web design should be about MORE than just the visual appearance of one particular screen media target -- that's part of what a LOT of people don't get is they can't see any farther than the screen they are seated in front of. Anyone telling you Photoshop is a web design tool doesn't understand what the web is enough to be flapping their gums on the subject. It's basically a giant scam run by the 'form over function' jacktards who really have no business making websites. Well first up it is (As you are likely aware) a fixed width design -- not even elastic. That's accessibility rubbish. Paddings, widths and heights should be declared in EM, NOT pixels so they automatically adjust to the default font size -- of course that only works if the fonts are dynamic which yours are not as you've declared those in pixels as well. Fixed widths with fixed metric (px) fonts is accessibility rubbish. You have design concepts like equal height fixed size boxes that by their very nature are dictating what the content must be and how it must be formatted instead of adjusting TO the content. That type of layout might fly for PRINT, but on the web it's one of those situations we we have to start chanting "The web is not print, the web is not print" You appear to have ZERO logical document structure with a H1 around something that is NOT the heading for the entire content of the page. Do you have the web developer toolbar for Firefox handy? Go into information -> document outline to see just how messed up your page is on that front. It is like your headings were chosen for their default font size and NOT the structural MEANING of headings, since I'm pretty sure that "Wizard of Taste, Ep. 6" is not a subsection of "2015 Hawk days this weekend" -- nor would "Cheap travel with Jacob Tip", "Show: Alice in Wonderland" or any of the other H3 present on the page be subsections of that "Wizard of Taste" heading. (translations provided by google translate) Worse, you have a lot of just plain anchors that SHOULD be headings that are just anchors with a class and a break tag -- that's gibberish. Remember just like in professional writing heading "levels" provide structural meaning, as do "rules" -- a H1 is the heading under which EVERYTHING on the page is a subsection, H2 indicate the start of subsections of the H1, H3 mean the start of subsections of the h2 before them, and so forth... just as a horizontal rule indicates a change in topic where heading text is unwanted/unwarranted. Something that was so obvious when TBL made HTML he didn't feel it needed to be documented -- and we've been paying for that ever since. Of course if you use those tags in that manner suddenly HTML 5's idiotic "section", "header", "footer" and "nav" tags serve no legitimate purpose other than code bloat. I mean you've got an empty anchor doing a H1 with text's job (you want an image there for the logo that's what Gilder-levin is for) as the first element on the page, you're using id's in a presentational manner (center? REALLY?), you have incomplete/malformed forms, scripttardery for nothing, static style in the markup, flashtardery that seems to be blocked or non-functional here, absolute URI's for no good reason on every anchor, gibberish URI's that shouldn't even FUNCTION (the ones with comma's in them), tables for nothing and even if that were tabular data (if there's only one TR it isn't) that would mean you have a SPAN doing CAPTION's job, gibberish use of the REL attribute (rel="0", rel="1"?!? Whiskey tango foxtrot is that even supposed to do?!?), MASSIVE STYLE tag (a tag that has no business in any modern document) with endless !important rules pissing on the page (if you have to resort to !important that much, you're doing something horrifyingly and terrifyingly WRONG), an OL wrapping DT, LI and P (meaning whoever wrote that section has no business writing HTML) in a TABLE for **** only knows what... Even your keywords META is banjaxed, since it's supposed to be 7 or 8 words that exist inside <body> as CDATA, not 264 bytes of random nonsense. Though at least it's not filled with full on sentences and phrases like some dumbasses out there do. You at least TRIED to stick to single words or proper names; you've just got too many of them. It doesn't end up too much of a surprise you've got 28k of markup for 5k of plaintext and maybe a dozen and a half content images, anywhere from two to three times as much code as needed, and from a semantics standpoint the code is either a giant run-on sentence or utter/complete gibberish. It's also why you ended up wasting 1.5 megabytes in 59 separate files to do the job of 300k in around two dozen (or less) files. "Semantics" being a sick euphemism for "using HTML properly" that is used so as not to upset the people who will never actually understand that. Pretty much what you have as a H1 should be a H2... most of your H3 should be H2... most of your free-floating anchors you are using as titles should be H2... and that very first anchor you're using for the logo? That should be inside a H1 with actual TEXT in it. You have to remember what HTML is for, saying what things are so the user-agent (browser, search engine, screen reader, braille reader) can best convey that information within the capabilities of the device. That's why you should choose your tags based on what they MEAN, NOT their default appearance. It's also why if you are saying what things look like in your HTML you are doing it all wrong -- and that includes class and ID names since things like "center" or "red" are such rubbish one might as well go back to writing HTML 3.2 ... and that's why the FIRST thing one should do is create the page as if your CSS screen layout is never even going to exist. The HTML should provide a logical document structure for user-agents that are not visual. In that same way images that are purely presentation have NO business in the markup. THEN you create your layoutS in CSS -- pay attention to that plural -- for the various media targets you want to go after enhancing the page. THEN if desired you enhance the page with scripting or hanging your presentational images on the layout -- though with CSS3 that's increasingly unneccessary. It's called progressive enhancement and separation of presentation from content, two things that site sorely lacks. The entire reason for doing it that way is called "graceful degradation" - so that should any fancy tech along the way -- images, CSS, scripting, etc, etc. be missing, blocked, or inapplicable the page is still useful to the visitor. Dicking around in Photoshop drawing goofy pictures is NOT going to provide that, and can rapidly paint you into a corner from a functionality and accessibility standpoint. Hence why I've rarely if ever seen a page where Photoshop was used for "design" that wasn't a useability and accessibility nightmare. Stuff like that massive flash banner garbage being a poster child for outdated methodologies if you care about people actually using the site -- since Apple are jackasses to those of us who want to use flash, because it reeks of advertisting garbage most people don't want to see ever and actively block, or most importantly "good luck making that work in a responsive layout". Might sound a bit harsh, but that's the reality of it. Accessible semi-fluid elastic responsive design with graceful degradation and multiple media targets is what websites are SUPPOSED to be, and you clearly don't have that. The 'design' is missing so many of the stepping stones you'll never reach the summit that way. As to your picture, hard to say anything meaningful, it's just a picture of what a website MIGHT look like -- and I really don't consider drawing pictures to be web design, no matter how many mouth-breathing halfwit "designers" will try to tell you otherwise.
Wow you have plenty of time... I know about everything you write, you don't need explain me in details. I don't know if you read my first post but I want to do new layout, new design for my website. That's why I ask for help. I didn't ask to critic my actual website because I know I need to do it in new way. I made this site 5 years ago when responsive and sematnic code wasn't that popular and especially in Poland. BTW about flash... Apple maybe is jackass about it but not even 1% of my readers are using Apple computers or devices. I still need help with designing site in terms of graphics design. I know I need to do sematinc code, responsive etc. etc.
@deha21, every single one of your posts seems to contradict the one before it; if you knew all those things I'm explaining why did you need to ask: Since if you actually know and understand those things, you wouldn't have had to ask that question. I'm hoping this is just a language barrier issue (assuming since the site is in polish you're native language is same) but really it's kind-of unclear what you are even asking, and every single response to what people are saying reeks of "wah, wah, I don't want to hear that!" As to "graphic design" that's the END of the process, not the start which is why you should be doing all these other things FIRST, from there it's just a matter of choosing font FACES and colours, particularly on a simple news site. That's a trap a lot of people fall into thinking about "graphics design" as something separate or should be done first, when really things like font sizes and layout should be done in the code before you even THINK about the rest. Get the layout coded with dynamic fonts and semi-fluid elastic design FIRST, THEN adjust it with the artsy fartsy crap since to be frank, that's just window decoration.
DS hit exactly the right note. Starting with design instead of content and logical layout is like doing the landscaping for a house before construction starts. You are either going to end up with the same kind of mess you already have or you are going to end up having to do the "landscaping" all over again. Good design starts with quality content which is then enhanced with layout that supports the structure of the content, and finally the tasty treats from CSS turn it into something worthy of rendering.
I don't know what to say now... I just ask for help with graphic design, not other types of design like content. Can you help me with that? I know I need responsive site, clear code, logic content. And I will have that. I have designed it, but you didn't see it - language issue probably. I know what I want to have in site, what information is more important, how will site adjust to the content and I know what techniquest html/css I will be using for that. I know that... I have done "blueprints of house". But now it's time to do graphic design, sketch, "landscaping". That's why I need graphic design to know how to code that later. I don't know why you are insist about coding and stuff. I ask for help with only graphic design.
BECAUSE YOU CAN'T DO THE GRAPHIC DESIGN BEFORE YOU HAVE WELL STRUCTURED AND PROPERLY MARKED UP CONTENT. So far, you have neither. Have you done due diligence toward defining your site's vocabulary? Skip that and you might not be found by the search engines. Example, nearly ten years ago I wrote a simple page dealing with enclosing float elements. I used the word "enclosing" and ranked #5 for "enclosing float elements". Checking my logs, I found the word "containing" to be a more more prevalent search term. I changed the h1's text (and that's all I changed) in favor of "containing" and popped up to #1 for that term. I haven't updated the poor page in six years, but "enclosing" still ranks #14, while "containing" was still #1. Have you worked on that at all? Do you have a clue in what order you want your visitors to scan your page? You have to have that for a proper graphic design, and you won't know that without having the content well structured and semantically marked. What about your menus? You can't style them until you know how many items and sub-items there will be. Don't forget to consider the menus in your scan order, not to mention the vocabulary. I don't know how many times I've abandoned a page (unless I really, really needed something from the site) because marketing dweebs or some other empty suit got cute with menu tokens. Have you figured out what to call your menu items? Hint: it should reflect what the visitor would call it. Don't forget the various calls to action, buttons, links and forms. How and where will they be used, and how will they be represented in a manner that the user will intuitively know how to use them? There's a reason that cars have steering wheels and not tillers; everyone knows, without learning something new, how to go right or left. The same is not true of the tiller. It's called affordance, and all industrial designers know it because it is about interactivity. I have yet to talk to a graphic designer who has even heard the term prior to my mentioning it. Graphic designers, especially the formally trained ones, are print designers; not web designers, and they know jack squat about interactive design. Have you analyzed the existing signage, advertising, stationery &c. for colors, use of white space, fonts and where applied? Have you figured how to incorporate this existing branding into the site? You've got a long way to go. Once you've done your homework, though, the graphic design is 90% done for you; the graphics guy may not be necessary any further. Don't get me wrong, the graphics guy should be sitting in on every meeting to develop his part in the final design, but firing up photoshop could be better left undone in favor of quick Crayola sketches on Kraft paper. Photoshop or The GIMP are best used to dress up the images that will be used, though I favor ImageMagick from the cli, myself. cheers, gary
Yes, I have but I didn't post it. Yes, I have. I did that. Yes, I have. I didn't forget. I know that. Yes, I have. I don't agree. The layout design is done for 100%, but not graphic design.
I think your design is average for a magazine site, not very particularly prominent nor not that bad either. You script loads very slow. I'm on high speed internet and I feel the lag. Funny, it loads fast on mobile. I'm on 4G. On speed test your site is too heavy of 1.1 mb. Try to do the diet. I think the lower left part items are supposed to be clickable but I can't do it. (on PC) My suggest, don't ask about the design here. You'll never get what you want. They're expert in markups. Sometimes you do what people here suggested and you keep asking yourself why I'm doing this, why I'm doing this, and the rest say yes yes yes, that is very very great.
Thank you ketting00 for opinion. You said "I think your design is average for a magazine site" - you mean new design or actual design?
I mean the old one. The new design look much better. Improvement. Is it responsive. We have to see how it works on mobile. I don't like that large banner ad though. Is the central image slide show. It's outdated trend already.
I made something new. What do you think? https://dl.dropboxusercontent.com/u/3690563/jo_final2.jpg It's still no finished. I have problem with "Zapowiedzi wydarzeń" and "Ogloszenia" (below "Be Fit" banner). And I must change weather icons as well.
I think it's nice. Look better than most of the magazine sites I read. But, mostly, I read them on mobile and on the go. I think you should consider that too. Some sites are not particularly good on big screen but they are great on mobile.