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

Blog theme help?

This is a blue board which means that it's for everybody (Safe For Work content only). If you see any adult content, please report it.

Thread replies: 20
Thread images: 10

Working on a blog with a static site generator and was wondering if the current theme i made looks ok. Any feedback is helpful, especially constructive. I want to keep it pretty minimal.

Also are there are any recommended free-software typefaces that you think would be better than 'cantarell'?

thanks!
>>
google-web fonts have loads of nice ones mate. roboto (a grotesk sans-serif) looks particularly good on a minimalist page
>>
>>291340
>291348

Set set this in steps, shall we?

Fist of all, minimalist doesn't mean your page sould me "blank" (I know isn't actually black, but you have too much white space and feels weird).

Second. As our friend >>291348 said, you should keep a eye for google fonts. I'll disagree with him in one little aspect, Roboto is a amazing font, but not for webpages... Feels too machanical and "google-ish"... Try lato or Open Sans.
You can, and most likely, will, made a huge combo of those two.

Third. USE HTML AND CSS IN YOUR FAVOR. Don't stack all up. Separate it. Create a new invidual block of content for each post.
Bc as I see, the page you provided to us will be, most likely, your home screen. But I can't see the difference on the content and the footer..
You have a sidebar? I dont see it.
You have a menu bar? I can't see either.

Forth (and last). Use colors man. Your page is minimalist, not monochromatic.

Above all, I like your concept.
Hope see it working.

Best of luck.

ps.: sorry about the english, not my primary language :)
>>
>>291393
Open Sans and Lato are both great, I agree. I don't like Open Sans for a personal blog just because it's used so much for business and commercial websites.

It's like Impact is a "strong" typeface but it's too associated with memes now.
>>
>>291397
>>291397
You are right.
I only said Open Sans because he can use in multiple styles, weights and forms..
And, perhaps, is one of the fonts that he can use for free that will display harmonic in small screens.
>>
>>291393
Thank you for the advice.

>do you have a sidebar
No
>do you have a menu bar?
No
The navigation is at the bottom of the page (view more posts, tags) or by clicking the blog title.

The ridiculous amount of whitespace partly has to do with nothing in the sample text filling an entire line. I will make some adjustments and post them in about 5 hours.

I have open sans on my computer, I dont know why i didnt think to use it.

Have you got any examples of minimalist text blogs that dont rely on images?
>>
File: blogshot2.png (195KB, 1440x965px) Image search: [Google]
blogshot2.png
195KB, 1440x965px
here is updated version using open sans and fewer type sizes, thanks for the suggestions so far. keep them coming please.
>>
File: nav.png (44KB, 941x476px) Image search: [Google]
nav.png
44KB, 941x476px
>>291393

here is the navigation structure you were asking about
>>
File: posts.png (30KB, 917x572px) Image search: [Google]
posts.png
30KB, 917x572px
>>291424
and the index of postings
>>
>>291422
nice. if you want, in keeping with the whole /g/ vibe, there's even an ubuntu font-family on google web fonts.
>>
File: ss.png (31KB, 638x352px) Image search: [Google]
ss.png
31KB, 638x352px
>>291422
>>291424

Fu***g loved those two. They are exacly what I expect to see :)

>>291425
I do love the idea, but normally users tend to like a menu bar or sidebar to navigate.
If you (as I did several times) doesn't like to put either of those, consider put a right-handed link (as "go to top") to jump to the bottom.. That way everybody can feel confortable :)

>>291429
Sorry anon, I can't agree with you.
Ubuntu font IS nice, but to minimalist approach I think Lato/Open Sans it's a safe combo.

Beside that, look at the screenshot i took.. You can see that the font itself wasn't made for long text, nor to "headlines". She lacks the strenght to do so.

I don't wanna be the pain in the ass, but let me explain whay ain't a good option.

Fist of all, it's a san-serif font. No problems with that, but here is the catch, look close to the letters (especially "V", "M", "N").
You can see that isn't a sharp-made font. Of course isn't. Was made for logos.
The problem is not only that. It's also lacks the ability to "talk" with others fonts.. wich made her "unique" (good in a lot of ocasions, but not into a text/headline).

But the worst (in my opinion) is that all those styles feels "chunky".. Like someone didn't put effort to fix small things (like that terrible-rounded "v").

But... Feels your guts.

again, hope see that working.

See you all soon :)
>>
Thanks for the ideas
>>
File: second ss.png (17KB, 1148x255px) Image search: [Google]
second ss.png
17KB, 1148x255px
>>291422
Idk if this is the wright place to do, but let me give you a few CSS/HTML tricks :)

First. If you want to made a second headline (as I think you tried on "this text is copied...."), you could keep it larger, with 60% of the page, alignt to the right or left..
If you don't feel confortable with 60%, you can highter up.. or give 100%.
If you do give 100%, consider put a line in the bottom.
To give you some ideas, I'll upload four screen shots to illustrate what I'm saying.
Note: the third one, imagine the "story hightlights" as the sub-header.

Moving on..

Second: Colors. Again, your prototype is very nice.
But those colors are toooooooooo similars. To give the impression of content/header/details/footnotes/any other info, you need to build a color scheme.
My ideas? put everything in white. your header should be plain black (100%), your sub-header, about 80% and your text black again.
Links should be stylized... maybe put a bottom line, with a padding of 5% without a hover. And with a hover you change your link font-color to a middle-term orange (or some bright colors, only to keep light and not similar to a dungeon :D ).

Third: IMHO every image should have a border. strong. about 4 px wide in every direction. sharp (please, don't put round corners in image border).
The color, normally, would be black..

Fourth: Set two thing in your CSS: line-space, give, at least, 1.5; and letter-spacing, about 10%+
Bc it feels a little "compact", wich can be hard to read long texts.

I could adive you to put a serif font for text, but it's your call.
>>
File: third ss.png (33KB, 779x324px) Image search: [Google]
third ss.png
33KB, 779x324px
Fifth: Links that are "alone" (as Subscribe), should be treat as it is. Put some nice style on it. make it different from the rest.

Sixth: links that made part of the "navigation" sys, should follow the color-scheme. In your example, you could put in some 50% black, with borders set to 1, but with the color as the background (so would the transparent)..
When the users hover the mouse over, the font will become dark (full black) and the borders aswell.

Last thing: Justify your text. You will give peace for everybody :D

Ps.: Your project is looking good. Keep me post :)

I'm not triyng to correct you in every aspect.
Sorry if I'm too invasive.

Hope help you in your project.

Good night fellas.
>>
File: forth ss.png (17KB, 643x225px) Image search: [Google]
forth ss.png
17KB, 643x225px
Last screen shot.
>>
File: finallayoutmaybe.png (139KB, 920x877px) Image search: [Google]
finallayoutmaybe.png
139KB, 920x877px
>>291444
Here it is justified and i have increased the contrast of the link-color.
>>
File: mobileish.png (49KB, 359x640px) Image search: [Google]
mobileish.png
49KB, 359x640px
>>291451
here it is on a mobile display size

I slightly increased the font size and the line spacing and made the div holding everything slightly narrower so it now has about 80 characters per line, instead of the 100 it was previously at. It should be easier to read this way.
>>
>>291451

Much better.
But the content isn't justified yet..

Try put inside a p tag and justify it :)

overall, is lookink great
>>
>>291452
>>291451
Looks dope m8
>>
Anybody here has made a personal we page before? Like web 1.0 style?
Thread posts: 20
Thread images: 10


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

I'm aware that Imgur.com will stop allowing adult images since 15th of May. I'm taking actions to backup as much data as possible.
Read more on this topic here - https://archived.moe/talk/thread/1694/


If you need a post removed click on it's [Report] button and follow the instruction.
DMCA Content Takedown via dmca.com
All images are hosted on imgur.com.
If you like this website please support us by donating with Bitcoins at 16mKtbZiwW52BLkibtCr8jUg2KVUMTxVQ5
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.
This is a 4chan archive - all of the content originated from that site.
This means that RandomArchive shows their content, archived.
If you need information for a Poster - contact them.