Content Arrangement - Main Section

In this blog post I'm going to be taking your through my methods on how I got my main content area to look how it does.

In the screenshot above you can see how I've displayed my content, a simple 2 x 2 Grid, but to get to this point, it took a lot of work.

Initially I tried numerous methods of displaying my content, huge 100% elements that take up the entire browser but I felt this was too over powering and didn't match the layout of my work thus far, so I looked online for good ways to display content and I tried to get some inspiration, I came across this: FlexBox - This is a brilliant tutorial and so in-depth, it goes through everything that the flex box is capable of. It then has the code you can copy which has the place holders which look like this:

These are the place holders and they stack when resized to this:

And then stacks down into 2 x 3 which is what I wanted, so from the code below I just removed the li class 5 and 6 as I only needed four for each of my topics, mammals, amphibians and reptiles, birds and trees.

Before

After

Here you can see my HTML elaborated from the previous one, where I've added my own content and titles, I've also applied my own div classes to each of the topics, so I could then target the paragraph within without influencing every paragraph in the website. I also used it to wrap the size of the text to a maximum of the same width as the images I used. You will also notice at the top of the screenshot I put the flex container, inside another container as when the screen was big enough my content was going 3 images along and 1 below and it just wasn't consistent. So by putting it another container it restricted the flex container keeping a constant 2x2 until you went down to mobile size where it would become 4x1.

Here's my CSS for the flex boxes:

At the top of the screenshot you can see the container of the flex that I added, I gave it a width of 100% and a simple white background colour, I then added the position of relative so it could be influenced by the z-index (so scroll hint didn't show through)

Next is the flex container, this CSS was part of the code from the website I linked earlier, I simply changed the background colour and added a max-width. I did this so the elements would stack 2 on 2.

Just below that you can see the flex item, now I only included the no.1 as they are all the same with just different background urls. For this I changed the height to 200px and made the margin top 80px (from 10px) to increase the distance between the grey content intro, and the edge of the containerofflex div.

I then added a background URL code which changed the background to an image of choice from the default red one. After I'd done this I felt it needed a bit of 'lifting' so I found this tutorial on how to give a box-shadow that was subtle. -webkit-box-shadow: 0 1px 2px rgba (142,110,132,0.3); is that line of code for that, it basically says give the left and right sides of the container a 1px grey, 30% transparent border and the bottom a 2px one. This is the result.

Like I said, its only a subtle difference but it give the surrounding of my image a slight lift and makes it look that little bit more professional.

The final piece of code that I used for the CSS3 flex boxes is a pseudo :hover command, this essentially is manual for the browser to read that when 'this' happens 'this' also happens, in this case, when you :hover over flex-item1 replace the background: url with this one, in my case the same image with a simple vignette over the top, giving the audience/user some feedback that they have selected this, and it does lead somewhere.

Here is the before and after result:

Before (:hover)

After (:hover)

As you can see it adds a very subtle roll-over effect that is nice and simple and looks professional!

In terms of the process I went through to achieve the looks of the text, it was the same as I explained in my previous blog post.

Content Arrangement - Introduction

In this blog post I'm going to explain the methods of how I arranged my content.

For my top introduction I made a div called .content-title, I simply gave it a height of 400px, with a background colour of #F2F2F2, I then gave it a position of relative so I could apply a z-index so it would show in front of the scroll hint when you scrolled down. 

I wanted my content to be really simple, making complete use of white/grey space, almost taking after Apple design style/philosophy that clean spaces give a premium appearance. So with my simple grey backgrounded content title with a clean font like Roboto makes for an impressive look.

When styling 'Welcome to the Amazon' I was styling the <h2> tag. I wanted it to be a light font to look at high res as possible and when using 'normal' weights there always seems to be a jagged edge even with the in browser (and operating system) font smoothing. So I chose the weight of 300 which I thought looked really neat, very legible whilst looking professional. I then text-align: centred the text which put it in the middle of the div and gave it a padding-top of 2.25em this moved it down from the top edge further into the middle of the div just creating space around it. I also reduced the kerning (letter spacing) as I felt it was slightly to far apart for my sentence. I then changed the colour to #777 a darker grey than the background as when I tried black it was too harsh. Here is the CSS code:

Next I'll be looking at the h3, I wanted a slightly smaller informing sentence that gave the reader an idea in to what the websites purpose is, I wanted it to be obvious, but at the same time not take any attention away from the main title. So I gave it almost the identical styling at a smaller size however and with slightly more padding-top: 2.85em, here's the CSS:

Now at this point I wanted to have some space in-between the intro and the main content section, a larger border of 200px of grey and then against the white of the content area didn't look very good, heres a screenshot:

As you can see the gap is quite overpowering and looks unfinished, so I decided to add an hr (horizontal rule) so I could try and fill that space with a thin line and it proved to be harder than i originally expected.

At first I just put the HR in the HTML under the introduction text and it was 100% width as it is by default but I didn't think that looks very good, I just wanted a subtle detail which would give some breathing space. So I tried to style the hr by making it 75% width, and then text-align centre however this didn't work, an hr isn't text, nor an image so I was completely left in the dark about how to manipulate it. I googled 'styling an hr' and this page came up giving you everything you can possibly to do style an HR which I found incredibly useful even though the tutorials were styling in-line not on an external style sheet. Link here.

So from following what the webpage said I gave it a border-top of 1px and a margin before of 6ems this spaced it down from the introduction sentence so it wasn't directly beneath, I then gave it a -webkit-margin-start: auto; and -webkit-margin-end: auto; - this centred it in the middle of the page however there was one thing still wrong.

As you can see in the screenshot above the css I gave that only gave a border-top of 1px wasn't being listened too, there was a very feint border around making a rectangle, after a little bit of googling I found that you have to add a 'border: 0;' this removes the border everything else other than in the areas you specify! Here is the hr {} CSS:

Finally, for the 'To discover more, click an image below' section I gave it the same styling as I did to the other sections, and instead of adding the padding to the text, I did it to the HR element as you can see above!

Smooth Scrolling and Anchors

After gathering inspiration from other websites I found that every website with a similar scroll effect where the header and related elements are fixed and the content scrolls above it all have some sort of 'scroll hint'.

The previous blog post about the website bubblesfilm.com shows a scroll hint at the bottom of the page looking like this:

This animated on hover from one arrow to two and I thought it was a really neat feature, when clicked it just scrolls down the page to a fixed point where the content begins. So I thought to myself how could I get something similar? It would be a great way to prompt the user of the website to scroll down and make sure they don't get bored.

1. My first step was to think about the basics, it's an anchor from one spot on the page to another, and has a :hover state change to a different image with some added animation.

2. Next, I looked at http://www.w3schools.com/html/html_links.asp this gave me everything I needed to know about how to link to another point on the page.

It shows you that if you want to create a link, you must do <a href="#tips"> Link to </a> and then at the destination you set the 'other end' of the anchor with <a id=""#tips"> </a> this takes you to the area in the HTML page in which you put it, in my case where the content begins.

So initially I just positioned a div with a background of #FFF (white) about the size I wanted the button to be, in this case I made it 81px width and 41px height. I also gave it bottom: 0; this puts it at the bottom of its container and then position: fixed; and a left: 48% to center it in the middle of the page. This is what I had: 

So I then applied my newly created class to the anchor by using <a href="example" class="scrollhint"> </a> this then gave the anchor the styles that I gave the the class .scrollhint.

Once I'd done this I added a border radius of 81px to both the top-left and top-right of the div, making it rounded giving a semi-circle look: border-radius: 81px 81px 0 0;  Each number selects, top left, top right, bottom left, bottom right in left to right order. This allows you to just have one line of code for border-radius and not four for each corner. This is the result:

Now all I need to do is add my arrow, and I came to the conclusion that the easiest way to do this was to do a image inside the square, and then on :hover change to another image of an arrow lower down, with a fade transition to make it look animated.

Here is the first state of the arrow.



Here is the second state when hovered, with a fade transition in-between.


Here is the final stage, when the hover animation has completed from the first higher arrow to the second lower arrow.



Finally I had one last problem, when I scrolled down the page the fixed scroll-hint showed above all the other content on the page when I wanted it to go behind it. I gave it a z-index similar to my fixed header/title and content scrolling above. I gave it a lower z-index than the content divs and this did the job.
Here is the HTML anchors:

Here is the final CSS styling:

Fixed Header, Scrolling Content

In this blog post I'm going to be taking you through the process in which I did to get my fixed header, behind the front scrolling content.

Considering everything with what I wanted to do had something to do with positioning I knew that the position and display tags would be imperative to its success.

For my background image I found this code online:

Essentially it makes the body tag have a background of a specific url, that wont repeat and will be centered horizontally, and centered vertically and it will be fixed. (wont move when scroll). The height 100% and width 100% make it take up the entire body.

Next was the title to center something and have it in a position of your pleasing is a little tricky when dealing with an element that has to be fixed.

The title was an h1 inside a div called .header:

I gave it a fixed position with a top of 150px this pushed it down slightly, I then text align centered it and it was in the right position!

The additional code just set the font family and the color of the font and the z-index which I will explain shortly.





Here is the h1 that was also influencing the title I spread out the kerning and also set the font weight, (light) and the line height, otherwise the text was on-top of each other making it unreadable!

So far it looked pretty good but I still needed to sort out the scroll that I specifically want.

Centered Title with H1 styling

So the next step for me was to get the content in place so I could see if the scroll actually worked, for this I just created a div called .content-title. which I knew my introduction was going to go in, I made this 100% height and gave it a background color of grey (#F2F2F2). This just gave me something to scroll infront of the home page to see if my scroll effect was working. and here's what happened:

As you can see the title font does scroll down, however it goes in font of the content title div that I put in place, this left me stumped for a long time, I messed around with different positions and displays but had no luck, so I googled for solutions and after a while I found that a the z-index class was used in these situations to create a 'layered' effect on your webpage whereby you could put certain things in front of others, so immediately I went over to w3 schools and found their page on it - http://www.w3schools.com/cssref/pr_pos_z-index.asp

This really helped, I simply applied a z-index class to the title, and the background of a lower value than the z-index I gave the content, this made sure that it would go behind in the situation of a clash, as a result I then had to make sure that everything I was giving a 'layer position' as it were, had the definition of either a fixed, absolute or relative as the z-index can only take effect when they are under those parameters. 

Another Inspiring Website - Bubblesfilm.com

http://bubblesfilm.com/ is a showcase website for professional simplicity. The ideology that the more you can inform your audience the better I increasingly find untrue. When I'm designing I keep asking myself what elements can I do without? It seems the developers of this website have a similar mindset!

In the screenshot above you're looking at the homepage, its full size image background look cool, and is cool. They have done everything they can to draw as much attention to the picture as that's what important especially for a film company handling everything visual. The high quality image and the subtle thin title fonts give a subversive effect without any background clutter.

The navigation holds true to this same style, a transparent navigation with a very simple bold rollover effect keeps anything colourful the main interaction point. They also have opportunities to get in touch in the top right hand corner of the page if required which is a necessary but sometimes overlooked option.

After I spent a minute or two on the website I realised that the title text had a button that took you to the video from which the background image (constantly changing) was from, allowing you to reach out and discover more with their aid, instead of ramming it down the viewers throat. (a nice touch).

When you scroll down you are greeted with this side the of webpage, a slightly more informative and less visually striking. The navigation bar has changed from the transparent version to this opaque black  navigation to match the content, I like this effect it makes it easier to see against the background and just looks more professional. The manner in which they have displayed the content is good, its simple with just title text and its obvious what you must do next if you want to see the content they have. Its three columns which very neatly collapses down into a 2 x 6 and then into a 1 x 12 suitable for mobiles.

This is the footer of the website, they've done it in a different way, instead of the more traditional tiny 'contact us' option that is the same colour as the background they've gone for a really cool way of displaying how to get in touch, little icons headering the information represent what it is for and a little company badge at the bottom, almost a badge of pride! 

So, what did I like and what didn't I?

+ Full size, no nonsense title page gives you an immediate sense of professionalism and instantly earns your trust as a respected company (which is harder than you think).

+ Navigation is transparent when there is a full size image to look at and opaque when a black background, a really nice touch.

+ Stacking content is fluent and professional and title re-size etc. via media queries.

- Top right social media area should be moved to the footer (in my opinion)

- Font choice is questionable and a more sans-serif clean cut font would be preferable.

Overall this is a great website I've taken many design inspirations from it and will try to adapt them into my own website, the layout itself is a winner. 8.5/10

OFF14 Barcelona - Day 1

The first day of OFF14 was awesome, everyone was a little anxious at first and didn't really know what to expect as this was most peoples first time at anything like this. As we walked in you were greeted by really friendly, like minded people which instantly made me feel at home! The picture above is what you see when you go in.

Where I was sitting!

Lorem Ipsum (Atelier)

The first speakers I saw were Lorem Ipsum (Atelier) they were a multi-disciplinary design studio and their works main objective is to tease and play with your mind, this really became apparent when they showed us their introduction video to the OFF14 Festival.

Here is the video that they played when opening the festival and it really set the mood for what was to come, it was a burst and overload of creativity that the thousands of people sitting in the conference could relate too being designers of one kind or another. It was made over the space of a year and the shots and editing are awesome. The general idea was to try and tell a story about a couple without them having any facial expressions, purely showing emotion through other mediums such as the setting, actions and colors. This worked really well and would of been very difficult to achieve.


Seb Lester (Typographer)
Next up was Seb Lester a very talented and creator of numerous font families that are very successful such as Neo Sans, Soho, Soho Gothic and more. It's always interesting to see in which direction a speaker is going to go in, whether it be explaining about their life story and how they go to where they are now, or projects they have recently done/most proud of. Seb Lester was neither really, he touched briefly on how he got to where he is now and a little bit about his achievements however for the most part he talked about his current hobbies, and what he does in his spare time which I found really interesting, there was no charade no attempt to glorify his stories just raw talent and creativity. He took us through some of his methods of procrastinating although I would not call it that one of them being calligraphy and how he has really gotten into it recently and has started making little Instagram videos of time lapses of him doing this free hand black-letter text. Here is a link to one: http://instagram.com/p/nS1FmczJ0Z/ He then talked about where he was located and it turns out he live in Lewes! Very strange and what a coincidence!

Overall the first day of OFF14 was an awesome experience, the people there was lovely and the talks were inspiration to say the least! Topped off with perfect weather and perfect food!

Inspiration, Inspiration

http://www.degordian.com/

This website is a digital design agencies, i wanted to take a look at it for a couple of reasons, one of them being the 'fixed header content scroll'. Its really nice effect that isn't too complicated to achieve (i hope). It instantly gives it a professional vibe and will be ideal for my large image, simple navigation design choice.

 In this screenshot you can see the scroll coming up above the header

To explain further, instead of the standard when you scroll, the page moves down, it gives the effect that when you scroll the content comes up and the background stays static. 

I wanted to look into the code involved and so far I've discovered that its about having both the header and the content on a z-index, the content higher than the header, you then fixed position the header and it should work! Obviously it's slightly more complicated but this is definitely the style I want to go for.

When looking at the title font this is also another great aspect of the website. 

The title is Future PT in Bold, and uppercase; this makes for a great title. It's stands out its easy to read and it looks modern and it doesn't have any irritating characters, often or not a type designers like to include an 'R' or a 'P' with a funny 'curveyness' which doesn't match the rest of the type.

I think the main thing that I have taken from checking this website out is the scrolling feature and the typography, Its so clean and professional and I can see my putting my content into a similar style of website with the transparent background thats slightly blurred.

Design for the Web - Presentation

---

Today we had our presentations as usual for each project as an exercise for both my classmates and myself to consolidate my ideas and get a clear vision of where to go next. For this project I wasn't as prepared as I usually was as I wanted my ideas to be achievable before I set my self un-realistic goals.

I presented my ideas confidently and I felt it really helped me re-assure my vision of what I wanted to do and knowing what you want to do is always what makes the rest of it seem easy. My presentation is embedded above I really felt like aside from anything I broke the usual mold in terms of what I covered in my presentation, I didn't feel the need to include brainstorms, or storyboards as I didn't feel it will actually help, I already did that for the iBook which essentially will have the same navigation system to give consistency.

Overall I felt like this presentation was a success and it helped give me vision of what I want my final idea to be, I pitched confidently and it seemed everyone liked it, there was no real negative feedback (or constructive) which would of been ideal!

The Start of a Journey - HTML5 & CSS3 - Part 2

As mentioned before I'm going to elaborate on the other css classes in my css styling sheet, first up; .nav {} class:

Here is my .nav CSS class specification, currently anything that is under the influence of <div class="nav"> will automatically adopt these characteristics. The first 'font-family' line of code tells them all to be the font 'HelvecticaNeue' in the 'color: black;' with a padding of 20px; this adds distance from the edge of the div to the text element, pushing it further down, and it will remain in the center because of the 'text-align: center;'                                                           command this will always keep it in the middle of the page.

The next CSS Class is '.nav li {}' this means that anything with a class of .nav, and .li will be effected allowing you to target once specific element. This overrides the original .nav if there are any conflicting lines of code as the browser reads from the top to the bottom of each page. So for example here the .nav li is saying anything that is a <li> within a <div class="nav"> will now turn red, it will have a margin of 10px inbetween each word with the opacity of 80% and most importantly it will display 'inline' this means that instead of it being a 'block' level element and having 100% width making everything stack                                        on top of each other it will now rest side by side, which is expected in                                                      navigation.

---

Now looking at the <p> tags that I looked at in my previous blog post, these refer directly to my title and subheading:

The first 'Welcome to my website' is <p1> and here is the CSS3 styling:

Very simply it is just a change to the font-size of the text, as it is within a div being influenced by the .nav I don't need to specify the font or padding or display type. this makes customising individual areas of the page an easy job.



Finally, the <p2> tag for the second sub heading 'please select a subject to learn more':
This is the p2 class it has a very slightly smaller font size of 18px and I have also used some new code here, 'opacity 0.6;' gives it the opacity of 60%. The third and final piece of code is currently being un-used however I have left it in there so if I want to give it a drop shadow I can, each '0px' can be changed to a value and each moves the position / increases the strength of the shadow.