Archive for the ‘Web Design’ Category

Blog Seperator
July 29th, 2009

How the iPhone’s Home Screen Will Change the Way We Design

It’s a design standard: place your important and/or often-used design elements in the upper right corner of your design. Take a look at the home page of some of your favorite sites. You’ll notice convenient links to maps, contact us pages, search boxes, login/logout fields, and more — and most of these elements are in the upper right corner of the page.

It’s become so familiar that most of us know instantly that when we want to search or login, our eyes immediately check the upper-right hand corner first. Instead of going into the psychology of why that is, here’s the reason I think a change is coming.

On the iPhone, your navigation is done through a touch-based system. To activate the home-screen, you hit a conveniently-placed home button on the bottom-center of the phone.

It’s round and concave–perfectly (and intentionally) suited for thumbs, big and small. That being said, most people cradle their phone such that their thumb is always hovering near the home button. The iPhone is 4.5″ tall. If you have a thumb that’s long, congratulations on your pro basketball career. But if you have an average-size thumb like the rest of us, you’ll have to move your thumb from the bottom of the screen to the top, or use a finger to do the same.

My thumb’s range can comfortably cover the bottom 2 or 3 out of 5 rows. So, for convenience and speed, I’ve reorganized my icons so that the most-used ones are near the bottom of the iPhone’s screen. Apple does this too, with “Phone,” “Mail,” “Safari,” and “iPod” organized by default as the bottom-row on all their iPhones.

This is quite a bit different design pattern than what we are traditionally used to: placing often-used elements at the bottom of our designs. As touch-screens rapidly appear on our phones, and will eventually make their way to our laptops and desktops, we will see different design paradigms that shift the focus of icons, elements, input fields, and more to the bottom of our screens, rather than the top.

July 29th, 2009 in Web Design | Comments (0)
Blog Seperator
May 20th, 2009

Facebook Connect, Part I (Or, How You Got on Grandma’s Bad Side)

Look around the web and you’ll usually notice three things:

  1. A good site will have good user management.
  2. There are a lot of poorly designed sites out there.
  3. Someone is blabbing about it on Facebook.

We’re here to help you with all three. You already know we can design great sites – but did you know we can make user management for your site a breeze too? If you’re a developer, you know that implementing user management can be a pain. Even something as simple as creating an account for a user to login and store basic credentials can eat a few hours out of your precious budget.

For example, to create a user, you not only will have to figure out if the username or email address is taken, you will have to figure out if the password meets certain requirements on length or complexity. You also have to wonder if the “user” really is some automated robot that’s about to create 1,000 accounts and send an infinite amount of Xanax discount coupons or personal enhancement ads to your friends and family — all from a fake user account with your nice upstanding company name tacked onto the end — which could create some tense moments between you and Grandma at the big summer BBQ. (Grandma just got her first email account, and thanks to you, her first piece of inappropriate spam).

So, you’ve figured out ways around that with some nice validation checks and maybe a free captcha generator that prints out those nice squiggly letters that surely no robot could ever figure out, right? But, once Grandma finally gets her account set up, you’re going to have to worry about her forgetting her password — or wanting to change her email address or username, and then you’ve got a whole other set of problems to worry about.

What about social networking? Won’t you want your Grandma and her knitting group to help you build the popularity of your site by forging friendships with other users on your site, and talking up all the great points and usefulness you’ve provided them? As a developer, you might typically need to set aside a good week of hardcore programming to turn out some sort of respectable social networking, and by that point, you’ve spent one week of your two week budget just on user management and social networking.

This was life before Facebook Connect.  If you haven’t heard, Facebook Connect lets you allow users to login to your site using their Facebook username and password:

What that means to you is that you’ve now got a bonafide login system, password retrieval system, and one of the best social networking engines available — all with about 5 minutes of your time and just a few lines of code. Users can now interact with your site just as they normally would, except they have the built-in convenience of not having to create a new account just to be on yet another site.

Facebook’s Developer pages make it really easy to get started. I could explain it all here, but I won’t waste your time when their instructions are every bit as good as mine. Just follow the short, simple steps and you’ll be well on your way. If you want to see it in action before you integrate it into your site, checkout this nice little demo that Facebook provides: http://www.somethingtoputhere.com/therunaround/

May 20th, 2009 in Web Design, Web Development | Comments (1)
Blog Seperator
May 4th, 2009

Using Web Design To Establish Credibility With Customers And The Search Engines

Some of the dingiest diners and dives serve the best food on the planet. We’ve got a few places in our neck of the woods that fit the bill - nondescript or even crumbling on the outside but a mind-blowing culinary experience within.

That brick-and-mortar atmosphere can work for some small businesses. But it’s a recipe for disaster online.

The appearance, functionality and overall feel of your website is so crucial to success. Visitors form an instant impression about your business or your brand upon arriving to your home or landing page. Unfair or not, that impression will color their opinion of your credibility and your ability to deliver quality products or services.

You might make the best widget on the planet, but it’s tough to inspire potential consumers to action if they can’t get past your circa-1997 Web site. There are a host of simple templates companies can rely on to spruce up their aesthetics, but those do present some limitations.

While looks are everything, there’s a bit more to consider when thinking about your online presence and web design - boosting your standing in the search engines. On this note, we cede the floor to search optimization guru Aaron Wall, who has addressed the importance of quality design multiple times on this blog (SEObook):

“As spam continues to spread across the web, investing in a unique design helps set your site apart from most other sites. The difference between “spam” and what is worthy of subscribing to is often not much more than good content formatting, clear writing, and a strong site design.

Making a site accessible, usable, and professional looking might cost you $10,000 or more by the time you are done with it. If you are low on funds, it might make more sense to spend that money on brand building and marketing, but if you want designers and high authority webmasters to read your site and link at your site it is much easier if your site looks professional.

Off the start I did not believe that coding errors or design mattered that much, but if you want web designers and developers to link to you, then your site has to pass the sniff test. That consideration is much more important if you write a tech blog than if you run a fairly static e-commerce site.”

We can’t stress it enough - credibility is key. Not just for your potential customers, but for independent experts, technicians, bloggers and others who can vouch for your reputation, point prospective clients your way and generally help serve as reference points to your site.

We at lifeBLUE have built our reputation on crafting intelligent, beautiful and intuitive web design. Our team of expert programmers, designers and content creators understands the vital importance of functional, awe-inspiring design. You can check out some our handiwork in our portfolio.

May 4th, 2009 in Web Design, Web Business Basics 101 | Comments (1)
Blog Seperator
April 23rd, 2009

Not Just Your “Typical” Masking Effect…

Usually I stick with web development when it’s my turn to blog, but for this week, I’m gonna step out of my usual role and touch on some web design for a change. First and foremost, Photoshop is probably one of the coolest pieces of software out there; you can basically accomplish anything and everything in it. For web designers, graphics designers and just plain ole “designers” in general, Photoshop is life. With all the capabilities it has and endless amounts of graphical possibilities, there’s no possible way to ever really know everything it has to offer. So it basically comes down to trial and error, stumbling upon a cool tool and trying to figure out how to use it, or simply finding a tutorial online and testing it out for yourself.

All that being said, when thinking of a cool tip or trick to blog about, I asked myself what I personally use a lot when designing, and one of the first things that came to mind were masks. Whether it be to create a fade, an outlined shape, deleting without actually “deleting”, or just revealing only certain amounts of an image, masks are used in most (if not all) things graphical. So let’s think “outside the box” and take it a step further to something not as commonly done. When you think masks you think basic shapes, gradient fades, and possibly using them to erase portions around an object you are trying to cut out of its original image. But what about text? You can do really cool text effects as well by simply using a mask. Whether used in a banner to show a skyline, or taking a picture of a person and masking it with their name to use on a personal blog, using text as a mask can turn out really cool. And it is super easy…

1. Open up Photoshop and start with your blank canvas. (For mine, I used a 500px wide canvas with a black background.)

2. Select the text tool and write your text on a new layer. When selecting a font, take into consideration the amount of room the font is giving you to reveal the image behind it. Thicker fonts will allow you to show more, while scripty or thin fonts will not allow as much. You could also use “bold” to show more as well.

3. Bring in your image (drag and drop) that you want to use, and place it on the layer above your text. You can resize and move around once we’ve applied the mask so don’t worry about placement and adjustments at the moment.

4. To apply the mask to the image, within the layer window, hold down ALT and click the line between the two layers. When you press ALT and rollover the area between the two layers, you will see your mouse turn into an icon of an arrow and two circles. That icon is your indication you can click to create the mask.

5. This takes the bottom layer and masks the top layer behind it, spelling out your word with the image. Now that your mask is created, you can then adjust the image how you want, click the image layer and move around, resize, adjust as needed. The text layer does not move, allowing you to get your masked image in the right position.

6. To make your text effect more readable, play around with your blending options on your text layer. To do so, right click layer and go to blending options. Add a stroke, shadow, glow, whatever you think gives it that “cool” factor.

End Result:

Name Example:

April 23rd, 2009 in Web Design | Comments (2)
Blog Seperator
March 30th, 2009

Free Icons and Fonts to Get You Past Your Creative Block

Web designers, like those in any other creative professions, occasionally hit walls when it comes to being creative or coming up with new and interesting ideas. The Internet is like the school bully that cares–it’s there to slap you around, steal your lunch money, and give you a Super Atomic Wedgie, but at the same time it’s willing to lend you a helping hand when you’re down or need inspiration.

Consider me your caring bully. I’m here to show you several good sites that will inspire you the next time you find yourself stuffed in a locker or hanging from the flagpole by your undies:

Smashing Magazine Fonts
Smashing Magazine has great collections of freebies–their free font round-up should be more than enough to spark your creative fire.
http://www.smashingmagazine.com/category/fonts/

Fam Fam Fam Icons
Over 1000 free pixel-perfect icons for use in your web sites and applications. These little icons are great for adding subtle touches to menus or actions–and all come on transparent PNG backgrounds that allow you to easily integrate them into your site.

IconsPedia
Where Fam Fam Fam lacks in size (most of their icons are 16 x 16), the icons at IconsPedia make up for it with 256 x 256 glossy-ness.  These icons are high-quality, and most all of them come in sizes from 32px by 32px all the way up to 256 x 256. As a bonus, IconsPedia has a great search feature that lets you search for keywords or themes relating to icons.

Woork: The All-In-One Solution
As my final act of bully-kindness, I’ll introduce you to Antonio and his blog, Woork. Woork has great tutorials and resources for both designers and programmers–and most of the stuff he has is free and very well documented on how to use it in your own projects.

Got your own web-design-writer’s-block cures? Leave us your best resources in the comments below!

March 30th, 2009 in Web Design, Fun | Comments (2)
Blog Seperator
October 22nd, 2007

What is Web 2.0?

I am on a quest to discover exactly what is Web 2.0?  Many people say they want it, some think they need it, and others just like to say it.  If you ask me it is just a trendy buzzword related to the similar tags we apply to each generation.  But let’s take the web 2.0 question to, you guessed it, the web itself to find out what others are saying about this mind boggling term.

Below you will find some of the more or less interesting definitions of Web 2.0:

Refers to a supposed second-generation of Internet-based services - such as social networking sites, wikis, communication tools, and folksonomies - that let people collaborate and share information online in ways previously unavailable.

A term introduced in 2004 to characterize design patterns in a constellation of new generation Web applications which may provide an infrastructure for more dynamic user participation, social interaction and collaboration.

Globalization (”making global information available to local social contexts and giving people the flexibility to find, organize, share and create information in a locally meaningful fashion that is globally accessible”)

An attitude not a technology.

And then I found some 5 page article explaining all the specific details of what “Web  2.0” means and decided two things.

  1. I guarantee 99.9% of the people that use this term don’t know its origins, including myself.  Don’t worry as I don’t intend to bore anyone to sleep with this Nobel Prize worthy definition.
  2. Hence, I believe that a word’s true meaning is how it is used in everyday conversation.  So basically what the 99.9% think it means. 

So I say live and let live, man.  In the words of the great Paula Abdul, “it is what it is.”

Web 2.0 for the majority of us means:

  1. Large Glossy Buttons
  2. User Oriented Formatting
  3. Enhanced Text
  4. Quality Data Output
  5. And so on, and so on, and so….on…
October 22nd, 2007 in Web Design | Comments (0)
Blog Seperator
October 11th, 2007

I Love My Website…Does Anybody Else?

So you love your website, eh? Well why don’t you marry it? Ha, ha, ha…High Five. My sincere apologies for that one as I briefly escape back to 1st Grade. Okay, I am back now, but the real question is, does your user base love/like/enjoy your website. At lifeBLUE, we like to have our customers involved with the design process for several reasons.

  1. Most of our clients have established businesses and know their customer base better then we ever could.
  2. Our client is our customer and (say it with me)…”the customer is always right.” Well some of the time but that is the purpose of this post.
  3. Our clients come to us with a need and we want to work with our clients to understand their need(s) as much as possible.

So what is the problem? Everybody is happy, right? Not necessarily, as sometimes when you are involved with creating a website, goals and end states can become lost in the fun of going through the process. While you may think some flashy graphic or wild background is appealing, your customers might not. What most users want is to get to the purpose of your website quickly, painlessly, and with a little glitz and glamour along the way. Not to mention, you also want them to come back. Whenever a design is created, one could have a 100 people analyze it, and while most would say they like it, each and everyone would probably try to change some aspect of the site to their specific tastes. PHP and HTML have not quite reached ESP capabilities yet, so I don’t think your website is automatically going to conform to each individual’s tastes every time they view your home page.

In the end you should work with your developer and listen to their feedback about what is good usability standards for design and functionality, and what is going to make your users tuck tail and run. If you have chosen the right company, then you should be able to trust their feedback. Create a site that appeals to the masses or your customer base, not just what mood or creative flare you are feeling for the day. We create custom designs for targeted solutions and in the end, if you want to put that giant gorilla sale balloon on your website, we just might have to attach a disclaimer.

October 11th, 2007 in Web Design | Comments (0)
Blog Seperator
October 9th, 2007

How To Establish Your Online Presence

 

For businesses in the greater Dallas area, and other larger metropolitan areas, getting lost in the sea of obscurity underneath the ever-growing plethora of competing businesses is becoming as easy as racking up toll charges on your way to work. Setting yourself apart is an essential component of any business. In today’s technology age, you can become just as obscure (if not more) with your Internet presence as you can your physical presence. Here are a few tips to increase your visibility online, sales in all areas, and become a trend setter in your industry rather than a bench warmer riding the endless pine.

1. Put your business out there. Word of mouth is always a great way to promote your business. However, society is not as dependent upon this ancient information passing method as it used to be. People today look online to determine which restaurants to eat at, which stores to shop at, and which products they want to buy. If they cannot find you online, then the odds are good they will not find you offline either. Building an informative, targeted, and brand-developed website is no longer a step-up, it is a must have.

2. Don’t just build a website, build the right website. Too many businesses just think that any website should suffice as presenting themselves online. This is just not the case as your website is your one-stop shot for making an impression, and that impression does not last long. The average site is viewed for less than 10 seconds. If you don’t make a graphically appealing statement in that amount of time then you lose numerous potential customers before you even got a chance to present yourself. You know your business is better than others out there, so make sure you give your establishment a better shot by providing something that people are going to look at and more importantly, want to look at. Choose a quality web design company to help your business make the right impression.

3. Market your online presence. Just as you would send out fliers, mailers, print ads, and more for your brick and mortar location, you would also do the same for your online location as well. Simply building a website is not enough to get the masses to come flooding through your doors. You must market your website with just as much vigor as you would your regular business. The world of search marketing is constantly evolving and you should do yourself the favor of researching search engine marketing services to help promote your online brand.

One could not say enough how important it is to put a quality online establishment on the web for thousands of potential customers to view. Your website works for your business even while you are not. To the savvy entrepreneur, that is an investment worth making. A quality online presence can level the playing field for your small business, or even large businesses, against other competitors. Where do you stand?

October 9th, 2007 in Web Design | Comments (0)