Archives for posts with tag: Web Design

Here are some things I consider when building landing pages for my apps and products.

All you need is some Photoshop skills and basic HTML & CSS knowledge in order to copy/paste find/replace your way to a kickass landing page.

First let’s dissect the essentials of a landing page. Here’s one of mine.

Example Landing Page Annotated

1. Use a beautiful screenshot

One that shows the main mechanic of the app. What does the user see most of the time while using your app? Show off how great that looks! To show off your app, you have options:

—Use a stock photo

Pros:

  • You can usually find *exactly* what you’re looking for
  • Allows for the most page customization

Cons:

  • Cost can range between $10-$50 for the right photo, sometimes up to $100
  • May be difficult for a photoshop novice to convincingly place the screenshot into the phone

—Use this .png of an iPhone to create your own image in photoshop

Pros:

  • Takes a much shorter amount of time, just drag & resize your app screenshot
  • Still allows for a large amount of page customization

Cons:

  • Looks a little boring next to a person holding your app in their hand

—Use placeit by breezi (recommended!)

Pros:

Cons:

  • Large image size
  • Limited environments, only a several per phone type

2. Clear Description of Product

What is this thing? Why should I care? In this example, we are looking at the official app for an event. You may have heard the phrase, “You only have 8 seconds to get someone’s attention.” I believe it’s even less. Maximize your one shot for the user’s attention by directing what they look at first. Use big typography to capture attention. I used Helvetica Bold with -2 letter spacing and a slight drop shadow for an elegant letterpress effect. Protip— Here’s the CSS:

.calloutText {
 text-shadow:1px 0px 1px #fff;
 color:#333;
 max-width:580px;
 line-height:72px;
 letter-spacing:-2px;
 font-weight:bold;
 font-size:80px;
 font-family: Helvetica, sans-serif;
}

Need to convince people your app is worthwhile? Write a snippet about the main benefit it gives the user. Don't ramble about features, just state plainly why using your app good for them.

3. Highly Visible Call to Action

So the visitor understands the product is beautiful and worth their time, but now what? We want them to download it! Purchase it! Sign up! We want them to do something. Don’t make them work to figure it out. Use a large, contrasting, clickable element to capture the user’s eye next.

I used the following CSS code for my orange buttons (with a nested image inside):

.downloadButton {
 width: 230px;
 margin-right:34px;
 margin-top:10px;
 height:79px;
 background:#FF7D2D;
 background-position: center top;
 background-size:100% 100%;
 background-repeat: no-repeat;
 display:inline-block;
 position:relative;
 border-radius:10px;
}

Now that we know what we want to put in our landing page, let’s get into some design specifics.

Use a framework.

Nobody likes writing robust cross-browser responsive layouts from scratch. Bootstrap is always a good starting point. There’s also Skeleton. With these frameworks, you can copy the base example.html pages that fit the style you want and replace the content to get 80% of the way done.

Make it sexy.

Seriously. Begin with the screenshot(s) you use for the page, and pick your color elements from there. In my example I have pulled dark grey, beige, and orange from the screenshot. Make your buttons and text these colors— your page will have a unified and slick look.

Use subtlepatterns.com instead of flat colors to make your page interesting to look at. Copy the pattern out of the .png and paste it into your own new file, then you can freely add color or lighten/darken the pattern file.

Use 1px box-shadow on buttons and div elements and a 1px text-shadow on your copy to make it pop. Yeah, I went there.

Short & Sweet

Hit them right in the face with why downloading your app is a great idea, and present them with a big shiny download button! That’s all you need to do. Practice makes perfect, so volunteer to whip up some basic landing pages for your friends! You’ll be surprised how fast you improve!

Check out land-book for some amazing landing page inspiration.

Thanks for reading! Good luck selling your product!

Follow me on dribbble and twitter!

Anything I left out? Email me at william@coolkidsdesign.com

Advertisements

So you wanna learn some web skills? Think you got what it takes? Good, because all it REALLY takes is patience, and practice. Let’s get started.

Be Social. Use Social Media or fall behind.

This is really step 0.5. If you aren’t following the experts in your field, start there. By following designers, developers, firms, and organizations, you can stay on the cutting edge of what’s happening, what’s hated, what’s hot… basically what the movers and shakers of the web world are up to.

Here’s a list to follow to get you started. (mostly resources, downloads, articles)

Here’s a list of Behance’s “creatives to watch.” (mostly designers’ personal twitters)

Use Resources. Don’t re-invent the wheel if you don’t have to.

There are hundreds of thousands of free, open-source resources available on the internet for you to download, learn from, and make your own. Google is a good first bet for any web-design question, but after a while you get the hang of where to look. For starters, bookmark the following tools/resources I use on the regular:

Keep Learning. Weather you’re gaining knowledge or practicing skills, keep leveling up. Resting on your laurels is a wicked bad mistake, yo.

Read blogs for breakfast, and image galleries for dessert. Knowledge is power. Keep your mind sharp and your subconscious swimming with beautiful and original work.

News & Opinions:

Typography & Art:

UI/Web/App Inspiration:

Stay Passionate. Believe in yourself & be a rockstar.

It can be intimidating, especially when you’re aware of the vast amount of knowledge and skill you don’t possess. But if you keep calm, utilize your resources, pay attention to trendsetters, keep your finger to the pulse of the scene, never stop learning, and don’t give up — I can guarantee you’ll be a pro in no-time.

Now that we’ve gone over that — let’s make some stuff. To start, open these tabs:

Thanks for following along, I hope this was as much fun for you as it was for me! ♥

 

The Project Mayhem 2011 documentary project can be found at http://projectmayhemgainesville.tumblr.com/2011

What I’m doing in 352 Media is probably the most career-relevant commitment I’ve ever had. With that said, the past few weeks I have been making great strides in my web design abilities. The updated Gainesvillains site came out looking like this:

Click to view larger image.

Our Second assignment was to design a charity website. One great thing about 352 Media is that they offer free charity websites to non-profit businesses. How cool is that? The client can choose from several different style templates. Take a look at some of the templates they offer: http://www.designyour.org/Design-Templates.aspx

My design used the grid from these templates and looked a little something like this:

 

Neat header image, large slab serif typography emulates feel of golf

2-Column, Soft colors

It is important to try to not completely use Lorum Ipsum in your designs. 10/10 times it's more interesting to look at!

The Improvements:

After an amazing critique on Friday I did more research and planned out the header. The problem with the first design was it wasn’t captivating enough to make someone stop and want to investigate . The aim of a charity site is often to raise money, and it is advantageous for the viewer to be visually attracted to the design. People are much is more likely to donate to a cause if it provides them with breathtaking visuals. Good design, then, uses these empathic undertones to strike at the chords of their target audience’s heart, prompting an eventual click on the “Donate Now!” button.

With the new header and navigation it looks like this:

More header-body continuity / smoother transition across nav bar to body.

 

Text improved, more relevant color scheme, still clean and simple

 

That’s all until next week. So to close, I want to leave you with a thought:

If you are reading this- odds are I’m designing things right now!

-Will

Never in my life have I had such a helpful critique on my work. After speaking with Adam and the other interns, I developed a whole new direction for my website.

Before: A simple, 2 column blog with sub pages.

Before

After: A better designed, simple, 2 column blog with better call to action (buy shirts, navigate the site).

Future: An awesome site with great impressionistic qualities that allow the user to recognize what The Gainesvillains is about instantly just from the feel of the pages. Great usability and intuitive interface, guiding the visitor to the store, the music, or event information- all while maintaining brand image.

Next week I will have a home page and an inner page design.

I can’t wait to get started.

Last week we finished off our group lectures and got our first assignment.

Brent gave an incredibly interesting lesson on coding- I got a great review of basic html and learned some of the finer points of css.

Take home points include:

Firebug is a very useful application that allows you to inspect elements of a web page and see the various code it is composed of.

“@font-face” is a trick used to download fonts to the client browser cache- so that you can use non-web fonts in layouts. It is awesome not only because it loads faster than an image, but it counts as body text, improving SEO for the page as well.

Search Engine Optimization is like doing your taxes. You’re encouraged to ‘optimize’ as much as possible- but ‘cheating’ is strictly prohibited. If caught ‘cheating’ (hidden tags, excessive self-promo, etc.) a site suffers a huge penalty from Google.

Our project is to create a web layout using the 960 pixel grid system. Basically the page needs to be 960 pixels across- including 5 pixel margins and 10 pixel gaps between columns. There’s a great explanation of how this system works here.

I’m planning on creating a new layout for The Gainesvillains. I want to have a maintain the minimalist design but integrate better design elements. My home page’s layout will be able to be constantly updated- keeping the main page fresh, not only keeping fans updated with the latest of Villainous activity but also contributing to SEO.

Stay tuned to see my designs and comments on the critique next week!