We're growing into something new. Read More
Geoff

Geoffrey Chong


Bringing Facebook forward

Hey everyone, So on rare occasions I see the Facebook landing page and each time I wonder "why the hell does it still look like it did in 2008?". Well clearly the lack of attention to the landing page hasn't been the downfall of their conversion rates, but it deserves at least something that looks remotely close to the current trends! So I was bored and put together this design, I ended up making two versions: the first one incorporating a bit of a graphical play on the words "facebook" and the second one which keeps the design flat and simple. I know the map isn't completely accurate (missing some countries) but I opted for a more general approach to the graphic to keep it simple as well as the icons big enough for you to tell what they are haha. Do tell me which version you prefer/like, and as always comments/feedback/suggestions are all welcome :)

Portfolio redesign reworked

Hey guys, I'm back with more updates on my portfolio redesign. After a couple of attempts, [here](https://forrst.com/posts/Rebranding_Redesigning_portfolio-Fus) and [here](https://forrst.com/posts/Portfolio_Redesign_rev2-FyX), I decided to do a bit of a rework. For those just joining, this redesign is aimed at providing the visitor with a snapshot of what I'm about; think of it as a mini interactive resume where the visitor doesn't have to do too much to find out about me but if they want more, it will act as a portal/contact point. I'm not looking to sell services, this is (almost) strictly a profile. In this rework, I wanted to keep it as flat and simple as possible and its going to be primarily a one page design, but I will be looking at building case studies out of my larger projects and incorporating them as extra pages in the future. I know the structure is fairly popular at the moment, but i'm not looking to be too fancy as personally i'm quite simple and I like clean, simple and functional design :) Thanks to @forrestkoba, @sarah_edwards and @LauraMoraiti for the feedback thus far! P.S Thanks for the "Ranger's Pick"! [Here's a notable link](https://www.notableapp.com/posts/70ce44a08dc99c386187b7f09a1bce77e8544142#annotate), for those who are feeling a little bit fancy.

Simple & Clean RSS feed app

Hey guys, long time no post! This is actually for a uni assignment which we are tasked with creating a RSS Feed application using AS3 (terrible I know), but alas the UI didn't turn out too bad, hope I can make it work lol. Anyways, hope you guys like it, feel free to comment :)

Discussion

To CI or to WP?

I'm torn between CI and WP for my portfolio backend; Is it really worth building a blog/portfolio system (uploading new work, changing work status, custom contact form, tagging work to organise) from scratch using CI? Or is tackling WP's system something that would be more useful (to clients as well)? I'm thinking CI is a lot more flexible (I can bend it to my will a lot easier) compared to WP, what's your opinion? Addendum: Thanks everyone, I'll have to suck it up and learn to theme WP :D

<div class="browser">
  <ul class="brws-cntrls">
    <li class="brws-close"><span></span></li>
    <li class="brws-minimise"><span></span></li>
    <li class="brws-maximise"><span></span></li>
  </ul>
  <div class="work-img">
    <img src="http://puu.sh/KHJt" alt="" />
  </div>
</div>​

//-------

.browser {
    margin: 10px;        
    padding: 1px;
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.784, rgb(123,123,123)), to(rgb(191,191,191)));
    background-image: -moz-linear-gradient(90deg, rgb(123,123,123) 78.4%, rgb(191,191,191) 100%);
    border-radius: 3px;
  }
  
    .brws-cntrls {
      margin: 0;
      padding: 0.375em 0.438em 0.312em;
      list-style: none;
      border-bottom: 1px solid #989898;
      background-color: #e8e8e8;
      background-image: -webkit-gradient(linear, left top, left bottom, from(#e8e8e8), to(#bebebe));
      background-image: -webkit-linear-gradient(top, #e8e8e8, #bebebe);
      background-image:    -moz-linear-gradient(top, #e8e8e8, #bebebe);
      background-image:      -o-linear-gradient(top, #e8e8e8, #bebebe);
      background-image:         linear-gradient(to bottom, #e8e8e8, #bebebe);
      -moz-box-shadow: inset 0 1px 0 rgba(254, 255, 255, 0.44);
      -webkit-box-shadow: inset 0 1px 0 rgba(254, 255, 255, 0.44);
      box-shadow: inset 0 1px 0 rgba(254, 255, 255, 0.44);
      line-height: 1;
    }
    
      .brws-cntrls li {
        width: 0.500em;
        height: 0.500em;
        padding: 1px;
        display: inline-block;
        border-radius: 10px;
      }
      
      .brws-cntrls span {
        width: 100%;
        height: 100%;
        display: block;
        overflow: hidden;
        background-position-y: 11px;
        border-radius: 10px;
        -moz-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.32);
        -webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.32);
        box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.32);
      }
      
      .brws-cntrls span:after {
        content: '';
        margin: -2px auto 0;
        width: 0.3em;
        height: 0.2em;
        display: block;
        background: #fff;
        border-radius: 10px;
        -moz-box-shadow: 0 1px 1px #ffffff;
        -webkit-box-shadow: 0 1px 1px #ffffff;
        box-shadow: 0 1px 1px #ffffff;
      }
      
      .brws-close {
        background-color: #693333;
        background-image: -webkit-gradient(radial-gradient, left top, left bottom, from(#693333), to(#a46665));
        background-image: -webkit-radial-gradient(top, #693333, #a46665);
        background-image:    -moz-radial-gradient-gradient(top, #693333, #a46665);
        background-image:      -o-radial-gradient(top, #693333, #a46665);
        background-image:         radial-gradient(to bottom, #693333, #a46665);
      }
      
        .brws-close span {
          background-color: #fe5f5e;
          background-image: -webkit-gradient(radial, #fdbcbc, #fe5f5e);
          background-image: -webkit-radial-gradient(center center, circle cover, #fdbcbc, #fe5f5e);
          background-image:    -moz-radial-gradient(center center, circle cover, #fdbcbc, #fe5f5e);
          background-image:      -o-radial-gradient(center center, circle cover, #fdbcbc, #fe5f5e);
          background-image:         radial-gradient(center center, circle cover, #fdbcbc, #fe5f5e);
        }
      
      .brws-minimise {
         background-color: #794821;
         background-image: -webkit-gradient(linear, left top, left bottom, from(#794821), to(#a59054));
         background-image: -webkit-linear-gradient(top, #794821, #a59054);
         background-image:    -moz-linear-gradient(top, #794821, #a59054);
         background-image:      -o-linear-gradient(top, #794821, #a59054);
         background-image:         linear-gradient(to bottom, #794821, #a59054);
      }
      
        .brws-minimise span {
          background-color: #e4d385;
          background-image: -webkit-gradient(radial, #fce9a4, #e4d385);
          background-image: -webkit-radial-gradient(center center, circle cover, #fce9a4, #e4d385);
          background-image:    -moz-radial-gradient(center center, circle cover, #fce9a4, #e4d385);
          background-image:      -o-radial-gradient(center center, circle cover, #fce9a4, #e4d385);
          background-image:         radial-gradient(center center, circle cover, #fce9a4, #e4d385);
        }
        
      .brws-maximise {
             background-color: #485f3d;
             background-image: -webkit-gradient(linear, left top, left bottom, from(#485f3d), to(#7d9267));
             background-image: -webkit-linear-gradient(top, #485f3d, #7d9267);
             background-image:    -moz-linear-gradient(top, #485f3d, #7d9267);
             background-image:      -o-linear-gradient(top, #485f3d, #7d9267);
             background-image:         linear-gradient(to bottom, #485f3d, #7d9267);
      }
      
        .brws-maximise span {
          background-color: #bdd2a0;
          background-image: -webkit-gradient(radial, #d7edb9, #bdd2a0);
          background-image: -webkit-radial-gradient(center center, circle cover, #d7edb9, #bdd2a0);
          background-image:    -moz-radial-gradient(center center, circle cover, #d7edb9, #bdd2a0);
          background-image:      -o-radial-gradient(center center, circle cover, #d7edb9, #bdd2a0);
          background-image:         radial-gradient(center center, circle cover, #d7edb9, #bdd2a0);
        }
    
    .work-img {
      width: 100%;
      height: 100%;
      background: #fff;
      overflow: hidden;
    }​

CSS OSX-esque Browser

Here's a demo of a pure CSS3 browser window I made for my new portfolio. Its far less detailed but I figured that I didn't really need that much detail in the first place :P What do you guys think?

Discussion

How do you manage your transactions with clients?

I've been wondering about this for a while; as a freelance designer, I'm constantly trying to find the best way to make sure my work isn't stolen before a final payment has been made for my work. Currently I make a quote and take a percentage as a down payment, then once I've finished I show them a final design and once that's finalised, I wait for payment before giving up the PSD. But I'm always worried because they could easily take the final images and "run". So i'm wondering if there is a best practice when exchanging your files for payment, maybe a service that makes this more secure or is the method I use all I can really do?

Discussion

Do you version your Front-end development?

I've noticed for bigger projects, involving a couple more people's input on design, that it would probably be good to have some version control over the HTML/CSS documents we produce; just to have that extra bit of control going back and forth between versions and comparing different templates. Does anyone have a solution for this kind of thing, other than git?

@-moz-document url-prefix() {
      /*CSS Rules*/
}

eg.
@-moz-document url-prefix() {
      h1 { font-family: arial; }
}

Targeting Mozilla browsers in CSS

Recently the differences between chrome and mozilla's CSS rendering have been proving themselves a little more annoying than usual. So I went on a serious mission to find this snippet, and I hope it helps you guys out too!