Archives for category: Inspiration

Image

Well, they’ve finally done it.

Adobe has gone about making the change from being able to purchase software upgrades at one’s convenience to having to pay a monthly subscription to be able to use the programs. Development of the next iteration of the Creative Suite has been cancelled in lieu of this new cloud-based subscription model, which is sure to upset many.

Allow me to explain.

The common equivalent would be owning a house and the bank saying, “Well, we know you’ve already bought it, but how would you like to rent your house instead?” It’s outrageous.

Adobe claims that this will allow them to more easily implement updates to the software and prevent piracy. But it also makes those of us who didn’t feel the need to purchase every new iteration of the product (unlike certain smartphone enthusiasts) forced to do so.

The move wouldn’t be as heinous if there were another real alternative to the Creative Suite. There are other text editors to replace Dreamweaver (Aptana, Sublime Text), but what of Photoshop? And Illustrator? Sure, there are programs such as GIMP or Krita, but, honestly, I hadn’t heard of them before a cursory Google search.

Even though the monthly fee isn’t that steep (yet), what’s to keep Adobe from raising the price whenever they were so inclined? The change also allows them to decrease their efforts on each of the following updates/iterations. Gone are the days where they would have to make significant improvements to the software as a purchase point.

It also means that access to your ACS files is always dependent on your payment for that month. If you miss one month’s dues, all of your files exclusive to those programs (PSD,EPS,INDD, etc) will be rendered useless until payment has been resumed (most likely with an additional late-payment fee).

It’s not too late!

This subscription-based access hasn’t been enacted yet, but it appears that the event horizon is fast approaching. CS6 will be the last purchase-to-own version of the Adobe Creative Suite before switching over to their new business model.

A difference can be made! Sign the petition linked below and we can influence the change!

Adobe Anti-Subscription Petition

Thanks to Stephanie Cunningham for posting the rant that I shamelessly regurgitated for this blog post.

Advertisements

The most fun a designer can have in their early careers is working at a bootstrapped tech startup.

It’s really a blast building a product from the ground up. As the company’s sole designer, it’s your responsibility to make sure what you ship is beautiful and intuitive. But when you’re the only artsy kid in the room, things can get tough. Here’s some hard-learned tips that have kept me going through the ups and downs.

Can’t Stop, Won’t Stop, Don’t Stop.

If you work at a startup, don’t let me catch you at the coffee shop without your moleskine. A doodle a day keeps creative block at bay. Keep pushing, iterating, and thinking of how to do it better.

Stuck? Ask for feedback from your coworkers. Hit print, make four copies: one for yourself, two for sharing with coworkers to take notes on, and one for the final decisions after you’ve synthesized the results.

Once you’re done with paper, pencil, and photoshop mock-ups, it’s time to prototype, get feedback, iterate, and repeat. Don’t ever stop. If your product is still under development, everything can change completely at any moment. Being able to throw your designs away and start over is essential to your success.

Go Outside Your Comfort Zone.

Learn a new thing or two, balance your visual design with interaction design. Codecademy and Code School are great places to learn some javascript and jQuery. If that’s over your head, Jessica Hiche’s Don’t Fear the Internet is an amazing resource to learn some HTML and CSS basics. Need a text editor? Go with Sublime Text. If your pixel polishing is lacking spend some time on Dribbble and Behance. Whatever you do, don’t get trapped in your own little design bubble—push your own limits and you’ll be amazed at how quickly your skills improve! Which leads us to…

Challenge Yourself When Others Don’t.

The hardest part is that your decisions will never be challenged enough. There’s no senior designer or creative director who will throw away your designs and tell you to start from scratch.

Sometimes, the team will be enamored with your very first version of a design. Don’t let it go to your head—you’re not done just yet. The only person who is able to really keep refining the design is you. And you need to. If you don’t, mediocrity will result. Great design doesn’t happen on accident. It doesn’t happen on the first try, either.

iterate

When you’re pushing a design, wherever you stop—that’s what the product will look like. Sometimes feedback from your non-designer coworkers is not enough. This is why user feedback is so important. There’s no better way to tell if your designs work or not then to test them on real people.

Some days, the juices are flowing, the team is mind-melding, and everything falls into place. Engineers are executing perfectly, and you feel a sense of wonder at how much your team can accomplish in just one day.

Some days, there’s simply no wind in the sails. Go for a walk, pour yourself a cup of coffee, and draw it up again from scratch.

Startup Life isn’t easy, but it’s definitely worth it.

—Will

Don’t forget to follow me on Twitter, and on Dribbble too!

What do you think? How do you go about being the sole designer at your company?

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

PlaceIt by Breezi allows you to drag and drop screenshots into their photographic templates and instantly create beautiful product photographs of your app, website, or design. Ever wanted to make images like this:

—or like this?

sign-in-old

With PlaceIt, you can. Just take your pixel-perfect mock-up screenshots and drop them into the template of your choice. It’s so simple. Give it a try today.

Share your mock up designs!

Also, don’t forget to follow me on Twitter and Dribbble!

—Will

After stumbling upon a Viktor Hertz pictogram poster, I decided to make one of my own. It’s a bit reflective of my mood as of late, but nothing cheers you up like design, right?

No Sunshine

Ever have a grand idea for an app or navigation scheme but just couldn’t get the point across?

Say goodbye to the days of having to painstakingly explain your app to the visually/spatially challenged.

POP, or Prototype on Paper, is an amazing tool that you can download and use for free that allows you to link wireframes (or high fidelity mockups) together into a navigable ‘faux-app’.

Here I have mapped the tappable areas of my sketch to link to other views. You can literally mock up an entire navigation using this tool.

Here I have mapped the tappable areas of my sketch to link to other views. You can literally mock up an entire navigation using this tool.

POP stresses using photos of wireframes to create your mock apps — but what if you used high-fidelity mock ups created in photoshop instead? This takes making ideas visible to the next level.

Be sure to pick up your FREE version of POP from the App Store, and hurry— because they’re giving away 10 projects for free in exchange for a tweet while they develop their pricing model!

Happy prototyping 🙂

—Will

Follow me on Twitter & Dribbble!

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! ♥

 

What is instagram?

Instagram is an amazing photo community consisting entirely of iPhone photographers.

I downloaded Instagram when my friend told me about it several months ago. I was instantly hooked. Not only does it provide a cloud to save and keep track of all your fun, quirky photos, but there are tons of users that you can ‘follow’ so that their photos appear in your home feed.

The UI for Instagram's stream.

Instagram allows you to easily put filters on them that bring out the personality of the photo. The beauty here is that the blandness normally resulting from camera phones is now a non-issue. You can quickly slap a colorful or high contrast filter on a photo so that it emulates real life!

But what’s best of all is that Instagram allows for EASY platform integration. When I take a photo, it is posted to my Tumblr blog, my Twitter, AND my Facebook immediately, allowing me to share events, news, or exciting finds real time across all my social media platforms. (I wonder how long it’s going to take them to add Google+?)

"It's a beautiful day for a Pool Party @TheEstates! Come hang out! #swag #weekend" an appropriate tweet accompanying this photo.

I use Instagram nearly every day- and dozens of times throughout the day on the weekends and on vacation. To check out photos from my recent trip to New York (and the rest of my Instagrams) follow me on Instagram @willnewton or check out my blog’s Instagram tag feed!

So the next time somebody asks you about Instagram remember everyone, it’s more than just a photo app.

Download Instagram here: http://instagr.am/ (try putting it in your phone’s browser!)

This idea came to me on a sleepless night (one of the many I’ve been having lately). I’m kind of a Stumbleupon addict at the moment and I tend to post what I find on my Tumblr. Because of this co-dependent relationship between the two sites, I decided to combine the two. Literally. These are two quick logo combinations that I thought were amusing. 

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