Grow your CSS skills. Land your dream job.

Minimalistic web design – How to.. Best practices.. Pro’s and cons..

  • # April 4, 2013 at 11:21 am

    I’m a minimalist.

    I prefer to live a life free of clutter and like to design sites with a minimalistic nature such as:

    [Link one.](http://www.co-opbranding.com/ “Link one”)

    [Link two.](http://studionudge.com/ “Link two”)

    Neither of the above links are my designs, they are simply ones I like.

    When I’m creating my sites to be minimalistic my main concern is that they will appear to be ‘poorly designed’ and ‘plain’ I like to invoke a sense of awe when people view a site.
    What’s the best way to personally determine whether my site is too bare?

    Also, I’d like to ask other Minimalists how they design their sites or anyone for that matter about their views on minimalistic design.
    Thanks

    Adam

    # April 4, 2013 at 11:40 am

    When you strip anything back, be it design or music for example you have to put a lot more effort into the minor details of what you’re left with…

    Your design will rely heavily on typography so think about it as you would a piece of print. Think about type styles, line height, letter spacing…you can even kern headlines with something like kern.js

    # April 4, 2013 at 11:48 am

    Would you mind defining what you mean by ‘kern.js’ I’ve never head of it and after a quick search was unable to determine exactly what it’s purpose was?

    # April 4, 2013 at 11:57 am

    Kerning of type… It’s individual letter spacing, for example a capital A and a lowercase v (Av) can be kerned closer together because of the slant… I’d look up kerning in general.

    It’s not something you’d want to to do using kern.js very often…just on major headlines if and when needed. Depends how heavy you want to go on it / how typographic the site is.

    # April 4, 2013 at 12:03 pm

    Thanks @iknowdavehouse, as the site will be very type + content based I will certainly look into this and include it in my site.
    Do you have any other tips you could share on this subject as you seem to be very knowledgeable

    # April 4, 2013 at 12:21 pm

    No worries…I’d just look heavily into traditional typographic rules to start. This book is great – http://www.amazon.co.uk/Type-Matters-Jim-Williams/dp/1858945674

    Then look at the blogs of http://elliotjaystocks.com and http://trentwalton.com for advice on how to do it with web fonts.

    # April 4, 2013 at 12:39 pm

    Typography is definitely important. If you take a look at the fonts on both of the sites you linked, you’ll see they use fonts they’ve most likely paid a decent amount for. Co-Op uses “Din” in multiple styles. I could be wrong, but as far as I know, the only free form of Din comes in just one style/weight (OSP-DIN). And Nudge uses “Brandon Grotesque”; an extremely popular sans-serif which is certainly not free.

    If someone views a minimalistic or clean site as “poorly designed”, it’s because either the design isn’t intuitive and/or isn’t user-friendly. Anything can be poorly designed. I believe good typography and color alone can transform a plain site into an elegantly beautiful site.

    Like iknowdavehouse said, effort in minor details is crucial. You can certainly invoke a sense of awe with subtlety. Minimalistic design is simply centered around what’s really important: the content. The sites you linked do a great job of that.

    I don’t think you alone can fully determine whether a site is too bare or not. You need other people’s opinions; designers and non-designers alike.

    # April 4, 2013 at 1:07 pm

    I agree mostly with @iknowdavehouse.

    Webfonts and legibility are going to be an even bigger part when it comes to a minimalist design. That’s what I focused on when creating my site (still in development). Legibility doesn’t mean you have to use an enormous font size like Trent’s site. I think that’s unnecessary. But choose quality, optimized webfonts because they need to render well on all platforms (Typekit is not your only resource).

    What I did for my layout was sort of just luck. Normally I use PS and AI to design but after a few years (yes, years) of not being satisfied, I took all my content and uploaded it “unstyled”. I played in the browser until I got those three article blocks as they are now. From there I played around with the other sections until I felt that it worked. Designing in the browser can be quite helpful when you get stuck in PS or whatever you use. When you have your content laid out in the browser, it’s easier to visualize your thoughts and play around with ideas.

    Before I forget, you can use OT features in CSS to deal with kerning that is normally done by the browser. Also, I’d be happier to go into more detail of my process or any other questions you may have.

    # April 4, 2013 at 5:56 pm

    Yeah that would be great @chrisburton! Would you mind walking me through your design phase, from initial idea, to building the concept, producing a mock up and finalising the design? Sorry if it’s a little much, just I feel very strongly towards great design and need some help getting there!
    I’d also like to congratulate you on the design you linked to above, it’s really sleek, It would be hard to notice if it was still in development!

    Thanks,

    # April 5, 2013 at 1:41 am

    @AdamHodgson Not a problem but this might be a long post so bear with me. Also, to see the images below in their full size, right click and open in a new tab.

    Many developers and designers struggle with creating their portfolio. I’ve struggled probably longer than the average person (2 years) without having a functional site and that could be from being a perfectionist. Actually I know it stems from that and I have a real problem with it which withholds me from a lot of things related. I would urge you to focus on your content, first! It will help you speed things up when it comes to the design phase and making crucial decisions.

    I knew from the beginning that I wanted to number my articles after being inspired by the magazine article below.

    So. I set up the Kirby (CMS) backend particularly on how I wanted to insert specific content and options. Such as custom fields where I could input the article numbers (see below).

    From there, I started uploading basic text and content into the backend as shown above and created a template to pull in some of that content into my homepage (see below).

    I came to the conclusion that I didn’t want to have a portfolio link or a page with ALL my work. It would mostly be about articles on me pursuing a law degree and also about typography. However, I wanted to have a few selected pieces of my artwork on the about page.

    Artwork backend

    Result

    With this particular design, I didn’t open PS at all. I created everything from within the browser all from experimenting except where I made arrows in AI for my article pagination (which I added to The Noun Project for anyone to use). Anyway, I remember seeing a magazine a while back that had the most beautiful typography and layout structure. Particularly where there was top and bottom borders that were shorter than the large uppercase headings. That’s where I received the idea for my header.

    Now came the part on selecting webfonts. I was in contact with Jackson Cavanaugh about his Harriet series type family when he told me that he commissioned Webtype to create a webfont version. While I was waiting for that, I contacted Webtype to purchase a custom license for Benton Modern Regular and Italic styles for my body copy but there options were a bit overboard for my needs. Instead of $20 per style at 20,000 views per month, I asked if we could work out $15 per style at something like 5,000 views per month if I threw in an additional purchase of Benton Sans (used in my menu and footer). They accepted however, in case I do end up going over that, I could have a reason to negotiate on page views due to what I’m paying. Either way they’re flexible and are incredibly easy to work with (unlike Typekit). When Harriet eventually did come out, I tested it against my body type and decided not to use it. For my name, I was looking for an uppercase “R” to have more of a tail on the leg which you see on Benton Modern. I came across Old Standard on Typekit and found that to be a suitable option and it resembles Benton Modern a bit so it worked out well. The only problem with it, which I’m about to email Typekit about now, is that the lack of kerning is a clear problem, more noticeably when the font is set to a large size.

    Basically from this point I just continuously tried out ideas like using a two column layout for the paragraph text on my homepage. I added a subscribe button above that for those relying on RSS feeds, etc. I’m still thinking I need a little more content on the homepage to make it more interesting. Eventually it will get finished. I’m just not sure when. Hopefully soon.

    I hope this answers your questions but if not, again, I’m happy to elaborate even further.

    # April 5, 2013 at 5:21 am

    wow! Once again this forum has amazed me with peoples willingness to write elaborate and insightful answers, thank you @chrisburton !

    Although your previous answer answered all of my questions and more I’d like to ask you if you have any more examples of minimalistic web design, maybe some more of your own?

    Furthermore I’d also like to ask you about the use of ‘one page websites’ such as : [Link](http://publiqapp.com/#top “One page site”) and there effect on minimalistic design as I am currently undecided.

    In addition, I will be creating the site to use as a portfolio and to elaborate on the mini-site I made to help secure my place on the computer science course at a very prestigious sixth form next year, in your opinion which features should I include in a portfolio site in addition to the obligatory previous work?

    Thank you for your time replying to my posts, they are very much appreciated !!

    # April 5, 2013 at 4:27 pm

    @AdamHodgson Hey. I’ll have to dig up some examples for you. I just wanted to point out that you don’t have to be inspired by other sites. It can be from something physical which I’ve described above.

    Well that site in particular has too much white-space and gaps between content. I’m not sure if a one-page site has any influence on UX but I personally don’t care for them. I like ‘about’, ‘work’, ‘blog’, etc content to be on their own page where there’s no distraction.

    What exactly do you mean by “features”?

    # April 6, 2013 at 2:55 am

    Perhaps some cool info-graphics highlighting skills, A twitter feed, or even a video, just something to add to the site to make it bold, imposing and eloquent.

    Do you have any experience with selling + creating wordpress themes?

    # April 6, 2013 at 3:30 am

    I haven’t been web designing for quite some time now so I might not be the best source for resources.

    When it comes to twitter feeds displayed on your site, I think it’s better to just link to your account. That way people are more likely to follow you rather than read a limited amount of what you said recently and move on.

    Regarding videos, I came across this video on Typophile today advertising type and it’s quite amazing.

    http://vimeo.com/63208060

    I’ve never created themes or sold them. I worked for an agency that usually bought and sold WooThemes (customized) to large US companies and startups but that quickly wasn’t what I was looking for in a career so it didn’t last long. Shortly after I transitioned into lettering and typography. Now basically pursuing a law degree but I’m still a Typographer.

    # April 6, 2013 at 4:43 am

    Thanks again for your help, here is a better example of the approach I was talking about,

    [Image of potential portfolio element](http://gyazo.com/8ccb5c9197b7add1eefed3fafe71278d “Screencap”)

    I was wondering what you think about using info-graphics like this to display my skills, as I have accumulated a number of online, highly regarded, qualifications which I would like to portray on my portfolio.

    As I know very little about typography I have one simple qestion for you, what makes a great typeface? Examples would be great! Along with some basic explanation about what makes them great, I’m assuming type can influence the way a user interrupts information, would you mind discussing this please?

    Furthermore, refering back to video’s – In your opinion would having an immage on the homepage of my minimalistic website detract from the minimalism and perhaps cause the page to become crowded and therefore no longer minimal?

    Thanks again @chrisburton for your help, it’s greatly appreciated!

Viewing 15 posts - 1 through 15 (of 21 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".