I know right now its pretty boring. I need advice on how to make it look better without it being too much, any advice is appreciated.
1 Like
Well, I was going to suggest maybe finding a sharper, more professional picture, but having googled it, there aren’t a ton of options. Some things you could try with the type:
Type Contrast & Font Choice
-
Try using different fonts for headings and body text. Using one serif and one sans serif often works well, or one heavy/bold and the other thin/light. Google Fonts has solid suggestions for combinations that will look great together.
-
Use 2-3 types of headings, using the same font in different sizes. One larger style for the main title (h1), One medium style for the major sections (h2), and maybe a small one for subheadings if you have enough of them. (h3) This can even be the same as the main body font, but in bold. Give these a custom style so they look a little less Times New Roman. It’s a small thing that will help get rid of that word-doc feel.
-
If you still want serif, import something from Google Fonts and use it in a stack that includes common serif fonts, for example: p{
font-family:'Lato','Georgia','Times New Roman',serif;}
(for this example you’d import the Lato font from Google using one of their handy dandy links, then the others are just defaults) -
here’s a list of web-safe fallback fonts that a lot of people have installed by default. Note that these may not show up in your design if you don’t have the font installed on your machine or imported as a webfont. If that happens, it just goes on to the next font in the stack.
-
Adding more subheadings to the text can help break it into understandable chunks and add visual interest. [Torvold’s profile on TED] (http://www.ted.com/speakers/linus_torvalds) is actually really nicely set up, if you want to see what I mean with the contrasts between headings and paragraphs, like how much text goes in a single-topic chunk with a heading.
If you’re not too confident on the typography, or would prefer not to mess with things too much, Bootswatch has some great pre-made themes for bootstrap, they have everything really nicely set up. I also spent way too long tinkering with a related Bootstrap Live Customizer which is freaking awesome.
Readability
-
Shrink the max line width (shorter/more compact paragraphs, think magazine columns) Shorter lines of text with white space on either side makes it more comfortable to read.
-
Add subheadings. This also creates interest when people are scanning the topics, and makes it a bit less like an essay or word document. Along these lines, you could also reorganize your text, maybe have a quick timeline section for significant events, and then other sections that go by idea, like one for what linux is, one for the story of how a project was developed, one for why open source is important, etc.
-
Add a quick bio/summary at the top of the page in your intro section, even just like a job/personal title, and maybe a quote if you have a good one. Something that gives a lot of personality when you scan it, a bite sized did-you-know that makes people interested who might not already know who he is or why his work is important.
Layout
I’m hesitant to suggest any changes for layout because CSS layout can fly past beginner level pretty fast, and I don’t know your comfort level with it. If you’re up for it, you could try one of these.
-
side by side heading: since your main image is a bit limited in size, it might look nice on larger screens to have the image on one side, then the main title and a brief bio blurb next to it, with the body text continuing below.
-
graphic elements: A navbar might be pointless on an isolated codepen project, so it’s up to you. But having something horizontal might break up the page a little bit. If you’re doing the horizontal image/title layout, a solid background element (like a neutral charcoal-gray or black) would be an easy way to do this.
-
image scaling: The image gets hard to see when you scale the window down to a small-screen size, you might style this so it stops shrinking at a certain resolution, but takes up the whole width with the text flowing below.
2 Likes
What an interesting picture! It is remarkable to see such a messy desk belonging to a guy with such a successful contribution. It makes me not feel so bad for the way my apartment looks right now.
Good job on your tribute page. I am working on my tribute page now. I am procrastinating by learning about Linux. 
This is great feedback. The way you describe each of the elements on the page is unprecedented for me.
Thanks.
this is amazing and super helpful applying to all kinds of websites! thank you for the contribution! im putting the suggestion to work now on my portfolio page! whooohooo!