[Boards: 3 / a / aco / adv / an / asp / b / biz / c / cgl / ck / cm / co / d / diy / e / fa / fit / g / gd / gif / h / hc / his / hm / hr / i / ic / int / jp / k / lgbt / lit / m / mlp / mu / n / news / o / out / p / po / pol / qa / r / r9k / s / s4s / sci / soc / sp / t / tg / toy / trash / trv / tv / u / v / vg / vp / vr / w / wg / wsg / wsr / x / y ] [Home]
4chanarchives logo
Web design feedback please
Images are sometimes not shown due to bandwidth/network limitations. Refreshing the page usually helps.

You are currently reading a thread in /gd/ - Graphic Design

Thread replies: 28
Thread images: 14
File: firstone.png (723 KB, 1179x703) Image search: [Google]
firstone.png
723 KB, 1179x703
Ok, /gd/, it's been a while since I posted about this the first time. I always decide not to bother you and continue working on it, but I realized I can't do it anymore without some direction and feedback from you.

Basically, I've been developing this news portal of mine, around 2 months passed by and I've been working on the design here and there, since there were no deadlines, but I'll have to present it soon, so I need to finish it.

Keep in mind that I still don't have much experience in this so I have serious troubles with my workflow.

The problem is that, I have some vision, but as the time goes by and I keep building my inspiration folders and looking at the competing websites, I start to lose my direction more and more. I increasingly start replacing my parts with copies of other designs and I don't know what I should do anymore.

I'll be posting some screenshots, unfortunately I can't find the first versions (which were horrible), so here are the latest ones I'm working on. I'll explain more of it in the following posts,

but BASICALLY - I need your feedback.
>>
File: frontpage.jpg (1021 KB, 1000x1410) Image search: [Google]
frontpage.jpg
1021 KB, 1000x1410
I want to say what are my goals.

This is a news portal about movies (don't bother about navigation links, this is actually just a test version, not one that is online at the moment).

I would like to achieve a more classic look. I am thinking about some aesthetics from high fashion (look at Vouge.fr for example), but then again, I was also thinking about modernist approach (Bauhaus).

Colors: black, white, not sure about accent, but beige is one of the probable choices.

Fonts: I am satisfied with fonts for the titles, paragraphs? Not so much (Helvetica, meh).

I have trouble with a grid. There is this minimalistic type of UI, you can see it here:

http://www.gamespot.com/

Where you can immediately realise that it was the last heavy inspo for me, but I realized it's the complete opposite of what I actually want to achieve.

Before I had a grid >pic related, but then there is something like this that is also popular:

http://www.thewrap.com/

Also this

http://www.nytimes.com/

Btw, NY Times is getting a lot of awards for that look which kinda baffles me. To me, it is way to busy, but there is something good in there, I have to say. I'm trying to figure out what works the best for UX.


See I can shit about this for days, but I don't want to bother you so much. How do I help myself with this? I can't stick to my vision.
>>
File: article.jpg (899 KB, 1360x1603) Image search: [Google]
article.jpg
899 KB, 1360x1603
Ok, the article page. This is the current version, and basically, this is with what I've started and had a clearer direction than with the frontpage.

Last time it seemed that anons liked it. I was playing around with the dark background for film information, I don't know how you feel about that. Ignore the disgusting italics in the header, that font doesn't work very well in italic.
>>
File: article2.jpg (437 KB, 921x880) Image search: [Google]
article2.jpg
437 KB, 921x880
Then, I tried something cleaner, like this. Thoughts? The problem is that, this is a news portal after all, and I'm not sure if I really should add recommended content to the side or have the design have the main role.
>>
Today I was going through Dribble and found something new that caught my intention. Pic related is basically a blatant copy of the title.

You know, I keep iterating designs but I honestly don't know what works and what doesn't. Maybe things that I find great are not so good in the first place.
>>
>>
>>272969
>>272970
These two pages look best imo. I prefer the first one more than the second one.

For the front page... I'm not so sure about it. It looks alright, but doesn't seem to fit very well with the design of your article pages.
>>
File: newssite_article_001_a.png (2 MB, 1400x2931) Image search: [Google]
newssite_article_001_a.png
2 MB, 1400x2931
>>272973
These were my originals, thanks. So, you're not a fan of this?
>>272971

Pic related is actually the original from Dribble. What I liked about it is that, well, it follows some established concepts in web design better, like left aligned content and a very strong and bold headlines.

Yeah, that's what I'm afraid, that the frontpage is too much different. What could I do about that? As I've said, while I was doing another redesign, this:

http://www.gamespot.com/

was a strong inspiration. You can see that the header is very similar (btw I am still indecisive if header should span the full width, it's a modern meme, which I kinda like, but I'm not sure what would be the best here).

But it has different aesthetics.

It may sound a fedora tier, but I kinda want to be somewhat contrarian on this, I don't want to design it the same as everyone else, I want to experiment, but then, due to the lack of my experience I tend to start taking a lot of elements from others at the end, because I still can't pull it off.

Fuck, how did I already lose the first versions, I really want to show them just so you guys could see an improvement (I hope).
>>
File: kek1.jpg (209 KB, 971x675) Image search: [Google]
kek1.jpg
209 KB, 971x675
Haha, great, I actually have some older versions.

Check out the following two abominations (ok, the article is similar, as I've said, that was the page I did first)
>>
File: kek2.jpg (208 KB, 1047x677) Image search: [Google]
kek2.jpg
208 KB, 1047x677
Here, there is no dark background on the info box. I liked this for the two reasons. The cleaner look, and because the width is fixed, white background blends with the rest of the page. But with the dark background the visuals seem to be more interesting, idk.
>>
File: 01.jpg (251 KB, 800x600) Image search: [Google]
01.jpg
251 KB, 800x600
Sorry for the extreme samefagging, just one more thing.

Pic related is what I miss and what I would like to achieve to a certain degree, but I don't know how it could be integrated with what I already have.

>more interesting grids, elements breaking from them and all in all, more dynamic visuals

I wanted to share some of my inspiration in hope that you guys could maybe direct me to some sites where I can find more of that style.

That's all from me for now.
>>
Personally I think you rely too much on rich black. Looks kinda dreary and uninviting.

>>272974
Looks great because it's light and unobtrusive, whereas
>>272969
feels very heavy and almost claustrophobic.

>>272978
Again, this is heavy on the monochrome, but the use of black is actually very light.

Just my 2ยข
>>
>>272988
>feels very heavy and almost claustrophobic.

Yeah, this is what I'm worried about. Is it because of the black infobox or because of the grid? Maybe 3 columns and centered text is too much?

How about this one?
>>272977

>Personally I think you rely too much on rich black. Looks kinda dreary and uninviting.

What parts, specifically? I'd like to keep dark navigation and background on the header because, as I said, I want to have a more classic look. Should I maybe set it a few tones higher? Maybe some nice bright accent color would be good for the contrast?

>>272970
>>272971
So, I guess you would recommend me to work on these?
>>
>>272992
Oh, one more thing. I was thinking about changing the navigation's background to white when it scrolls from the top. Maybe that could be a good idea then?
>>
>>272993
That might be a good idea.
In general I think that if you want the deep black in the navbar, you should avoid that same shade in the rest of the design (buttons etc.) because it become a little overbearing.

I don't want to tell you things to do specifically, but just think about lightening things up (while still keeping the classic monochrome feel) and reducing clutter, give the eye some space to focus on the important stuff.
>>
>>272999
Thanks, will keep working on it. I'm just a little bit worried that I'll focus too much on this work from Dribble now. Don't want to straight up copy it, but damn, I like that grid and that title quite a bit.

Btw, do you also think that the article page and front page don't look like they belong to the same website? I don't know if that's because of a grid or because the headers are different (one being full width while other not). I've seen portals with very different designs from category to category, maybe that's not the problem after all, don't know.
>>
>>273002
Yeah, I think that's a problem with the front page looking very cluttered while the rest of the site seems to strive for a somewhat subdued minimalism. Right now there are three different sections with basically the same function, just different layouts. Perhaps have just one main story on top, and then a list under that which you can switch between sorting by newest or popularity.
>>
File: newblogpost.png (727 KB, 1005x682) Image search: [Google]
newblogpost.png
727 KB, 1005x682
I hope it's ok if I blogpost here and there, I'll continue tomorrow, but I've been trying out some things... I just must NOT pass the line where it starts looking like a generic blog template. If I want to incorporate some crazier grids it'll take a while.

>>273004
Perhaps the full width, single featured post (possible slideshow) really would be better. Grids like these are very popular so I went that way too.

Btw, one more link that has some of the aestethics I'm going for:

http://www.wsj.com/articles/a-first-look-at-americas-supergun-1464359194

Also, their front page.

And nobody said how they feel about layouts like the one you can also see on the wsj front page. I don't know, I kinda of like the busy looks, but for me personally, UX is pretty bad. I have no idea where to look, when there is so much content my mind just, like, stops working, I just look through it.
>>
>>273027
Much improved imo, my eye movements flow naturally through the page and land nicely on the text.
>>
>>273028
Great, I'll keep building upon that. I like it too.

Too bad that center aligned text doesn't work that well. Well, at least when I have multiple columns, it wouldn't make sense to keep it centered here, so it turned up a bit more generic. But I guess it does work that way the best, the eye flow is definitely better, I just tried to make it work centered to be more interesting. Eh, doesn't matter.

I'll redesign infobox with film information and put it before the popular posts, it was too long and I guess out of fashion too.
>>
File: new.png (2 MB, 1010x4095) Image search: [Google]
new.png
2 MB, 1010x4095
Damn, time is flying so fast. I was working on some new functionalities and... just looking at it and tweaking it a little by little. I feel like I am so unproductive.

The navigation actually changes to white and shows a title instead of links when it starts scrolling, but the capture tool is buggy so it looks like the navigation is gray.

Do you guys have some idea what font would be good for paragraphs? I have a feeling I use to many fonts, basically, there is Chronicle Display for titles, Helvetica for some subtitles and other minor elements and I've been trying Raleway for the content because it has more breathing room, but it is still kinda lacking.

I still have to finish the recommended posts at the bottom (will probably even just put titles without thumbnails), maybe will add arrows on the sides for the next and previous posts (not sure yet) and I have to make social icons for sharing, and place them in the upper right side in the navigation when it starts scrolling.

Not to mention film information, it's pretty narrow so I don't think I can put, e.g. "Director: John Smith" in a SINGLE row, so I'm kinda stuck with this placement, but I don't feel the gray boxes, even though they add some nice contrast and weight.

Shit, I was going through some more inspiration for the frontpage and I have to start doing that ASAP, I won't have enough time. But everything just sucks, maybe it's me, but I can't find a good looking front page of a news portal, that is at the same time great in terms of UX.

Also, I'm a little bit afraid there is too much similarity with that previous design from Dribble that I posted.

I also don't know if I should place that infobox somewhere else, maybe hide it and show on click, or put at the top, because I would really like to have a full width content so I can play with grids more (see National Geographic articles for example.

>if you want to subscribe for more blogposts, give me that (You)

Just so many questions and noone to talk to.
>>
File: ss+(2016-06-20+at+09.37.55).jpg (859 KB, 2560x965) Image search: [Google]
ss+(2016-06-20+at+09.37.55).jpg
859 KB, 2560x965
I'm shit at graphic design and website making.
Created this after watching some html and css tutorials. It's kinda like the landing page for my website where I'll be selling and showcasing my custom knives.
>>
File: layouts.jpg (3 MB, 4292x3051) Image search: [Google]
layouts.jpg
3 MB, 4292x3051
Hey guys, I'd like to ask for some more help, if you don't mind.

I've been trying different stuff and the ones with black headers and taylor in the pic related are the newest ones, but I still don't know how to organize the content the best way.

From all of these, what do you think looks and would read the best?

The latest thing I was thinking about was using card like articles (top right), I got the inspiration from:

http://www.wired.com/category/culture/

I really like their layout now.

Basically, I've been at it for way too long and can't think clearly anymore. A week has passed and I'm still struggling with the front page, might be autistic, or retarded.

Probably both.
>>
>>273972
I would change the text that links each to a new page. Maybe a more modern font. I really like the feeling of your splash page btw! Keep it up man!
>>
Tell me guys, these designs aside...

Is this shit what I'm doing normal or not? See, I began designing this around March, and tweaked stuff a little, on and off - not have been working on it on a daily basis. A few weeks ago, I started thinking about it more, going through tons of inspirations and articles and I'm struggling pretty hard with it. I can't tell objectively how good are any of these. But I usually make something I like, let it stay for a few days (looking at it on different devices, thinking about certain elements) and then I grow a certain amount of hate towards it and need to redesign it again.

I don't have much exp with design, this is actually my first full website design, and before that the biggest thing I did was designing a few pages for a hotel. That also took me a lot of time. But I definitely love doing it, I've read design literature, watch the articles about it etc. I had a few graphic design classes too, so I know the fundamentals.

I don't know if/what am I doing wrong here.

How much does web design differ from other /gd/ fields? I, sadly, feel that most of the times you just have to follow a specific standards and it decreases the amount of things you can do by a huge amount. I feel that I wasted a lot of time trying to do something different and in the end I'm just realizing that I need to follow the standards and almost nothing else will work.

My head hurts from all of this, I waste hours upon hours and I can't think clearly anymore.

Too bad /gd/ is not interested so much in web design, neither is /g/.
>>
>>274015
no pic
>>
>>274087
Oh, I'm the OP.
>>
I came in here to say I fucking hate web 2.0 and every fucking modern website looks like fucking shit. Everything I try to look for inspiration its all fucking SHIT.
Thread replies: 28
Thread images: 14

banner
banner
[Boards: 3 / a / aco / adv / an / asp / b / biz / c / cgl / ck / cm / co / d / diy / e / fa / fit / g / gd / gif / h / hc / his / hm / hr / i / ic / int / jp / k / lgbt / lit / m / mlp / mu / n / news / o / out / p / po / pol / qa / r / r9k / s / s4s / sci / soc / sp / t / tg / toy / trash / trv / tv / u / v / vg / vp / vr / w / wg / wsg / wsr / x / y] [Home]

All trademarks and copyrights on this page are owned by their respective parties. Images uploaded are the responsibility of the Poster. Comments are owned by the Poster.
If a post contains personal/copyrighted/illegal content you can contact me at [email protected] with that post and thread number and it will be removed as soon as possible.
DMCA Content Takedown via dmca.com
All images are hosted on imgur.com, send takedown notices to them.
This is a 4chan archive - all of the content originated from them. If you need IP information for a Poster - you need to contact them. This website shows only archived content.