Our team designed the user interface for this corporate website, which is hosted on a Drupal platform.  Stay tuned for mobile and internal application design in the near future.

Preview some of the site designs below, and visit www.timetrade.com to get the full site experience.

Kit 1: Static Site Starter

This is my basic starter kit for quick and simple projects. It’s HTML and file structure are based on the HTML5 Boilerplate project, so I know the basic templates are rock solid. I’ve also included a subset of the CSS from the Twitter Bootstrap project. This includes their reset CSS and a slimmed down version of their typography system that’s easy to build on top off. I’ve also built the file structure and CSS to take advantage of the SASS preprocessing language, and included a subset of Bootstrap’s variable system to aid in development. The Bootstrap framework is built using LESS, but I prefer SASS, so I’ve used John W. Long’s port of Bootstrap to SASS to make my own life easier. Finally, I’ve included thoughtbot’s Bourbon SASS mixins to make the use of CSS3 properties easier.

The goal with these tools is simple: I want solid starter code, streamlined development and the ability to clone files and start writing immediately. I began this kit when I realized that I was performing the same tasks whenever I started a new project. On several occasions I had ideas that I wanted to get working on, only to get sidetracked by all the tasks of setting up my code base. By the time I got through those repetitive tasks, all of my inspiration and motivation had disappeared. Now I can avoid that issue and start working whenever ideas hit me.

Kit 2: Static Prototyping Framework

This kit came from an early version of the Static Site Starter. The initial version included all of Bootstrap’s CSS and JavaScript files, along with a few other goodies. Eventually, I discovered that the first thing I’d do when I started a new project was delete most of the files. So, I split the project in two. Static Site Starter became my quick project kit, and Static Prototyping Framework became my more complicated setup for rapid prototyping uses. It includes the full SASS port of Bootstrap’s CSS and Javascript so that a developer has access to common UI elements. I’ve also refigured the file structure to take advantage of Jekyll. Jekyll is a static site generator built for maintaining blogs without the need to use a CMS. I take advantage of it for two key behaviors. The first is its ability to use includes in HTML files so I don’t have to repeat code. The second is its generation of a folder containing all the normal static files a simple site needs, so I can run my sites on a normal LAMP stack instead of a server that runs Jekyll, which is pretty rare outside of GitHub Pages. I’m not even using Jekyll for its intended purpose, but it’s one of the most important tools in my kit because it keeps me from having to copy/paste common code elements, such as navigation, headers and footers and it still generates the code that most of the static web runs on.

Kit 3: PHP Prototyping Kit

This kit is more of an experiment than something I actually use, but it’s worth mentioning because a lot of people probably already use PHP in the way I’ve used it here. This kit is almost exactly like the Static Prototyping Framework, but I’ve replicated the Jekyll functionality that I use most with PHP includes. It still allows you to write code without repeating yourself, but it doesn’t output static files at the end. The advantage is that more people are aware of PHP than Jekyll, so it allows some developers to get set up and running with a language they’re already comfortable with.

Also, it’s acronym is PPK, which is the chosen firearm of James Bond. I thought that was kinda cool.

Kit 4: Foundation Prototyping Framework

Finally, this kit is exactly like the Static Prototyping Framework, but it’s built using the CSS and JavaScript from the Foundation Framework by Zurb instead of Twitter’s Bootstrap. I wanted to give their framework a try because there’s a lot less styling than Bootstrap. Instead of overwriting existing styles and creating clunky, inefficient CSS you can build on top of very simple starter styles. Foundation and Bootstrap are both very nice, but Foundation has a much slimmer footprint, and I find that it encourages designs that don’t look like they were built on a CSS framework. Foundation currently runs on standard CSS, so I wrote a SASS version for this kit, restructured the files to fit my workflow more cleanly, and included a variation on the variables from Bootstrap to make quick style changes easier. The result is a kit that I think fits the purpose of the Foundation Framework even more cleanly than the original project does.

Wrapping It All Up

All of these projects have been open-sourced on GitHub for the use of anyone who’s interested. There’s no need to include an attribution or credit. Just use them wisely and make some great things! And if you’re interested in open source, check out some of these other Fresh Tilled Soil projects:

• Champagne.js
• One Page Site Framework
• Plug and Play Forms

Rich & Skinny

homepage:

landing page:

Design strategy: Where the Rich & Skinny homepage has one main image and then right column nav that lets visitors choose which area of the site to visit, the landing page cuts right to the chase by displaying an array of pants. Like Nike, the landing page mimics a product detail page that a user would not otherwise see until they had navigated deeper into the site. It brings the deeper content right to the surface as a technique to draw in users.  These jeans are awesome, by the way.

Roku.com

 homepage:

landing page:

Design strategy: The price and the product itself is the focus of the landing page design where the homepage design puts a lot more emphasis on the channels available to you through the device.  The roku image in the landing page design is practically in real-size, and the make the price very up front.  Details are available below the fold but mostly they are just sending one primary message through the header image text, “Roku. The #1 Selling Streaming Player.”  They also include a demo video right below the fold which is a smart move for an audience of consumers that are probably pretty video-happy.

Southwest.com

homepage:

landing page:

Design strategy: The Southwest homepage design is a bit cluttered in my opinion, with a ton of different offers going on in a 2 column lay out below the header image.  Contrastingly, the Southwest landing page focuses solely on one offer. The entire design effort goes into getting site visitors to sign up for rapid rewards, a free mile-earning service when you fly Southwest, which indicates to me that the landing page design is geared more for first time visitors. It’s a strong call to action wherein visitors have nothing to loose by signing up; Southwest gains their customer engagement and potentially loyalty over other airlines by getting users involved in this program. Smart thinking.

Nike.com

homepage:

landing page:

Design strategy: Nike’s landing page design puts the focus on one product to inspire custom action– their sneaker. It’s probably a top selling web product, or they may be A/B testing different products as the focus of their landing page to see which converts best.  It’s unusual, and kinda cool, that they added interactive elements on it, like the color swatch for the sneaker in the lower right. It’s a detail that makes this landing page feel more like a product detail page, which I imagine could have a positive impact on user psychology.

Gilt.com

homepage:

landing page:

Design strategy: This is a pretty aggressive landing page strategy that requires a users to enter their email in order to access the page. This probably means that this landing page is able to recognize new vs returning visitors that already have an account established. Although it’s bold, there are a lot of tempting images waiting for you once you get passed the sign up box, which helps motivate the user to give in and join.

Dropbox.com

homepage:

landing page:

Design strategy: Dropbox takes the opposite approach of most landing pages– while most landing pages have less content on them in attempt to get users to focus on the call to action, here the landing page gives more information– although still not a lot of it.  I love the idea of having a testimonial rotation right in the middle of the page, and again it offers an interactive element, letting users scroll through different ones, which increases engagement.  The landing page design retains the minimalist aspect of the dropbox website and homepage, but still manages to deliver some essential information– what Dropbox does and how to get it.

Read the second part of this post here: Top Brand Landing Page Design Strategies, Part 2

(Above) Cuts right to the chase– here’s what you want, here’s what we offer, and here are the only 3 ways to proceed: “chat now,” call, or fill out the estimate form. The simplicity is refreshing.

An unpredictable homepage design for the habitually white and blue vimeo.com. The shock factor gets your attention here, and then the glowing CTA “Join Vimeo,” front and center, beckons you to enter the enchanting world of vimeo. Nice touch.

my favorite design; it’s beautiful, soft, and welcoming. The only thing for me to do is to feel warm inside because of the photo, and then click the jumbo login button.

Gives you a mission statement, and then gives you no alternative to signing in, except for signing up, of course.

2 options– get invited, or sign in. We want to be invited because of the lusty people and sophisticated colors. Red CTAs are bold.

After the stunning background image catches your eye, the only other place to look is at the login window, well-placed in the upper left.