Design mock-ups for my new site

So I finally got a chance to sit down and craft some mock-ups of what I had in mind for my site. They should be relatively close to the end product however I expect evolving changes as I actually start to develop the site.

To preface these designs, I will outline some of the major design goals and aspects I wanted to include:

I wanted the design to be somewhat minimalistic in structure and in colours

  • I wanted to scale back the use of colour to a minimal form and rely on monochromatic hierarchy for the majority of the website.
  • This would allow me to use a single colour to highlight specific items that I’d like attention to be drawn to.
  • Moderate white space where possible.
  • Typography is important especially within the posts/article section. I wanted a relatively large base font-size for easy readability.

 

The site had to appeal to two major audiences:

  • Readers: Users coming to my site to read my articles. These would typically expect a simple and easy to read webpage without too many frills and enhancements.
  • Those interested in my work: Typically users who have never seen my work and landing on my site for the first time. These might want a slightly more “flashy” experience. Anything to enhance their experience visually will reflect my skill-set.
  • Thus I broke up the site design into:
    • Landing page (home) in which the visual experience is much stronger.
    • Other pages/ article page in which the design is still somewhat consistent with the initial page however scaled back for further simplistic.

 

These designs don’t include too many specific detail for elements (such as forms, individual pages etc). I wanted this to be more a design reference to enable in browser design to take place. I will use these mock-ups to structure some of my initial CSS and HTML around before getting into the nitty-gritty aspects. Please excuse any inconsistencies within the designs themselves (fonts, sizes colours etc) it  evolved as I got stuck into the design process.

 

Initial – Landing page (Home):

homepage-v1

 

When the user first lands on my site they will be shown this full screen page. The background I hope to animate with either canvas or a HTML5 Video (of my creation) featuring some some abstract/ polygon animation (this will replace the one shown).

Background image taken from here

 

When the user scrolls down they will be shown the following:

Bottom- Landing page (Home):

homepage-lower-v1

 

 

The menu will either affix to the top or stay as apart of the initial full screen introduction section.  I will have a simple call to action area below, showcasing my title and some of my major call to action items.

A large section for my recent work (not depicted: a view more button) that reaches the entire width of the screen. These will be images of my work and when clicked will take them to a dedicated page detailing the work itself and what was involved etc.

The next major section is some of my recent blog posts (including this current series of posts). I’d like a call-to-action to focus on email subscriptions across the site. This will help accumulate a large audience via email and grow a consistent readership.

Finally a medium size footer with some admin information (ABN) and some major social links.

 

Clicking on an article page will take you to the following:

Article Page:

article-v1

 

 

This is where the design differs. The navigation/heading now is white and not so prominent with most of the focus being drawn to the article itself. A good font-size that should make it easier to read. Again featuring some basic call-to-action around recent posts and email subscription.

 

Style guide:

style-guide-v1

 

This is a simple style guide showing some of my major design choices. One thing I left out was the font-family I am going to use. I have chosen “Open Sans” with Arial/helvetica as a fall back.

 

Changing my mind:

In my last article I mentioned some of the technologies/tools I wanted to use. I mentioned the use of Semantic UI over Bootstrap, I have now changed my mind. Over this past week and a bit I have been working with Bootstrap quite in-depth, editing the core via LESS and in general mucking around which led to my new decision. I changed my mind for a few reasons:

  • I have an in-depth knowledge into Bootstrap and what it can do. Not utilising this could be a mistake. As much as this is a leaning exercise, fundamentally this needs to be some of my best work. I feel I can keep the learning aspect through other means and doing new things within Bootstrap itself.
  • More so than ever I have been actively following the Bootstrap community, via multiple channels (Twitter, Slack, Bootstrap expo etc). I’m really keen to be more involved and apart of this community. I aspire to eventually contribute to the framework among other things. By using Bootstrap I can further my knowledge and move towards this goal.

My new idea is to use bootstrap by taking control of what’s included (removing components the are not needed). Furthermore I will edit the core structure via the amplitude of variables and controls. I will probably use SASS as my preprocessor of choice and thus use the SASS port of bootstrap (in preparation for Bootstrap 4 being made inside SASS).