Enlarge Images With Lightbox

// May 13th, 2009 // 1 Comment » // Tutorials, Web Design, Wordpress

In response to Chris’ post on making links to full size images I decided you all might be able to benefit from a tutorial on how to achieve a cool lightbox effect when viewing images.

The Idea:

Imagine utilizing Wordpress to create an entire portfolio. With the help of a plugin for wordpress called Lightbox 2 presenting your work in a cool way is very easy to achieve. Effortless way to post new work, and maintain a blog at the same time. All powered by a standards compliant platform that we are all becoming familiar with.

The Process:

The first step is to organize your assets. That means prepare a set of smaller thumbnail images you wish to include in a portfolio page as well as full size renditions of that same project. Save, and hold onto them to upload to your post.

Next, download the Lightbox 2 plugin for Wordpress.

Install the plugin by clicking Add New in the plugins tab located on the left hand side of your Dashboad.

Here you will browse for the .zip file that you downloaded from the plugin homepage. After the file has been uploaded click Install Now.

After that, the newly installed plugin has to be activated in order for it to work. To activate the Lightbox 2 plugin click on Installed in the same Plugin tab in the previous step. Now it’s active and ready to be configured.

Under the settings tab you will find Lightbox. Click there to configure some custom settings to meet your needs.

Custom Options:

• Change background color
• Choose overlay opacity
• Set resize speed
• Declare which sections you want to use Lightbox
• Set Lightbox to automatically enable on all images

Explore the power of Wordress and plugins, they can really make your blog/site stand out. If you have any questions leave them in the comments. I’m happy to help.

Studio Showcase – Clear Left

// May 13th, 2009 // 1 Comment » // Studio Showcase, Web Design

I have always had high envy for this web consulting studio specializing in user experience. Clear Left has a very clear message of how they can help you with your website needs. A minimalistic approach to design and a unique use of larger than normal text makes it a stand out site when comparing to other studios. They represent their company very well and take pride in themselves boasting a cool Who We Are page showcasing every member of their team. I think the way direct prospective customers in the right direction at the bottom of their page by encouraging them to download the client ideas sheet.

Also, a very simple, but effectively placed section right next to the ideas sheet download displaying contact information about the company was a very good usability choice. Brilliant!

Graphic Design: The Forgotten Web Standard

// May 12th, 2009 // 1 Comment » // Graphic Design, Inspiration, Web Design

I have always been drawn (pun intended) to cool illustrations sketched out in class when notes should have been taken, colorful abstract splatters of paint on a canvas and rule breaking typography. I never really got into all the “art” classes that were offered in school though and chose mostly athletics as a pass time. When my interests in design finally picked up I decided to give photography and web design a shot. I must have had some subconscious plans for my future when I enrolled in a few basic web and photo classes when I was about 15. These slide designs caught my eye in a 3 minute highlight video of them being created. It doesn’t stop there though, make sure to watch the presentation by Mike Kus that the slides were used for. It is another great example of how to bring graphic design and web design together.

Graphic Design: The Forgotten Web Standard – Slides in 3 Minutes from Carsonified on Vimeo.

Web vs. Print – Why They Should Be Similar

// May 7th, 2009 // No Comments » // Graphic Design, Web Design

As I promised this will be a short, but very informative little post highlighting Mike Precious’ Blog. It is a perfect example of a creative and very talented designer talking about information that is going to be interesting to the design community.

I wanted to share a video from Mike’s last post about Web vs. Print and Why They Should Be Simlar.

SVA Dot Dot Dot Lectures: Jason Santa Maria from MFA Interaction Design on Vimeo.

The custom design of the blog has kept it looking like it is still a part of his portfolio site and has a great navigational approach with clear hierarchy. With a little time and experience we too can be designing and blogging with the best. I think I will talk a little about Jason Santa Maria and the impact he has had on design real soon. Stay tuned!

Studio Showcase – Mike Precious

// May 7th, 2009 // No Comments » // Graphic Design, Inspiration, Studio Showcase, Web Design

The design Studio of Mike Precious is next on my list of creative web design portfolios and companies. Mike is another one of those utility players when it comes to his skills and experience. He displays three main categories in his portfolio: Web, Print, and Concept. All of which have a number of well designed and developed pieces of work. Main focal points are at the top of the site where there seems to be light shining onto the page. Favorite feature is the Portfolio page with the fixed sidebar element. It lets you navigate to another section of his portfolio or check out a different piece of work when ever you wish. Thought he had an effective contact page as well. He has included two different contact forms, one for getting a quote and another for just getting in touch. Giving options to the customer can help streamline the beginning of a project by getting right down to business with a quote. Another post coming very soon with some emphasis on Mikes blog.

Studio Showcase – Andrew Bradshaw

// May 6th, 2009 // No Comments » // Branding, Graphic Design, Studio Showcase, Web Design

Showcase today is not of a web design company but instead, a guy by the name of Andrew Bradshaw. His services include web design, print design, and branding. I liked his site because it has a very clean, and inviting look and feel. Again, another genuine guy who knows about being creative. I think those are the portfolios I am most drawn to. It is not the most fancy or complex portfolio, but easy to navigate and gets the point across. I like how he displays each of his portfolio pages, giving each project or piece of work a captivating thumbnail image that expands to a larger view, as well as a description of what the project was about. The subtle, but effective arrow next to each of the pieces allowing the user to move back to the top of the page is a nice feature as well. So, here is to AB, a talented web designer and active participant in the design community. I personally follow his updates on Twitter.

Studio Showcase – FortySeven Media

// May 4th, 2009 // 2 Comments » // Studio Showcase, Web Design

FortySeven Media is a great all around design company offering their services in web design, graphic design, and media creation. Overall, the use of subtle grunge throughout the site feels wholesome and lets the audience feel comfortable about making their way around the site to learn more about the company. It wasn’t obvious at first, but I think the most effective element on the page is the faint gradient just below the main navigation. For me, it adds depth to the page without being too distracting.

Typography and hierarchy on the page was definitely priority for these guys when designing their site, and it paid off and is working very well. The don’t hire us link in the navigation is confusing until you are reassured the quality of their service is good once seeing the sign on the right reading: “don’t hire us if you want average”. It’s kind of a clever way to lighten the potentialy stressful mood that comes with hiring the right web designer for your project.

Some final little things that make this site stand out for me is their logo, the use of icons, and their portfolio. Notice the star icons next to the titles and important sections on the page. And in the footer the same idea as well as the finger pointing to the contact us. All good visual cues to direct your attention where they want you to look.

Aside from their portfolio having some excellently well designed websites I like they way they have categorized their services, displayed their work, and described what each of their projects are all about. Until next time…

Studio Showcase – Paramore Redd

// May 3rd, 2009 // No Comments » // Studio Showcase, Web Design

Today’s studio I would like to feature is Paramore Redd for its attention to detail, impressive portfolio, and five stars for their use of icons on the services page. Bonus points for their unique use of jQuery on the homepage. It is a cool way to feature a piece of work while still being able to browse other projects right from the homepage. What makes the Services page so rad? The icons were chosen carefully to reflect and help identify what types of services they offer. I think they used them as a great way to support content in their design. (Article from Smashing Magazine)

Quality In Web Design

// May 3rd, 2009 // No Comments » // Inspiration, Web Design

In order to be a good designer for the web you have to be able to recognize other good designs when you see them.  After reading a post from the Function Blog on Quality Within Web Design I got the idea to look for web design studio websites that met the criteria. To make things interesting I desided to make it a challenge to find one good site every day and feature it in a showcase of my favorite websites. Keeping myself surround with good sites when I’m on the internet help inspire me and keep my design eye sharp and current.

Studio Showcase – Deluge Studios

// May 2nd, 2009 // No Comments » // Studio Showcase, Web Design

The first web design studio I am going to feature in this daily showcase is Deluge Studios. I look to company and individual web designers sites for inspiration both in the design of the site itself as well as sites in their portfolio. Each day I will select a site from my library of bookmarks on delicious and discuss what I like about the site.

Deluge Studios is a one page number with a sliding jQuery navigation to make your way around the page. The design has a very structured feel with clean, sharp edges and dotted lines outlining the different sections. I think the use of color on the page is great with the vibrant green catching your attention and serving as a consistent branding element throughout. The way they display their different types of work is my favorite feature. I hope to do something similar when separating my photography from my web design work. Overall, I chose Deluge Studios because I thought the content on the site was usefull and relevant for their customers. I can’t get enough of their user interface either… I’m kind of a sucker for jQuery.