Design

Using Parallax Scrolling to Liven Your Web Design

I may not be old enough to remember Moon Patrol; in fact I was born the year it came out, but I played my fair share of video games through the ‘80s and ‘90s and recognize how they’ve changed over the years. Not just from a graphics standpoint, but from only being able to move left and right across the screen to having free reign in an AI environment. By now you’re surely wondering what Moon Patrol and retro video games have to do with web design? The answer’s simple: parallax scrolling.

Parallax scrolling is a technique that is currently creeping into the web design world. It was being used in animation as far back as the 1940s, but was made popular by the game Moon Patrol in 1982. Parallax scrolling is a method of programming computer graphics where background images move at a different rate than foreground images. The result is a depth illusion in a 2D visual that always makes me think of the video games I used to waste hours playing as a kid when I should have been doing my schoolwork.

I could write on and on trying to come up with a clear explanation on how parallax scrolling works, but since a picture’s worth a thousand words, I’ll save us some time and we take a look at an excellent example of a parallax scrolling website in action. The Activate enhance water beverage site is a phenomenal example of parallax scrolling.



Responsive Web Design: Answering the Challenge

A while back I talked about the importance of your web presence being mobile-friendly. There are many ways to accommodate a mobile viewer, be it a separate mobile-friendly website, making sure that your site has the right dimensions and parameters to display properly on a mobile device, or by creating a responsive website. The first time I heard the phrase “responsive web design” my friend was describing it to me as “the new hotness” (i.e. the "in" thing) and current trends would seem to prove him right.

Responsive web design is certainly a trend worth looking into as it allows a website to break itself down between multiple screen resolutions and monitor sizes—whether that monitor is an actual monitor, mobile phone screen, or tablet display. Setting CSS media queries to accommodate specific resolutions is the key ingredient to creating a responsive site. Using CSS to give elements of a site a percentage based size, setting a max and min height/width and utilizing the em font size are other ways for a site to dynamically adjust. Having your website dynamically select the proper image size for your visitor’s display is a nice feature, it will speed up load times by not trying to load an image that’s three times the size of the display and it will ensure the visitor is able to see the full image, not just parts of it.

Let’s take a look at a great example of a responsive website from a brand I’m sure we’ve all heard of: Sony.



 

Typography: Stocks Tank, Customs Bank

For years, website typography was limited to a handful of "web-safe" fonts. Now with new developments in web technologies like HTML5 and CSS, there are few reasons not to utilize the different typography at one's fingertips—especially since SEO is no longer negatively impacted. In this blog article, freelance web designer and writer Scott Stanton shares  how to infuse more personality into your site using @font-face CSS rule.

Back in the day when calculations were done on an abacus and stories were chiseled in stone, the only way to get eye-catching fonts in your website was by converting them to images and then placing the images in your site. Talk about two steps forward and one step back! Not only was that a little bit on the time consuming side of things, but in order to break out of the core 13 or so “web safe” fonts by converting the text to an image, you were actually taking text out of your site, a big no-no if you’re hoping search engines will ask you to prom. Text is the way to impress search engines and a surefire way to get yourself noticed.

The last time I had my car in the shop I noticed they had a computer screen full of custom wheels that were available for purchase. So, if we’ve reinvented the wheel that many times does that mean we’ve finally reinvented typography in the cyber world? The simple answer is, yes! With HTML5 and CSS3 we’re now able include custom fonts in our websites and have them remain viewable across multiple browsers and operating systems thanks to the @font-face CSS rule. Granted some browsers have supported it for a while, it’s now accepted by about 98% of the browsers and operating systems out there.

Less is More: Clean Websites

What does effective website design look like to you? If you survey the web landscape today, you'll likely notice that companies are shying away from cluttered layouts full of links in favor of simple and clean. Freelance web designer and writer Scott Stanton shares his perspective on this trend of minimalist web design and the particular elements that make it pleasing to the eye.

We’ve all heard the saying, “Less is more.” And I’m sure we’ve all been told to clean up after ourselves, perhaps some of us more often than others. So it’s no surprise that the minimalist web design trend is always a safe bet when you’re looking for a design that will withstand an industry where trends seem to change more often than the coffee filter in the break room. So how do you make a white background pop?

There are a few reoccurring design aspects that are popular in minimalist sites: gradients, shadows, rounded corners, and clean lines. A lot of times you’ll see a combination of these elements in the main navigation bar of the site. The gradient helps give the site some depth and sets modern websites apart from the ones of yesteryear. It’s rare that I come across a site with a white, or solid color background, and a navigation bar that’s also a solid color. Not only would it make me shudder from flashbacks to a time of bowl haircuts and grunge music, but it gives the website a flat appearance. Nothing has any depth and the eye has a hard time determining which color is supposed to be on top of the other.

One site that some of us might be familiar with that incorporates gradients in to their design is, well, this one. If you’re signed in to Elance, notice the use of a linear gradient in the main navigation bar at the top, starting dark at the top and fading to a lighter gray at the bottom. This adds another dimension that feels as though it’s protruding towards us. Now try and picture how different this page would look if that was one solid color, the page would seem flat and much further away from us. 




More Graphic Design Trends For 2011

Every year, certain trends affect graphic design as designers look for new ways to effectively communicate certain concepts to their audience and customers. Whether you’re a Photoshop guru or an Illustrator newbie, we’ve compiled the trends to look at as we get deeper into 2011. As a designer working on Elance, looking for new ways to lock in potential jobs is important, and analyzing current trends is one way to anticipate what your customers are going to want.

Style
A new retro style and color scheme makes a big comeback in clothing and fashion every year. Web and graphic design are no different and falls subject to a revival of colors and styles every year. Posters, collateral, and websites all sport colors and graphics that were unique yet patterned throwbacks to a funkier time. (For web references, check out WDL’s 50 Retro and Vintage Web Designs to Inspire You). Color schemes, fonts, and textures were also big in 2010 and will continue to be big in 2011 – especially antique paper and concrete textures, stripes, and vintage lines.

Minimalism has been a trend for years, but only recently has it become a dominant trend in design. Everything from offices to websites to architecture is focusing more on stark yet purposeful design functionality. Logos are focusing more on simple glyphs, simple shapes, understated text and simple colors. Utilizing simple shapes and single colors can be an understated yet powerful combination. Websites such as Glyphish.com can provide you with hundreds of glyphs to help in your minimalistic design with both free and paid options.

Hand drawn elements became largely popular at the end of the year and can continue to carry popularity into 2011. Not only did many designs utilize paper textures, but many of the popular designs involved handwritten fonts and other sketched elements, such as the hand-written logo above. Many designs utilized the customized, semi-random and personal nature of hand-drawn elements, and a simple Google search for “hand-drawn design element” will reveal hundreds of brushes, icons, and vector sets with free hand-drawn elements for your next design.

10 Online Resources for Graphic and Web Designers

How dull of a place would the world be without the artistry and passion that graphic and web designers bring to the table? We’ve put together a list of ten exciting resources for all of our creatives worldwide—so whether you’re looking for some Photoshop tips and tutorials, fresh new fonts or themes, or simply a jolt of inspiration, you’re bound to find what you’re looking for on one of these sites. And with over 800 active jobs awaiting graphic and web designers on Elance right now, you can learn some new tricks, get motivated, and then start bidding on some new projects!

1stwebdesigner

A design blog catering to bloggers, freelancers, and web developers that gets 1.5 million hits a month. Includes helpful articles on coding (HTML & CSS, AJAX, and PHP to name a few) and tutorials on effects—3D, photo, and text. There’s also a premium content section ($9.95 for full access) with exclusive tutorials, downloadable source code, and coupon codes for design-related businesses. If you’re into that sort of thing.

Be sure to check: 45 Top and Most Popular Articles of 2010 in Design Community

Creattica

A go-to site if you’re looking for some inspiration. Creattica provides galleries of design examples across categories like Business Cards, Flash Websites, Logos, and 3D Graphics, and every piece of work is user-submitted. Then the user community votes on which pieces go up on the site--and consequently which ones gets thousands of eyeballs a day on their creations. To start submitting your work simply create an account on the site.

Be sure to check: Flash | Latest Designs


DesignersCouch

An online community for designers where you can create your own portfolio and publish it so that you can receive feedback from your peers. Oh, and did we mentioned you win prizes for your constructive critiques? The only knock is that membership is invitation only—though you can get on the wait list, you may be off cozying up to one of the 7500+ “Creatives” who can help get you through the gates. Otherwise there are some great articles and design collections to browse while you wait.

Be sure to check: DesignersCouch InspireLog

Did Apple’s iPhone and iPad Kill Flash?

Rumors of Flash’s impending death have been greatly exaggerated, but according to recent headlines, the Cupertino mobile devices giant is looking to singlehandedly shift online rich media content from the Adobe Flash platform to HTML5, CSS, and Javascript with its mega popular iPhone, iPod touch, and iPad devices. But why?

Last week, Apple CEO Steve Jobs published a 1,500+ word article titled “Thoughts on Flash” highlighting his and Apple’s collective decision to continue to leave Adobe’s Flash technology off of their products. His argument details six main reasons, which include (from Apple.com):  

  1. Adobe Flash is a 100% proprietary product that is not open and is completely controlled by Adobe.
     
  2. While most online video is Flash based, H.264 is a more modern alternative that is widely available.
     
  3. Flash has significant reliability, security, and performance issues. (He even claims the number one reason why Macs crash is due to Flash.)
     
  4. Flash technologies require software decoding, thus eating an unnecessarily large amount of battery life.
     
  5. Flash was designed in a world when input devices simply comprised of mice and keyboards and not touch.
     
  6. The most important reason to Jobs: Flash is a third-party layer of software that hinders the progress of development and the platforms it resides on, like the iPhone OS, for example.
     

While most of these arguments can be seen as thoroughly valid points, several of them can be fiercely debated, and recently, some of them have been.

First, Flash is neither entirely proprietary or entirely open – according to an article from Fast Company. Certain aspects of Flash are open source, like the SWF and FLV video formats and the Flex SDK, and some are not, like Flash IDE. But why the accusation of open vs. closed? Fast Company writes, “The open-vs.-closed argument isn't really what we're talking about here, anyway: Jobs only mentions it to negate the accusations that iPhone OS is 'too closed.' His real problems are technological (like battery life and touch).”

To The White House: Hire An Elancer And Save $299,900

To Whom It May Concern:

Word is that you recently looked to take the ol’ Air Force One out for a photo shoot earlier this week, and I heard the bill wasn’t pretty. $300,000!

Don’t get me wrong, I don’t have a problem with you spending some dough to take the Presidential ride out for a few glamour shots, but next time, consider hiring an elancer to do a little photo editing for you instead. It’s easy, and ninety nine times out of a hundred, you probably wouldn’t be able to tell the difference. And did I mention that it would save you a major grip of cash? I’ve even taken the liberty of creating a sample for you at no cost.

All jokes aside, the reality is this: If a picture is worth a thousand words, Photoshop is worth a million. It’s an unbelievably incredible tool that can create even more incredible results. You’d honestly be surprised at what people can do these days. Astonished. Amazed. Maybe even perplexed. And through Elance, you have access to a huge pool of expert Photoshop providers that take ‘chopping to the next level – 10,302 to be exact.

So, a word to the wise and to anyone listening in from inside the beltway: The next time you’ve got 300 grand burning a hole in your pocket and you’re in desperate need of some fly pictures of your private jet in action, keep it in the hangar, hire an elancer, and save the leftovers for the next round of bailouts.

Elance Blog Gets A Makeover

We’re kicking off 2009 with a new blog design for our readers - we hope you like it!

We went for a simple and clean design to make it easier for you to read, browse and search for blog articles.

We hired and collaborated with elancer Ketan Sethi from Eyeforweb to design and code the new blog template – thanks, Ketan!

How to Create a Video on Budget

Guest Contributor Shannon Newton is back, and he's sharing his expertise about video production and what you can do to successfully manage your next video project within your budget:

Pretend you want to build a nice, second story deck for your home. If this deck was your video and you had a specific budget to spend on it, where would your money go? I took a look and based on my experience, here's what I found:

Pages

Subscribe to RSS - Design