GoMediaZine » Web Design http://www.gomediazine.com Design insights & tutorials. Wed, 16 Apr 2014 12:46:28 +0000 en-US hourly 1 Go Media owners Jeff Finley and Bill Beachy host the show and discuss the business of design and how to improve the quality of your work and life. Go Media no Go Media jeff@gomedia.us jeff@gomedia.us (Go Media) Go Media Real-world advice from working artists and designers. graphic design, artist, business, inspiration, go media, tutorials, advice, illustration, photoshop, illustrator, art GoMediaZine » Web Design http://www.gomediazine.com/wp-content/images/powerpress/gomedia-podcast-300x300.png http://www.gomediazine.com/category/tutorials/web-design/ Cleveland, Ohio Monthly Happy Dog Illustration and Design Tutorial http://www.gomediazine.com/tutorials/happy-dog-illustration-and-design/?utm_source=rss&utm_medium=rss&utm_campaign=happy-dog-illustration-and-design http://www.gomediazine.com/tutorials/happy-dog-illustration-and-design/#comments Wed, 25 Sep 2013 13:00:29 +0000 Lucy Williams http://www.gomediazine.com/?p=28457 Today's tutorial comes from Weapons of Mass Creation 2013 designer and fellow Clevelander Lucy Williams. Lucy is a freelance illustrator and a recent graduate of the Cleveland Institute of Art. Follow her process as she designs a poster for local Cleveland favorite hangout, Happy Dog. Continue Reading »

The post Happy Dog Illustration and Design Tutorial appeared first on GoMediaZine.

]]>
A Local Cleveland Business Promotional Poster Design

Today’s tutorial comes from Weapons of Mass Creation 2013 designer and fellow Clevelander Lucy Williams. Lucy is a freelance illustrator and a recent graduate of the Cleveland Institute of Art. Follow her process as she designs a poster for local Cleveland favorite hangout, Happy Dog.

Tools and Technologies You’ll Need

Micron Pens
Clearprint Vellum Paper
Exacto Blade
Electric Eraser
Adobe Photoshop 5.5
Adobe InDesign 5.5
Scanner

Clear Your Mind and Your Workspace

I always start a new project with a clean workspace.  It may not seem like an important step to mention, but I like to not only clear my head but also the space I work in.  This allows me to breathe freely and get my creative juices flowing without outside clutter taking over my work area.

HAPPYDOG_PROCESS (1)

Reference and Inspiration

If you have good reference it usually means you’ll have a pretty good final product.  I always try to do as much research as I can before I start on a project.  This means gathering photos, information, and in this case actually visiting Happy Dog to take my own pictures.

HAPPYDOG_PROCESS (2)

Sketches, Ideas and Ideations

These are my original scanned images that were done on vellum paper with a fine tipped micron pen (my favorite materials to use). A lot of times I sketch out rough drawings that I don’t even end up using. Like the dog image here, I didn’t even end up using. I decided he was too literal and the image didn’t need him.

HAPPYDOG_PROCESS (3)

Draw and Scan

I wanted to have this poster pretty cluttered because the Happy Dog is full of cool old stuff, music, all walks of life, music, art and fun! After scanning my original images, I then separated each image and individually cleaned them up in Photoshop, saving each image out as a PNG file with no background.

HAPPYDOG_PROCESS (4)

Choosing the Right File Format

After scanning, cleaning up, and perfecting each individual image, I save them each as PNG files. I choose a PNG format because they have no background and can be easily positioned in InDesign without trouble.

HAPPYDOG_PROCESS (5)

Images saved as PNGs

Organization and Composition

When I got into InDesign I placed each image into my workspace and organized them. (Most designers might use Photoshop for this step – but I like InDesign better.) Keeping images separated allowed me to make adjustments as needed. When I was finished organizing – I saved the image out as a JPG and moved them into Photoshop.

HAPPYDOG_PROCESS (6)

Images 1/ Exported, 2/ Saved as JPEGs

This is what the no color version looked like in Photoshop:

HAPPYDOG_PROCESS (7)

Textures and Background

I am a huge fan of textured backgrounds. Mainly because I like making my work appear as if it could have been done completely tactile.  You can scan textures into Photoshop or create textured brushes.  I found this one on the Internet; it’s concrete.  I flattened the image and did a little editing to soften it up. I then placed it behind my image to create a nice textured gritty look to my poster.

HAPPYDOG_PROCESS (8)

Texture on Layer 0

Color and Corrections

Coloring this poster was really fun! I knew I wanted a nice mixture between bright and subdued colors, so I went for bright pink and dull blue.  In order to get the textured background on my colored image, I flattened the background and began to fill in the places I thought needed colored. In order to get different shades of pink, I brought the opacity down on my color swatches and used different tolerance levels to get the gritty look I wanted. Playing with different levels is also a good way to bring up the saturation of your colors.  I also used the levels tool (command L) as a final step to get my colors just where I wanted them.

HAPPYDOG_PROCESS (9)

Playing with color

Color Tests:

HAPPYDOG_PROCESS (10)

Here is the final result!

HAPPYDOG_PROCESS (11)

Printed Digital Artwork!

HAPPYDOG_PROCESS (13)

HAPPYDOG_PROCESS (14)

 Learn more about Lucy!

Lucy Williams | Lucy Williams Tumblr
| Lucy’s Happy Dog Project on Behance

Subscribe to the GoMediaZine newsletter


facebooktwitterinstagramiconpinterestbehance

follow us in feedly

The post Happy Dog Illustration and Design Tutorial appeared first on GoMediaZine.

]]>
http://www.gomediazine.com/tutorials/happy-dog-illustration-and-design/feed/ 2
Quick Tips on Using Google Chrome’s Developer Tools http://www.gomediazine.com/tutorials/quick-tips-google-chrome-developer-tools/?utm_source=rss&utm_medium=rss&utm_campaign=quick-tips-google-chrome-developer-tools http://www.gomediazine.com/tutorials/quick-tips-google-chrome-developer-tools/#comments Mon, 04 Feb 2013 14:00:24 +0000 Dave http://www.gomediazine.com/?p=23469 Here are some quick tips on using Google Chrome's fantastic Developer Tools. Let's get right to it. Bring up Developer Tools with Control + Shift + i (i for inspect), or just right click (almost) anything on a page and choose Inspect element. Continue Reading »

The post Quick Tips on Using Google Chrome’s Developer Tools appeared first on GoMediaZine.

]]>
Here are some quick tips on using Google Chrome’s fantastic Developer Tools. Let’s get right to it. Bring up Developer Tools with Control + Shift + i (i for inspect), or just right click (almost) anything on a page and choose Inspect element.

A Better Way to Clear the Cache

Sometimes Chrome seems to tenaciously hold onto cached files. The old way of clearing the cache and reloading was to do a Control + Shift + Delete to bring up the Clear Browsing Data window, check off the appropriate items to be cleared, hit the clear button, and finally refresh the page. This process is a bit clunky.

Instead, simply click and hold the refresh button. As long as you have the Developer Tools panel open for the page you’re refreshing, you’ll see a little dropdown menu that allows you to clear the cache and do a hard reload all at once. This is very handy!

Empty cache and hard reload.

Make sure you have Developer Tools open, then click and hold reload.

Docking and Undocking the Developer Tools panel

By default, Developer Tools will be docked to the bottom of the window.

Default docking location at the bottom of the window

Default docking location at the bottom of the window

You can dock it to the right side of the window by clicking the docking icon, located in the lower left hand corner of Developer Tools.

Dock to main window (side)

Dock Developer Tools to the side of the window.

Developer Tools docked to the side of the window.

Developer Tools docked to the side of the window

Alternatively, you can undock Developer Tools, giving it its own window entirely. Just click and hold the docking button, then choose the Undock icon. (The docking button will cleverly let you toggle between your last 2 docking preferences with a single-click, and will require the press and hold technique to access the third choice). I prefer the undocked option when I need to do a lot of window re-sizing. For instance, when working on responsive designs.

Dock to separate window.

Dock to separate window

Undock Developer Tools

Developer Tools undocked

Dropdown Menu Tip

OK, time to kick it up a notch. Manipulating CSS using the Elements > Styles panels is a great way to preview CSS changes.

CSS Elements > Styles panel

Use the Styles panel to test out CSS changes. How did we live without tools like this?

Sometimes it can be a pain to modify the CSS for elements nested within dropdown menus or other UI elements that require hovering. Sure, you can right click an item and choose Inspect element, and the element will be selected within Elements panel. That part is pretty straight-forward. However, once you move your cursor off of the element that you’re inspecting, the dropdown menu (for example) will collapse. At this point, you could manually start working your way up the HTML tags within the Elements panel and use the Toggle Element State icon to apply the hover state to your menu item’s parent, but this is tedious.

Here’s a better approach:

  1. Hover over the item that you want to inspect, and choose Inspect element. This will highlight the targeted element within the Elementspanel.
  2. Now for the real magic. Hover over the item again. This time, right click it. Don’t choose anything on the context menu that appears. Instead, move your mouse over to the Developer Tools window/panel. Now the dropdown menu will remain opened and the targeted element will be selected within the Elementspanel. It’s now much easier to change the styles of the targeted item as well as its siblings while keeping them all in view.

    Right Click > Inspect Element > Right click desired item, then move mouse over to Developer Tools without selecting anything in the context menu.

    Right Click > Inspect Element > Right click desired item, then move mouse over to Developer Tools without selecting anything in the context menu.

Console Quick Tips

1.) When you’re on the any of the panels within Developer Tools, you can use the Esc key to quickly toggle the JavaScript console.

2.) With the console focused, you can clear its contents with Control + L. This is handy when you have youtube or vimeo videos embedded on a page via iframes, as they tend to add noise to the console.

3). The console is handy for seeing any errors that a script may be generating, but there’s way more to it than that. For example, it can also be used to run JavaScript snippets.

Example: Show an alert box.

alert('This is neat!');
Use the console to run JS commands

Use the console to run JS commands

If the page is using a JavaScript library such as jQuery, you can use that in the console as well. Give it a shot!

Example: Using jQuery, change the color of all links to MidnightBlue.

jQuery('a').css('color', 'midnightblue');
Links before running jQuery snippet

Links before running our jQuery snippet

Links after running our jQuery snippet

Links after running our jQuery snippet

Move Elements Within the Page

You can easily move elements around on the page by clicking and dragging them within the Elements panel. This can be handy when experimenting with the order of elements within lists and menus or for moving entire sections of a page around.

The news item is currently second from the bottom. Let's move it up.

The news item is currently second from the bottom. Let’s move it up.

Clicking and dragging the News li upwards...

Clicking and dragging the News li upwards…

News in its new location.

News in its new location

Wrapping up

I hope you were able to find something useful here. For a more general overview of Developer Tools, take a look at the official documentation. Feel free to share any quick tips of your own in the comments. Cheers, and thanks for reading!

The post Quick Tips on Using Google Chrome’s Developer Tools appeared first on GoMediaZine.

]]>
http://www.gomediazine.com/tutorials/quick-tips-google-chrome-developer-tools/feed/ 8
How to design the best website user experience http://www.gomediazine.com/tutorials/how-to-design-the-best-website-user-experience/?utm_source=rss&utm_medium=rss&utm_campaign=how-to-design-the-best-website-user-experience http://www.gomediazine.com/tutorials/how-to-design-the-best-website-user-experience/#comments Wed, 28 Mar 2012 14:00:41 +0000 Wilson Revehl http://www.gomediazine.com/?p=17736 Greetings & Salutations My name is Wilson Revehl, Co-founder, CTO, and Vice-President of Go Media. When William Beachy and I founded the firm in 2003, merging our respective freelance businesses, I would not have imagined we’d become a publisher. And lord knows I haven’t done much to advance that cause. Jeff Finley, our first principle… Continue Reading »

The post How to design the best website user experience appeared first on GoMediaZine.

]]>

Greetings & Salutations

My name is Wilson Revehl, Co-founder, CTO, and Vice-President of Go Media. When William Beachy and I founded the firm in 2003, merging our respective freelance businesses, I would not have imagined we’d become a publisher. And lord knows I haven’t done much to advance that cause. Jeff Finley, our first principle partner, deserves most of the credit for advancing our readership. The last time I wrote a Zine article was in 2007, about Flash, which has since become irrelevant.

I built my first website in 1996 on Yahoo’s GeoCities wysiwyg. I’ve been immersed in the world of syntax, curly braces and for loops ever since. Today, I can read and write in all the major web programming languages, but still prefer PHP & Javascript. My skill-sets are perpetually in high demand. That’s great, except maybe I’ve been using it as an excuse to put article writing on the back burner. I’m hoping to change all of that. I want to contribute more knowledge to the design community moving forward.

With that said, this piece isn’t my prodigal son homecoming to the Zine. I didn’t carefully consider the topic in any painstaking manner. It simply came up during a recent project when I wanted to point out some things about homepages to the design team. A Google search on this topic produced less-than-satisfactory results. I was scheduled to produce something for the Zine anyway, so there ya have it – practically wrote itself! Usability for the modern web seems like common sense. On the other hand, I could write a brick of a book on the topic. Now that most of what we designers do faces the internet in some fashion and many of our readers haven’t been designing for the web as long as this old dog, it’s only fair we start with the basics.

Usability fundamentals of modern website design

Months after we launched a brand-new site design for our client, they returned. They wanted a new homepage. They were a market-savvy bunch who had tracked visitor click-through and retention. The idea was to alter the layout to rev up visitor engagement. I wholeheartedly endorsed the endeavor.

An organization who has the means and is willing to test differing user experiences will find that it offers constructive insight into their marketplace. However, most small businesses don’t have the budget to refresh their website design or layout whenever they want. That is why it’s crucial to design a thoughtful website user experience the first time.

Here, we’ll cover some usability basics for modern websites. The goal is to show you pragmatic dos & don’ts to ensure you’re taking advantage of best practices and conventions.

The Navigation System

No, we’re not talking about your GPS. But you might glean some perspective from the consumer products all around you. Long before the internet (or GPS) was mainstream, industrial designers had been honing and advancing user interfaces for manual operation. Whether it was the car stereo or the VCR, they recognized that comprehensive controls were pivotal in making their products viable. Things are starting to come full circle (who knew?!) with the advent of touchscreen and the desire to develop & design responsive websites for displays of various device types. The new norm will soon be conforming your site for display on car stereos! Until then, let’s focus on what you need to consider today to create a compelling website navigation system.

Use conventional placement

Why? Humans are creatures of habit. There is a reason you see top-of-the-screen navigation on the majority of websites. It is functional because people read from the top down. It is effective because it communicates a lot across a wide piece of real estate without hogging it up. Logically, you can’t go wrong with a menu at the screen’s top because people are looking for it up there by default.

No design works unless it embodies ideas that are held common by the people for whom the object is intended.

- Adrian Forty

Top Navigation

The National Public Radio site does a superb job in demonstrating the top placement of the main menu in a clean, high contrast enclosure with cozy margins to add weight.

Starbucks pulls off a tasty top menu without the high contrast enclosure like that of npr. The lack of contrast has no negative impact on the usability but rather draws you into the slideshow below.

Conservation International, one of the largest environmental NGOs, has a great example of two-tier (dropdown) navigation. This is the ideal way to expand the reach of a top menu while keeping the interaction requirements down. Sites abundant in content can get visitors to their destination faster without much eye movement.

Skype’s top menu and subsequent overlay is oh so simple. And yet, they’re giving you direct access right out of the gate to their multifaceted offerings. Skype has usability fundamentals down to a science. You’ll see them mentioned again in this article.


Left Navigation

All written languages (on Earth anyway) are read from the top down. The majority are also read left to right. The second most conventional navigation is a vertically stacked column aligned to the left. I don’t speak or read any Asian languages, but I would imagine this approach is the same but aligned right.

The Marussia F1 Racing site does a great job driving traffic to their navigation system racing down the left of the screen. Too much?

Go Media went all-in with a fixed position left navigation on the 2010 site. Although our new one (in the works) might deviate from this, it is still a very accessible approach.

Panodora’s new UX is a cool example of using left navigation when it really counts. Something like a playlist would not have worked in a dropdown nav from the top. Their vertically scrollable list stays easy and unobtrusive no matter the length of items.

Newegg carries an absolutely massive inventory of electronics. They manage to gracefully route customers from left navigation onto a clever multi-column overlay that will get visitors quickly into the right category. This style of expanded navigation is quickly becoming a user friendly convention for complex taxonomies.


Footer Navigation

Use it! No really, really use it!

Why?

Because it is the piece of real estate everyone who makes it to the bottom of the page will see. Most sites do not affix primary navigation to make it available all the time. If you’re ready to explore another part of a site after reading down through it, the shortest distance to that next click could be a friendly, even robust, footer. Often, you can make what would otherwise be secondary or tertiary sections available here. A thoughtful footer strategy can be more potent than third-tier menus or sitemaps.

The White House has a straight forward 6 column footer with an additional base line of ancillary links.

Rackspace has continued to deliver distinct, comprehensive website user experiences for what is typically the very complicated industry of server colocation. The way they lasso their offerings into clever, succinct categories allows them to be listed neatly in the footer.

Commonalities of a good navigation system

You’ll notice a few characteristics emerge when you step back and evaluate the previous examples.

  1. Clear & concise menus – Reduce your navigation hierarchy into a small amount of choices or categories. Present sub-categories in a way that feels logical. If it doesn’t make the cut as an important section or sub-section, maybe it can find a home in the footer or fringe menu.
  2. Base your color contrast on priorities. The font or background decisions you make will impact where the viewer’s eye travels.
  3. Allow room to breathe. Line-heights, padded enclosures and the margins between different elements help make navigation stand out as interactive.
  4. Establish styles that show state changes. These are effects like changing text or enclosure colors when a mouse hovers over or an active state to act as a visual reminder of what site section they’re in.

The Content

Focus – Keep it simple

My daughter is 5 months-old, and already, she possesses an intuition into user interfaces. I say this not because I’m merely a boastful father of a genius baby, but to illustrate that it can become instinctual at a very young age. Whether it is a bright, noisy button on one of her (too many) battery-powered toys or an interactive story on her granny’s Nook, she knows when she pushes a button, she gets a reaction.

Upright travelers of the information super highway are a tad more evolved than a baby, but anyone who has worked in our industry for more than a moment knows it ain’t by much. Kidding aside, the internet is a barrage of media & messages all vying for attention. If you’re going to command enough to capture that ever elusive click-through, you need to give your audience a reprieve from the clutter and go as far as making it an instinctual interaction.

Put what is important “above the fold”

In the newspaper industry, editors will place the most important, eye-grabbing content up high on the page – above the fold. This is an effort to grab eyeballs and lure in readers.

The same basic principal applies in website design. I don’t want to get into the more technical above the fold/below the fold subject in this article, but basically the most common display size (dimensions) of your audience on desktops and laptops is currently around 1440px wide by 900px high. This means you have 900px available in the view port before the vertical scrollbar kicks in. The bottom of the immediately visible area is your ‘fold’. Anything below the fold is out of sight, so the viewer will need to engage the scrollbar to see more. Try to keep your most important content and actionable items within that 1440×900 border to gain maximum exposure. If you’re not sure how to design for common browser dimensions, google ‘css grid systems‘ and you’ll find many tools to help you in the process.

That’s been one of my mantras – focus and simplicity. Simple can be harder than complex: You have to work hard to get your thinking clean to make it simple. But it’s worth it in the end because once you get there, you can move mountains.

-Steve Jobs

Apple is renowned the world over for the innovative industrial design of their products. If you’re reading this, you’ve probably had at least one customer who’s referred to the Apple website when describing a goal. Apple does an impeccable job of filtering things down to the most basic relevance and hiding as much technology as possible behind a spacious, contemporary facade. In the Steve Jobs biography, he’s said to have had an obsession for wanting Apple to ‘focus like a laser‘ on its goals and not get distracted with other markets. You’ll see below their website release of the new iPad, where Apple is visually swaying its visitors to focus like a laser on that one single product.

Adobe sells a wider variety of software products than any other enterprise vendor. This might not be a business subscribing to the aforementioned ‘focus like a laser’ (possibly the crux of what made Mr. Jobs dislike Adobe Flash) but Adobe does a solid job of condensing such a broad range of topics into a top navigation system and above-the-fold slideshow as their centerpiece.

Help your audience focus on your focal points

You may recall the search engine battle for supremacy of the last decade. Everyone knows who prevailed. If you think it was because one had a more advanced algorithm than the other, or it was brand disaffection, you’re fooling yourself. It was simply because it was just that damn simple. Over the years I watched countless layman internet users sign into their Yahoo or Hotmail email, keep one of the two news aggregators as their homepage and still jump right over to Google to do their searching. Was it because they preferred the results better? Nope. Google was such a nice break from the content clutter, it became the De facto search utility where people would go to clear their minds and just search.

Imagine if the information super highway were an actual highway. And all the homepages are billboards asking you to pull off now and explore them. Picture there are thousands of billboards on that one road in every direction everywhere you look all contending for your concentration. And let’s not assume everyone is stuck in rush hour. Traffic moves pretty well along on the internet.

How are you going to be seen in a sea of signage?

How are you going to get your point across succinctly enough to keep the attention of each visitor?

No one knows exactly how many websites there are. Some place it upward of 1 billion. And this number is increasing exponentially. This is terrific news for our industry but has side effects. For the topic at hand, we’re going to see more and more distracted, impatient users. Whether your website’s goal is to sell something or provide useful information, if you don’t give the visitor exactly what they’re looking for in the shortest amount of time possible, they’re leaving just as fast. Like I said before, make it instinctual. Don’t make them think.

I think design covers so much more than the aesthetic. Design is fundamentally more. Design is usability. It is Information Architecture. It is Accessibility. This is all design.

- Mark Boulton

The real estate sector leverages the internet quite well. As it should. It is a perfect fit with the complexities of info, rapid pace of resale and the very visual nature of displaying a listing. Zillow delivers right out of the gate with a homepage that places their two visitor priorities in a perfect triangular focus map. Top down. Left to right.

AVAAZ gives citizens a voice with the tremendous help of a well conceived homepage. Your eyes are drawn from their forceful logo into the slideshow and immediately across to the call-to-action.

Rhymesayers keeps things smooooov with a clear cut, high-contrast headline juxtaposed to a heavy slideshow. The mp3 player draws your eye because it is the only splash of color up top and calls you to action with large familiar controls.

Once again, Skype shows us they understand the archetype. This slideshow is clever in that the call-to-action (CTA) pulls you easily into the location you expect to see its content and then provides that next CTA only a short diagonal distance from the direction your eyes were already headed in. Well played Skype, well played.

Vimeo’s primary ‘Sign up’ CTA is very traditional but they throw a few more in the mix such as the massive ad banner and a reinforced ‘Join’ in the top navigation. We can assume the valuable real estate given to the ad space was to meet a business priority and that they’re reaching the objective of attracting clicks with such a large banner where it is.

This week’s award for ‘focusing like a laser’ goes to Dropbox. I had to illustrate a cause & effect image below so you can see just how concise their homepage is. They give you two options, watch a video and download. The video starts in place without compromising the ever present download button. Can’t get much more focused than this.

Another start-up you’ll see impeccable design focus from is SeatGeek. Ticketmaster must be groaning in their grave being yet-again reminded that there is still room for innovation in event ticket sales. When you can acquire seats faster online than in line at the box office, you’re looking at industry disruptive technology. And that technology here is usability.

Do we really need another online retailer of electronics? Decide thinks we do and shows us that despite market saturation, you can quickly differentiate yourself with a brilliant UX and high-tech interactivity. Look how they take you from search, to result, to a matching CTA with a graceful color palette & layout that accentuates what is most important.

Usability Best Of

This is far from a definitive list of impeccable homepages, there are entire websites & awards devoted to that. I rather wanted to showcase a handful of sites that demonstrate the best of website user experience based on the topics discussed in this article.

Design is a plan for arranging elements in such a way as best to accomplish a particular purpose.

-Charles Eames

As obnoxious as auto sales can sometimes be, Ford steers visitors clear of any usability bumps in the road. They start with an unobtrusive logo and ancillary menu that sits well atop a full screen background. The medium contrast top navigation is frictionless drawing you right into a brilliant photo composition that showcases three different car calls-to-action without a seam between them. They place an additional row of focal points just above the fold. There is a lot to interact with here without feeling like there is.

AudioVroom is an up and coming website to build your own personal radio stations. You’d think this has been done many times before but AudioVroom makes usability so effortless, they’re already working their way up the veritable charts.


The Obama Administration shows us that tasteful design doesn’t need to end at the edge of the private sector. The Whitehouse‘s site employs all the classic and modern usability best-practices.

We should expect nothing less than intelligence from the paragons of spreading original thought. TED Talks brings attention to their wealth of video lectures with straight forward controls and an immediately accessible video gallery. The navigation is busier than I would prefer, but the light background palette helps them get away with it.

Yeah, it’s a shameless plug for my favorite city in America, but Positively Cleveland pulls off an exceptional case in point of form following function.

A grid system should keep you on track but sometimes designs get trapped in those boundaries and designers have a hard time breaking through to make things original. SHFT pulls off a creative use of background imagery to give personality to the brand. The top menu and header text elements seem to float above the various depths taking nothing away from the focal points.

Usability DON’TS

Another way we can learn how to implement better usability is to explore what not to do. I could point to countless DIY websites built by non-professionals, but that would be too easy. Instead, we’ll show you how even professional designers – paid large sums by successful organizations – can become misguided.

Our opportunity, as designers, is to learn how to handle the complexity, rather than shy away from it, and to realize that the big art of design is to make complicated things simple.

- Tim Parsey

The New York Times is arguably America’s greatest newspaper, packed full of hard-hitting journalism and diverse, enjoyable reads. But the designers here aren’t capitalizing on the vast number of readers who peruse their site. It’s an industry-wide truth that hard copy sales are down. The advent of the internet, though, allows the publication to reach a wider audience than ever before. In looking at their site, the entire top section is squandered with a gaudy name plate & ad banners. This has the adverse effect of shrinking the left side navigation. Content above the fold is further impacted by the inappropriate layout. Efforts to generate a wealth of digital subscribers will be hindered here because of ineffective usability.

Anthem is one of the nation’s top insurance providers, but any claim they have of a top quality website should be denied. The users are going to be a very broad demographic perhaps than most. The No. 1 goal here needs to be ease of use. The company directs people to the website because over-the-phone, human resources are expensive. But by approving an unconventional navigation system, they are just asking for confusion – and higher call volumes. What’s more, their design is too wide for the broader range of browser dimensions.

Simple usability seems to have flown right over the heads of the designers for Sky Mall, the prolific seller of air travel novelties. The business model for the magazine, always found neatly tucked in the seat back in front of you, is targeting impulse shoppers. However on this homepage, the one thing that seems to be missing above-the-fold is the most important: the merchandise. Plus, priceless portions of the page top are being hogged by un-important ancillary section links. Now that internet access is becoming increasingly available a mile high, Sky Mall needs to realize the impetus to optimize for traveler viewing on laptops & tablets or it will be forgotten on the tarmac.

Major League Baseball has three major strikes against its homepage. The first, and most obvious, is the game scoreboard. It’s so dark and heavy on the screen – it cannibalizes the entire left side. All the while, it is hard to read and the interactivity is sorely lacking. They could do so much more with it. Second, the news feed off to the right feels like an afterthought. Third, all the above-the-fold content decisions appear poorly thought out. The combination of the bulky scoreboard, oversize slideshow, banner ads and news feed panel fail to deliver a home run of content to dive into. Hardcore or fair-weather baseball fans alike are being denied a user experience worthy of America’s Favorite Past Time.

Brembo is one of the most iconic aftermarket auto parts companies. However, the website designers should have been red-lighted on their navigation decisions. The brand is envied by competitors, but the site needs tuning. The design is quite clean and stylish. But by going with an unorthodox main menu, barely atop the fold, they are detouring potential direct or retailer interest. You’re instead drawn toward what appears to be top navigation but represents sections that maybe should have been relegated to the footer. Experimentation with abstract menu systems can lead to bold, innovative design – but it has to be done well. The bottom of a website’s homepage might not be the place to go full throttle with it.

Bill Smith appliances site screams laziness. It almost looks like they literally copied-and-pasted a tacky, newspaper classified ad. Aside from the tired and outdated motif, there is no immediate focus on featuring products. In today’s competitive consumer goods market, the core of any product retailer site has to be selection and price. Everything else is secondary. Here, the designer gave too much space to promoting the vendor’s name across the entire top. Additionally, the bulky menu system to the left offers questionable value.

South By Southwest - We love SXSW… the event. But event invitations almost always follow a set of rudimentary basics: Who, what, when, where, why and sometimes how. Here, Austin’s flagship mixed media conference, a widely-acclaimed and expensive affair, appears to have made some missteps on usability. As nice as it looks, the homepage design does little to sell new potential attendees on the event. Any swelling enthusiasm will quickly wane for uninformed visitors, who are forced to click an inordinate amount of times to figure out what this is, who will be there and why they should join in the fun.

Excite’s seemingly antiquated site is anything but exciting. Seriously – did they toss in the towel circa 1995? It looks like it belongs in a time capsule. If their main goal is to have you click on ads and leave their site – congratulations. That’s about all they have succeeded in doing. They do have a high-contrast color scheme. That could work well. However in this case, the accent color is wasted on borders and legends, which only serves to further distract anyone from engaging with the search and content.

The thing that makes CVS successful is convenience. Their website, however, is anything but. Maybe it’s just me, the red “buttons” don’t really feel like click-able buttons. Not only that, the heavy blue calls-to-action that flank the site content are redundant – both for prescription services. Even if pharmacy is a large part of what brings people to the site, that topic can easily be consolidated to free space for other priorities.

Fark‘s design is almost as laughably bad as the outrageous news stories that are its bread-and-butter. It is worth noting, however, that the site has actually improved over the last few years. But it still has quite a ways to go. The first available menu is unimportant to the goal of keeping eyeballs on the page. The next thing that draws your attention are the story excerpts. This would be good, except that the element that has the most weight is the source – not the cleverly-written headlines. What’s more, the poor branding destroys whatever emotional connection the reader could have made with the site’s greater mission.

ICPlaces.com is an online entertainment site for local & regional producers. But you wouldn’t quite know that by looking at it. There is no main menu system. There is nothing on the front page to tell you what the site is or where to start your search. And a video begins blaring before you ever really get your bearings. No one is amused.

Dilbeck is one of the most recognized real estate companies in Los Angeles. But I’m not sold on the website design. Almost every aspect above the fold is a roadblock to property searching – which is the whole reason people visit.

Conclusion

Most designers inherently know what conventional usability looks like. Admittedly, if you cross examine some of my do’s and don’ts, you’ll notice I applaud the use of an element in one place only to later berate it in another. There are countless subtleties in color selection, interactive states, margins and layouts that can make or break the aesthetic. There are nuances behind when and why you should use a certain navigation orientation or where you place a call-to-action. We always recommend designers take a step back before diving into mockups and work through the information architecture and wireframes so you and your client gain an expansive view of the content and layout potential. Predetermining taxonomies, business priorities, design boundaries, and user experience goals can be an arduous process. But planning ahead will ultimately lead to a better user experience resulting in more immersion, visitor retention, conversions, brand recognition and so much more. As a website designer, you possess a great power. Even if it is by way of the meager mouse, you have the power to influence the decisions of others. Those clicks can lead to measurable success for everyone involved. So use your power wisely.

The post How to design the best website user experience appeared first on GoMediaZine.

]]>
http://www.gomediazine.com/tutorials/how-to-design-the-best-website-user-experience/feed/ 18
Design a Sleek Website Interface in Photoshop http://www.gomediazine.com/tutorials/design-a-sleek-website-interface-in-photoshop/?utm_source=rss&utm_medium=rss&utm_campaign=design-a-sleek-website-interface-in-photoshop http://www.gomediazine.com/tutorials/design-a-sleek-website-interface-in-photoshop/#comments Tue, 14 Sep 2010 17:30:23 +0000 Mahmoud Khaled http://www.gomediazine.com/?p=10545 In this tutorial, we’re going to learn how to create a sleek & clean portfolio/blog Website interface design inside Adobe Photoshop. As we go through, we will deal with selections, layer styles, some basic typography, and so on…We’ll also use 960 Grid System to keep our layout nicely well-aligned. So come on in, let’s get… Continue Reading »

The post Design a Sleek Website Interface in Photoshop appeared first on GoMediaZine.

]]>

In this tutorial, we’re going to learn how to create a sleek & clean portfolio/blog Website interface design inside Adobe Photoshop. As we go through, we will deal with selections, layer styles, some basic typography, and so on…We’ll also use 960 Grid System to keep our layout nicely well-aligned. So come on in, let’s get started and have some fun!

Tutorial Details

  • Program Used: Adobe Photoshop CS3 or higher.
  • Difficulty: Intermediate
  • Estimated Completion Time: Around 2-3 hours

Final Outcome

Take a look at what we’ll be creating together. Click the image to enlarge.

Step 1

As I mentioned earlier, we’ll use 960 Grid System to keep everything aligned. Once it’s downloaded, open the document “960_grid_24_col.psd” up in Photoshop.

Since we’ll use guides a little bit too much, we need to get them—and the Rulers—viewed. In order to do that, go to View > Extras, Rulers, and Snap (to make our objects snap in alignment with the guides). By the way, the keyboard shortcuts of these three commands are definitely ones you wanna memorize.

Also, notice that the height of the final outcome is taller than the current one. So we need to adjust our Canvas Size, by going to Image > Canvas Size > Height: 1637px.

We need to fill our website background with a light gray color. To do that, create a new layer, create a selection over the whole canvas (1020x1637px) using the Rectangular Marquee Tool (M), set your foreground color to: #f5f3f4 then click Shift+Backspace in order to fill the selection with that foreground color.

Step 2

In this step we’ll create a thin bar at the top of the page, that would state your availability status. So go ahead and grab the Rectangular Marquee Tool (M), create a selection of 1020x40px, and fill it with this color value: #e5e6e8

Type some text, using the Horizontal Type Tool (T),  that represents your availability status (like: Available for hire), using the following character settings:
(Notice that I’ll only mention the settings that may be changed, the other settings can be seen in the image below. For example: the default Tracking value is set to zero, which is what we want, which means it doesn’t need to be changed, therefore, I won’t mention it below).

  • Font Family: Archer (learn more & buy at Typography.com)
  • Font size: 15px
  • Font weight: Bold
  • Anti-aliasing setting: Smooth
  • Color: #9a1447
  • Kerning: Optical

And type your email, so that people can get in touch, using the following character settings:

  • Font Family: Georgia (available in all the operating systems)
  • Font size: 15px
  • Font weight: Italic
  • Anti-aliasing setting: Smooth
  • Color: #9a1447
  • Kerning: Optical

Step 3

Let’s create a new bar that will contain the Website’s logo and navigation. We’ll start by creating a selection of 1020x100px using the Rectangular Marquee Tool (M). Then filling it with this color value: #9a1447

Using the Horizontal Type Tool (T), type your Website’s name, and apply the following character settings to it:

  • Font Family: Gotham Rounded (learn more & buy at Typography.com)
  • Font size: 45px
  • Font weight: Book
  • Anti-aliasing setting: Smooth
  • Color: any color for now, as we’ll apply a Gradient Overlay
  • Kerning: Optical

Now, we’ll go ahead and apply a Gradient Overlay to our text, according to the following image:

Select the Horizontal Type Tool (T), and type your navigation text using the following character settings:

  • Font Family: Gotham Rounded
  • Font size: 25px
  • Font weight: Light
  • Anti-aliasing setting: Smooth
  • Color: #f5f3f4
  • Kerning: Optical

We’ll separate these words using  by putting small circles between them. So using the Ellipse Tool (U) create a perfect circle (hold down the Shift key while drawing) of 5x5px, and fill it with: #ffffff.

In order to align the vertical centers of the logo/navigation with its background (the dark India pink bar), we’ll select the layers of the both of them, then click on “Align vertical centers” in the control bar while having both layers selected.

As you work with Photoshop, I really encourage you to get into the habit of giving your layers reasonable names, and even grouping them. — I personally rename every single layer in my document! Take a look:

Step 4

It’s time to create an area where we can write some welcoming text to our site visitors, and put some images of our featured work. We’ll start by creating a selection using the Rectangular Marquee Tool (M) of 1020x300px.

Let’s give this selected area a gradient color overlay, why don’t we? So select the Gradient Tool (G), open up the Gradient Editor dialogue box, set your color values from: #ececee to: #f5f3f4, and while selecting Radial Gradient as your dragging option, drag from the top-right of your selection to the bottom left of it—you may also hold down the shift key to constrain your angle.

Grab the Single Row Marquee Tool, and create two selections each one of them is: 1020x1px—don’t worry about the dimensions of your selection, since the tool itself will do that automatically—place them like in the image below, and finally fill them with white (#ffffff).

Step 5

Drag two new horizontal guides according to the following image. These two guides will indicate the top and bottom borders of our image slider—that we’ll start creating in just a moment.

Let’s start creating our image slider! First, we’ll create a holder for our images, we’ll do so by creating a rounded rectangle, using the Rounded Rectangle Tool (U) of: 390x145px, radius of: 3px—don’t worry about its fill color, an image will be placed there, anyways.
Call this layer: “image_holder.”

Now let’s apply some Layer Style to our image holder to stop it from looking plain. Will leave you with the image below…

In order to place an image of a featured piece of work, go to File > Place > locate to where your image is > Place. Make sure that the layer of your placed image is right on top of “image_holder” layer. Then right-click on your image’s layer and choose: “Create Clipping Mask.”

What we’ll create now is an arrow to slide between images. So we’ll draw a circle using the Ellipse Tool (U) of 40x40px, fill it with Black (#000000) and take its opacity down to: 30%.

Using the Custom Shape Tool (U) create a 20x20px arrow and fill it with any color just for now.

Apply some Layer Style to it according to the following image:

Drag a new horizontal guide according to the following image. This will indicate the top border of the text that will come below the image.

Using the Horizontal Type Tool (T) type the name of your featured project/design using the following character settings:

  • Font Family: Archer
  • Font size: 20px
  • Font weight: Medium
  • Anti-aliasing setting: Sharp
  • Color: #ab114a
  • Kerning: Optical

Beneath your title, type a very brief description about your project; using the following character settings:

  • Font Family: Georgia
  • Font size: 15px
  • Font weight: Regular
  • Anti-aliasing setting: Smooth
  • Color: #630d28
  • Kerning: Optical

Step 6

Drag a new horizontal guide according to the following image:

It’s time to write our Website’s first read—well, probably—the welcoming title, using the Horizontal Type Tool (U), and the following character settings:

  • Font Family: Gotham Rounded
  • Font size: 41px
  • Font weight: Light
  • Anti-aliasing setting: Smooth
  • Color: #ac114a
  • Kerning: Optical
  • Tracking: 5

Notice: I wanted my title to fit in 10 columns of my gird, but it was a little bit short, so I had to increase my tracking value. However, if you’ll write another title—you’ll probably do that—then you should adjust your tracking value depending on how long your title is. For example: if it was too long, then you may have to decrease your tracking value.

Then type a subtitle using the following character settings:

  • Font Family: Archer
  • Font size: 25px
  • Font weight: Medium
  • Anti-aliasing setting: Smooth
  • Color: #9a1447
  • Kerning: Optical

I know it’s a little bit weird, but I’ll start with creating the buttons first, then, typing the welcoming text (the text between the title and the two buttons). So using the Rounded Rectangle Tool (U), create a 150x40px rounded rectangle, with 3px radius, and fill it with any color for now—obviously, as we’ll apply a Gradient Overlay.

Now let’s apply some Layer Style to our plain old button/rectangle so that it looks more interesting. Will leave you with the image below:

Now using the Horizontal Type Tool (T) type some text inside the button (“hire us,” for example), and apply the following character settings to it:

  • Font Family: Gotham Rounded
  • Font size: 24px
  • Font weight: Medium
  • Anti-aliasing setting: Smooth
  • Color: #ffffff
  • Kerning: Optical
  • Tracking: -25

Apply a Drop Shadow to your text. Use the image below for reference.

Duplicate the button you just created, move to the right, and change the text on it (maybe something like: “see more.”)

Back to the welcoming/about text we’ve not written yet. Using the Horizontal Type Tool (T), create a text block and type around four lines inside of it; using the following character settings:

  • Font Family: Georgia
  • Font size: 15px
  • Font weight: Regular
  • Anti-aliasing setting: Smooth
  • Color: #9a1447
  • Kerning: Optical
  • Leading: 25px

Our text now is probably not centrally aligned between the title and the two buttons. Maybe you can align it visually. But *personally* I use a little trick—that you may be familiar with—to do that. Using the Rectangle Tool (U), create a rectangle that fills the area where you want to align your text (the area between the title and the two buttons, in our case), select the layer of the rectangle that you’ve just drawn, and shift click to select the text’s layer, then click on “Align vertical centers” in the control panel—while having both layers selected.

Don’t forget to keep your layers panel organized. Here’s how mine looks:

Step 7

Drag a new horizontal guide according to the following image.

Using the Rectangular Marquee Tool (M) create a selection of 1020x50px and fill it with this color value: #630d28

Grab the Rounded Rectangle Tool (U) and create a 190x30px rounded rectangle, with 3px radius and again fill it with any color just for now.

We’ll apply some Layer Style to it to stop from looking flat. Follow up with the image below:

Using the Horizontal Type Tool (T) type some words inside the rounded rectangle that shows that this is a search box, using the following character settings:

  • Font Family: Georgia
  • Font size: 15px
  • Font weight: Italic
  • Anti-aliasing setting: Smooth
  • Color: #636363
  • Kerning: Optical

Next to this field, type the word “search,” using the following character settings:

  • Font Family: Archer
  • Font size: 15px
  • Font weight: Bold
  • Anti-aliasing setting: Smooth
  • Color: #f5f3f4
  • Kerning: Optical

Now let’s create the “GO” button. Create a rounded rectangle of 25x25px, with 5px radius, and fill it with this color value: #a41240.

Inside that rounded rectangle and using the Horizontal Type Tool (T), type the word “GO” and apply the following character settings to it:

  • Font Family: Gotham Rounded
  • Font size: 12px
  • Font weight: Medium
  • Anti-aliasing setting: Smooth
  • Color: #f5f3f4
  • Kerning: Optical

Then, apply a Drop Shadow to it; according to the following image:

We’ll finish off this step by creating a simple breadcrumb. So grab the Horizontal Type Tool, and type this sentence “You are here: Home > Latest Stuff”—or whatever that tells that this is a breadcrumb. And apply the following character settings to your text:

  • Font Family: Archer
  • Font size: 15px
  • Font weight: Bold
  • Anti-aliasing setting: Smooth
  • Color: #f5f3f4
  • Kerning: Optical

Now tell her where she is, again, using the following character settings:

  • Font Family: Georgia
  • Font size: 15px
  • Font weight: Italic
  • Anti-aliasing setting: Smooth
  • Color: #f5f3f4
  • Kerning: Optical

Step 8

It’s time to start working on the content area. We’ll start by dragging a new horizontal guide according to the following image:

Oh, before we go any further, would like to ask you a question, mind you! Have you organized your layers panel?

Okay, back to our content area, let’s start working on the sidebar. So using the Line Tool (U) create a 1x43px line, fill it with this color value: #630d28, and place it like in the image below:

Using the Horizontal Type Tool (T), type a title (for example: “Advertisement.”) using the following character settings:

  • Font Family: Gotham Rounded
  • Font size: 30px
  • Font weight: Light
  • Anti-aliasing setting: Smooth
  • Color: #630d28
  • Kerning: Optical

Beneath your title, type a sub-title to support it. Using the following character settings:

  • Font Family: Archer
  • Font size: 20px
  • Font weight: Medium
  • Anti-aliasing setting: Smooth
  • Color: #ac114a
  • Kerning: Optical

Drag a couple of new horizontal guides according to the following image:

Using the Rectangle Tool (U), we’ll create a 110x110px rectangle, which will work as an ad block. Also, fill it with any color cause an image will be there, anyway. After you do that, apply a Stroke to it, use the image below for reference.

Make two copies of your ad block, then align them like in the image below:

Step 9

Drag a new horizontal guide according to the following image:

Create a new title using the same techniques we’ve gone through in the previous step.

Assuming your second title was “Categories,” let’s type some popular categories in our Website, using the following character settings:

  • Font Family: Georgia
  • Font size: 15px
  • Font weight: Regular
  • Anti-aliasing setting: Smooth
  • Color: #630d28
  • Kerning: Optical
  • Leading: 30px

Using the Ellipse Tool (U), create a 6x6px circle next to each category, and fill it with this color value: #acaead.

Step 10

Create yet another title—something that has to do with Twitter this time—using the same techniques we’ve used above.

Now type some text as an example of a tweet, using the following character settings:

  • Font Family: Georgia
  • Font size: 15px
  • Font weight: Regular
  • Anti-aliasing setting: Smooth
  • Color: #630d28
  • Kerning: Optical
  • Leading: 20px

After that, let’s type some information about the tweet, using the following character settings:

  • Font Family: Archer
  • Font size: 15px
  • Font weight: Semi-bold
  • Anti-aliasing setting: Smooth
  • Color: #636363
  • Kerning: Optical

Make another copy of your tweet and its info, and make sure to align it according to the following image:

We’ll end this step the same way we started it. By dragging a new horizontal guide according to the following image, that will indicate the bottom border of our content area.

Step 11

It’s time to design the featured blog posts area. Again, create a title for it like in the sidebar and make sure to align it  according to the following image:

Using the Rectangular Marquee Tool (M) create a selection of around: 253x115px, fill it with any color, and apply a Stroke to it. Use the image below for reference.

Place an image, and create a clipping mask for it—we already have seen how to do that.

We’ll now create a small bar that will contain some information about the blog post. So using the Rectangular Marquee Tool—or the Rectangle Tool (U) or whatever tool you prefer to use—create a 253x20px rectangle, fill it with: #9a1447, and leave 10px between it and the image above it.

Inside that rectangle, write some information about your blog post—I’ve written its categories and number of comments—using the following character settings:

  • Font Family: Archer
  • Font size: 15px
  • Font weight: Medium
  • Anti-aliasing setting: Smooth
  • Color: #f5f3f4
  • Kerning: Optical

Drag a new horizontal guide according to the following image:

Using the Horizontal Type Tool (T), type the title of your blog post, using the following character settings:

  • Font Family: Archer
  • Font size: 25px
  • Font weight: Medium
  • Anti-aliasing setting: Smooth
  • Color: #636363
  • Kerning: Optical

Now, and again, using the Horizontal Type Tool (T), write a few lines of your post, using the following character and paragraph settings:

  • Font Family: Georgia
  • Font size: 15px
  • Font weight: Regular
  • Anti-aliasing setting: Smooth
  • Color: #630d28
  • Kerning: Optical
  • Leading: 26px
  • Paragraph: Justify all

Also, make sure to leave 20px between your body text and your title.

Let’s create the “Read More >>” button, why don’t we? Create a 110x20px rectangle and fill it with this color value: #9a1447. Also, make sure to align it according to the following image:

Type the word “Read More >>” inside of it, using the following character settings:

  • Font Family: Archer
  • Font size: 15px
  • Font weight: Bold
  • Anti-aliasing setting: Smooth
  • Color: #ffffff
  • Kerning: Optical

Then, apply a Drop Shadow to it. Settings can be seen in the image below:

Make a copy of this blog post and align it to the right. Use the image below for reference.

Step 12

In this step we’ll create an area for our featured work. So, again, create another title, like the others we created before, and make sure to align it according to the following image:

Place an image of a featured work with the same specifications of the blog post’s image.

Type a title and a short description using the same character settings we applied for the blog post’s text.

Create a “Case Study >>” button, that looks like the “Read More >>” one. Also align it according to the following image:

Step 13

Drag a new horizontal guide according to the following image, that will indicate the top border of our footer area—that we’re just about to start creating.

Using the Rectangular Marquee Tool (M), create a selection of 1020x300px.

Fill your selection with this color value: #9a1447.

Create another selection, this time of: 1020x290px (which means to leave 5px in the top and the bottom).

Grab the Gradient Tool (G), open your Gradient Editor up, adjust your colors/settings according to the following image. With your selection still selected, and with Radial Gradient as your dragging option, drag according to the following image. Make sure to hold down the Shift key to constrain your angle—if necessary.

Step 14

Drag two new horizontal guides according to the following image:

Type the first footer title (“Who’s behind this,” in our case) using the following character settings:

  • Font Family: Gotham Rounded
  • Font size: 30px
  • Font weight: Light
  • Anti-aliasing setting: Smooth
  • Color: #ffffff
  • Kerning: Optical

Use the Line Tool (U) to create a 270x1px, fill it with White (#ffffff), and make sure to align it according to the following image:

Create a 270x70px rectangle—using whatever tool you prefer,—place an image inside of it, using the “Create Clipping Mask” command, and give it a Stroke of 4px and a color value of: #e5e6e8. Finally, don’t forget to align it like in the image below:

Type some text about you, using the following character settings:

  • Font Family: Georgia
  • Font size: 14px
  • Font weight: Regular
  • Anti-aliasing setting: Smooth
  • Color: #ffffff
  • Kerning: Optical
  • Leading: 27px

Step 15

In this step, we’ll create an area that contains recent comments. So, create another title that says “Latest Comments,” that looks like the title on the left.

Then, type an example of a comment, using the following character settings:

  • Font Family: Georgia
  • Font size: 15px
  • Font weight: Regular
  • Anti-aliasing setting: Smooth
  • Color: #ffffff
  • Kerning: Optical
  • Leading: 20px

And type some information about the comment, using these character settings:

  • Font Family: Archer / Gotham Rounded
  • Font size: 15px
  • Font weight: Bold Italic / Medium
  • Anti-aliasing setting: Smooth
  • Color: #acaead
  • Kerning: Optical

Make a duplicate of your comment and its information, and make sure to place them like the image below:

Step 16

The right part of our footer will contain some contact information. So, again, create a new title that looks like the others on the left, also it should say something that has to do with getting in touch. Then, place an image like the one on the left, but this time, it should be an image of map.

Now we’ll create a button that says “Locate Us.” So, using the Rounded Rectangle Tool (U), create a 100x30px rectangle, with 5px radius, fill it with: #f5f3f4, and take its Opacity down to: 50%.

Type the word “Locate Us” inside the rounded rectangle, using the following character settings:

  • Font Family: Gotham Rounded
  • Font size: 15px
  • Font weight: Bold
  • Anti-aliasing setting: Smooth
  • Color: #ffffff
  • Kerning: Optical

Then, apply a Drop Shadow to it, so that it looks more interesting. Follow up with the image below:

It’s time to add some contact information. Grab the Horizontal Type Tool (T), and type some information. We’ll start by typing “Address,” using the following character settings:

  • Font Family: Gotham Rounded
  • Font size: 15px
  • Font weight: Bold
  • Anti-aliasing setting: Smooth
  • Color: #ffffff
  • Kerning: Optical
  • Caps: All Caps

Then, type the address itself, using the following character settings:

  • Font Family: Archer
  • Font size: 15px
  • Font weight: Bold Italic
  • Anti-aliasing setting: Smooth
  • Color: #ffffff
  • Kerning: Optical
  • Leading: 20px

Keep adding more information…

So far, probably, the centers of the three parts of our footers are not horizontally aligned. So, we’ll put each one of them inside an individual Layers Group, select the three of the groups, and click on “Distribute horizontal centers.”

Step 17

Using the Rectangular Marquee Tool (M), create a selection of: 1020x40px and fill it with this color value: #e5e6e8. Call this layer: “footer_small_bg”

Use the Single Row Marquee Tool, to create a selection like the one in the image below and fill it with White (#ffffff).

Type your footer navigation text, using the following character settings:

  • Font Family: Archer
  • Font size: 15px
  • Font weight: Bold
  • Anti-aliasing setting: Smooth
  • Color: #9a1447 – #636363
  • Kerning: Optical

Then write your copyright text, using the same character settings shown above.

Put the text of the footer in an individual group, Shift click and select the layer “footer_small_bg” then click on “Align vertical centers” in the control panel, to make sure they’re vertically well-aligned.

That’s it, my friends!

It took a little bit of time, but there we have it. We’ve created a sleek Website layout/interface inside Adobe Photoshop. Really hope you’ve found this tutorial useful, and—more importantly—enjoyed it! If you have any comments, criticism, need help, or whatever, just drop a comment! :)

The post Design a Sleek Website Interface in Photoshop appeared first on GoMediaZine.

]]>
http://www.gomediazine.com/tutorials/design-a-sleek-website-interface-in-photoshop/feed/ 34
Full Color Rollovers in Flash http://www.gomediazine.com/tutorials/full-color-rollovers-in-flash/?utm_source=rss&utm_medium=rss&utm_campaign=full-color-rollovers-in-flash http://www.gomediazine.com/tutorials/full-color-rollovers-in-flash/#comments Wed, 02 Sep 2009 17:30:31 +0000 Tony Ross http://www.gomediazine.com/?p=7109 In this tutorial, we will create a Flash file with a simple, yet eye-catching effect — a black & white photo with full-color rollovers. We will initially edit the photo in Photoshop, then import and complete the file in Flash. I wanna send a shout-out, and special thank you to the band Today the Moon,… Continue Reading »

The post Full Color Rollovers in Flash appeared first on GoMediaZine.

]]>
header-image

In this tutorial, we will create a Flash file with a simple, yet eye-catching effect — a black & white photo with full-color rollovers. We will initially edit the photo in Photoshop, then import and complete the file in Flash. I wanna send a shout-out, and special thank you to the band Today the Moon, Tomorrow the Sun for the use of their photo.

Download the sample file band_photo.jpg (1967) and open in Photoshop.

band_photo jpeg

Save this document as band_photo.psd

Isolate The Figures

Using the pen tool, create a path around one of the band members
I’m making a selection just around the person, not the chair. The goal here is to create a selection of a band member. I’m using the pen tool, however you may use whatever selection tools you prefer.

Right-click or control-click on the path, and choose “Make Selection…

make_selection_menu

Click OK on the Make Selection dialog box that follows

make-selection-dialog

Create a layer via copy, CONTROL+J/COMMAND+J. This creates a layer from the
selection

Select the background layer, and then repeat this for each band member

Be sure to name each layer.
For simplicity, I named them band-1, band-2, etc, going from left to right

band-layers

Create The Grayscale Background

Select the background layer, press CONTROL+D/COMMAND+D to deselect everything.

Duplicate this layer via copy, CONTROL+J/COMMAND+J
Name this duplicate layer “black & white”

dup-layer-black-n-white

Next, create a new layer, CONTROL-SHIFT+N/COMMAND-SHIFT+N, Set this layer Mode to “Color“, click OK

new-layer-color

On the keyboard, press D to set default colors (black foreground/white
background).

Fill this layer with the foreground color, ALT+BACKSPACE/OPTION+DELETE

Merge this layer with the black & white layer, CONTROL+E/COMMAND+E

As an option, you can push this effect further by lightening the output levels on the black & white layer CONTROL+L/COMMAND+L
Set the Shadow output level anywhere from 25 to 50.

output-levels

At this point, it will be visually obvious if you have selected extra space around the band members. You may see color spots around them that should be black & white. Correct this via selecting the band member’s layer that needs fixing, and use the eraser tool to get rid of any overlap.

final_image

Toggle the visibility of the Background layer to off.

background-visibility

Save this document, CONTROL+S/COMMAND+S, and close it.

Import The .psd File Into Flash

You will need at least Flash CS to import a PSD

Open Flash. Create a new document, either AS2 or AS3 will work as this effect is not dependent on Actionscript.

Import the band_photo.psd, CONTROL+R/COMMAND+R

ps_layers_to_flash
Because we turned off the visibility of the background layer in Photoshop,
this layer is unchecked when importing into Flash.

Hold down the SHIFT key, then select each band member layer, as well as the
black & white layer.

Check the box “Create movie clips for these layers”

convert_layerd_to_movieclips

For Publish Settings, set the Compression to Lossless.

Follow these settings, Convert Layers to: Flash Layers, check the boxes Place layers at original position, and Set stage size to same…
Click OK.

layers-position-stage

Deselect All, CONTROL-SHIFT+A/COMMAND-SHIFT+A

Create The Buttons

Click once on one of the band members to select.

select-band-member

Convert this selection to a symbol, F8, follow these settings:
Name: band #+_btn
Type: Button
Click OK

f8-convert-to-symbol

Repeat the BUTTON SYMBOLS steps for each band member.

Edit The Buttons

Once you have converted each band member to a button, DOUBLE-CLICK on one of them, this will take you into edit mode, in the buttons timeline:

button_edit

Click-and-drag the Up frame to the Over frame

over-frame

Select the Hit frame, and insert a blank keyframe, F7

hit-frame

Select the brush tool and using the photo as a guide, paint a rough silhouette of the band member. The paint color does not matter, as the hit frame is not seen by the audience/end user, you are simply painting the active area of the button.

null

On the timeline, click the Scene 1 button, and you will see a aqua-colored overlay of the silhouette you just painted.

null

Repeat the BUTTON EDITING steps for each band member.

Here is a snapshot of the file with all 4 band member buttons edited. Though you can be as detailed or loose as you like when creating the silhouettes, do not overlap, as this can cause flickering between buttons.

Save, and test your movie CONTROL+ENTER/COMMAND+RETURN

And here is the final result:

The post Full Color Rollovers in Flash appeared first on GoMediaZine.

]]>
http://www.gomediazine.com/tutorials/full-color-rollovers-in-flash/feed/ 33
Rule Seven: Composition: putting it all together. http://www.gomediazine.com/tutorials/rule-composition-putting/?utm_source=rss&utm_medium=rss&utm_campaign=rule-composition-putting http://www.gomediazine.com/tutorials/rule-composition-putting/#comments Tue, 14 Apr 2009 16:00:54 +0000 William Beachy http://www.gomediazine.com/?p=4738 Part Seven of Seven Easy Principles to Becoming a Master Designer. Ok Folks, This is it; part seven of seven. I’ve hopefully convinced you to limit your use of colors and fonts, taught you to provide sufficient contrast, suggested that you properly space your elements and let you in on the secrets of adding depth… Continue Reading »

The post Rule Seven: Composition: putting it all together. appeared first on GoMediaZine.

]]>
Part Seven of Seven Easy Principles to Becoming a Master Designer.title-graphic_step-7

Ok Folks, This is it; part seven of seven. I’ve hopefully convinced you to limit your use of colors and fonts, taught you to provide sufficient contrast, suggested that you properly space your elements and let you in on the secrets of adding depth and motion to your design. Now, the last principle in this rapid-fire guide to becoming a master designer is composition.

In truth, the order I’ve given you these seven principles is probably ass-backwards. The composition is the first and most important part of your design. So, let’s just pretend that you are starting your design right now – from scratch. This is the point at which you want to be thinking about your composition.

Each of the previous six principles dealt with very specific rules and techniques. Composition is the broadest and most difficult principle to explain because it encompasses EVERYTHING.

So, what exactly is a design’s composition? Let’s go the cheesy route of providing a textbook definition.

First let’s review the definition of the word ‘composition.’ Dictionary.com defines composition as
composition
1. the act of combining parts or elements to form a whole.

2. the resulting state or product.

Ok, that’s simple enough. The composition is simply what you get when you put your pieces together. It says nothing of function or quality. It just is what it is.

Now, design as defined by dictionary.com: Design is:
design
1. to prepare the preliminary sketch or the plans for (a work to be executed), esp. to plan the form and structure of: to design a new bridge.

2. to plan and fashion artistically or skillfully.

Ok. Great, so, if we combine those two definitions to form a definition for design composition, it would sound something like this:

Design Composition: To skillfully and artistically combine parts or elements to form a whole.

Wow. That sounds GREAT. So, what have we learned? Um… not much. I think we already KNEW that we were here to put all our design elements together into an artistic design (whole.) What we’re after is how to make a successful design composition. So I guess we’ll have to define what a successful design is.

Fortunately for us, design is not simply “art;” a highly charged and subjective subject. Designs serve a very specific function. The function of a car’s design is to safely transport humans from one location to another. What if we designed a car with square wheels and a huge metal spike extruding from the steering wheel pointed directly at the heart of the driver? Would that be a good car design? No, probably not.

So, how do we define a successful design composition? Well, if we have successfully achieved the FUNCTION of the design, then our design is good. And who defines the function? Typically this is the client. The client tells you (the designer) the function (purpose) of the design. Then it’s your job to design (whatever you’re designing) accordingly.

Now – how do I give you a lesson on composition if the function is not set? Well, I will have to speak in generalities. Then you will have to apply these general concepts to your specific project. And since the composition is dependent on the function, well, we should probably start there.

Make sure you have a solid understanding of the design’s goal: Read your project scope carefully. Make sure you fully understand what your client is trying to do. Ask plenty of questions if you have to. This part includes the boring stuff like dimensions, resolution and printing (or manufacturing) processes. All of these affect how and what you design.

Understand who the target market is: If you’re trying to communicate a subversive counter-culture message to a young male demographic, your composition may include a strange layout with hard-to-read fonts and bright colors. Or if you’re trying to communicate where the cafeteria is to old people, your composition should probably utilize a large easy-to-read font printed in black, centered with an arrow on a white background. What’s my point? Your composition will also depend on your target market.

Know your history: Once I have these two items taken care of, I like to do some research on the design history of the company and industry I’m doing work for. As much as possible I LOVE to feed visually and compositionally off of the past. My thought process is this: “understand how they’ve gotten to where they are today, then help them transition into a better designed future.”

Make some quick sketches: Hopefully at this point I’m starting to get some rough ideas floating through my head of what needs to be in the design and, at least a rough concept of how I might want to put it all together. Before I give myself an opportunity to over-think anything, now is the perfect time to do some quick sketches. These are very fast and very rough. They’re just enough to communicate where all the elements go, how they work together. This gives me an opportunity to quickly ideate and maybe deal with some contrast issues. Let’s look at a few composition sketches for a poster and a flyer I did.
gnome-example

girl-example

The Golden Ratio: As I’m going over all of these systematic approaches to the relative question of good design composition, you surely must be thinking: “Bill, c’mon isn’t there some grand universal rules to help guide my layout? Isn’t there a FORCE which surrounds us, binds us and will help guide me to properly arrange my design elements?” Well, I want to say no. There is no design ‘force’ that you can tap into if your design midi-chlorian levels are high enough. However, there is an ancient design standard that has been used throughout the ages – going all the way back to the birth of civilization. It’s known as the Golden Ratio.
golden-ratio2

I can’t possibly get into a full explanation of the Golden Ratio here, but to summarize: people noticed certain patterns that repeated in nature. They tried to quantify this repetitious behavior in nature and came up with phi, or more precisely: 1.6180339887. If you’d like to know a little bit more about the Golden Ratio I suggest you hit up the oracle: http://en.wikipedia.org/wiki/Golden_ratio

So, how does the golden ratio apply to your design composition? Well, basically – you want to use this measurement to help space your various design elements. Once again, I can’t go into great detail in THIS tutorial, but here is a downright amazing example of the Golden Ratio being used by the Greeks to build the parthenon:
the-golden-section

The rule of thirds: In my opinion the “rule of thirds” is simply a bastardized (simplified) version of the Golden Ratio. Basically, you want to divide your composition into thirds vertically and horizontally. Where the lines meet should be your focal points. By avoiding a centered design you add some motion and interest.rule-of-thirds2

Balance without symmetry: “Great! The Golden Ratio,” you’re thinking “ Now, are there any other universal ‘truths’ about design composition?” Well – not so powerful as the Golden Ratio is the concept of balance. Without getting trapped in a symmetrical composition many artists and designers try to achieve balance in their designs. Basically, if you have a large dark object on one side of your composition, then you should have a large dark object on the opposite side of your composition. Once again, try to do this without making it symmetrical. You want to achieve balanced asymmetry.

Test it! Yes, that’s what I said, TEST IT! As we’ve already established that design is a discipline of accomplishing a specific goal (the design’s function) – we can certainly test whether or not the design works! This can be done as simply as walking around with a print of your design and asking people’s opinions. Or it can be done very scientifically with case studies and double-blind testing. How much time and energy you have available to test a composition may depend on your budget. But you may be surprised at how much information you can get by just watching a few individuals interacting with your design. This is particularly true when dealing with design ergonomics. What are the results? Does your ad get people to the mall? Can people easily navigate through your website design? Can people figure out how to work your stereo design? Put some real warm blooded people in front of your design and ask them to interact with it.

“Gosh Bill, this is fairly extensive.” You may be thinking to yourself: “Seriously? Studying the target market? Studying the history? Double-blind testing?” Your project may not have that type of budget. Or perhaps you simply don’t have the time. Well, I understand your problem. And what I’ve described here is the most ideal of design scenarios. In truth, most of this stuff I just do in my head. If the budget is extremely tight (which it often is) and I have limited time, the design process looks something like this:bills-process

Me “carefully reading the project brief” is actually me just having a short conversation with the client. “Understanding who the target market is” is just me having a basic understanding of my client and the rest is a bunch of stereotypical assumptions about his/her demographic. “Studying the history of my client’s design” is usually me just looking at their current website or marketing materials. My “sketches”, well, those rarely make it onto paper. I do them in my head. Then I jump right into slapping all my design elements together. And I don’t often get the chance to measure out the Golden Ratio. I know not to center my focal point, and I just move pieces around until they look good. Once again, I’m making some assumptions and using my design intuition. Testing – well, that’s usually me just showing the client proofs. If I like it and they like it – we assume its close enough for rock ‘n’ roll.

So, I hate to demystify the design process by simply saying “I do it in my head.” But it just depends on the situation you’re dealing with. Most clients have tight deadlines and limited budgets. If they see “3 hours for research” on their bill, you’ll probably get yelled at. It’s a constant challenge to teach our clients about good design practices and why they should spend a few extra bucks to let us do our job properly. But we try.

Well, that’s it folks. I hope this last lesson has been helpful and not too ambiguous. And generally, I hope you have enjoyed this 7 post series. There is obviously no substitute for PRACTICE PRACTICE PRACTICE.

If you missed the rest of the series, here they are:
Become a Master Designer: Part 1: Limit your Fonts
Become a Master Designer: Part 2: Limit your Colors
Become a Master Designer: Part 3: Contrast, Contrast, Contrast
Become a Master Designer: Part 4: Spacing is your Friend
Become a Master Designer: Part 5: Depth
Become A master Designer: Part 6: Motion

The post Rule Seven: Composition: putting it all together. appeared first on GoMediaZine.

]]>
http://www.gomediazine.com/tutorials/rule-composition-putting/feed/ 55
Design An Elegant Featured Content Slider for Wordpress http://www.gomediazine.com/tutorials/design-elegant-featured-content-slider-wordpress/?utm_source=rss&utm_medium=rss&utm_campaign=design-elegant-featured-content-slider-wordpress http://www.gomediazine.com/tutorials/design-elegant-featured-content-slider-wordpress/#comments Wed, 28 Jan 2009 15:25:42 +0000 jsexton http://www.gomediazine.com/?p=3348 An Elegant Featured Content Slider for Wordpress by John Sexton December 22nd, 2008. Introduction In this tutorial, we’ll create an elegant featured content slider for Wordpress like the one featured on http://www.fuseboxtheatre.com. This featured content slider is based on “The Coda Slider,” a neat device used by Panic Software to display information about their “Coda”… Continue Reading »

The post Design An Elegant Featured Content Slider for Wordpress appeared first on GoMediaZine.

]]>
An Elegant Featured Content Slider for Wordpress

by John Sexton December 22nd, 2008.

Introduction

In this tutorial, we’ll create an elegant featured content slider for Wordpress like the one featured on http://www.fuseboxtheatre.com.

This featured content slider is based on “The Coda Slider,” a neat device used by Panic Software to display information about their “Coda” product on their website (http://www.panic.com). This effect is beautiful, flexible, and often copied.

We’ve managed to put together a nice implementation that seamlessly integrates with Wordpress for easy, automatic populating of featured content. The slider we’re going to build today uses a number of existing components, including the Coda Slider jQuery plugin, the Easing jQuery plugin, and jQuery itself.

The original Coda Slider tutorial at jQuery for Designers goes into the nuts and bolts of the jQuery code and the mark-up structure. I’ll refer you there if you want to learn more about the jQuery is actually working. Including it here would make this tutorial way too long – and besides, there’s no sense in re-inventing the wheel!

http://jqueryfordesigners.com/coda-slider-effect/

The purpose of this tutorial is to seamlessly integrate this slider with an existing Wordpress installation to create a beautiful, automatically populated, easy to manage featured content section. Let’s get to it!

The Markup and Javascript

As mentioned above, please refer to http://jqueryfordesigners.com/coda-slider-effect/ for a description of the jQuery, markup, and basic CSS necessary to get the slider working.

That tutorial also discusses the various jQuery plugins you need to get the slider working in the first place. For convenience, I’ve condensed the other jQuery plugins into 1 javascript file, which I’ve called coda-slider-condensed.js. You can download it here: coda-slider-condensed.js (Right click, save as).

The other jQuery plugin that you will need — that is not included in the jQuery for designers tutorial, but IS included here — is the jQuery Easing plugin. Easing is what gives the slider its sense of momentum – a small touch that really enhances the overall experience.

You can also get jQuery Easing here: http://gsgd.co.uk/sandbox/jquery/easing/

My coda-slider-condensed.js file already has easing enabled. If you want to change the type of easing, or its duration, look at lines 84-89 of coda-slider-condensed.js.

Before we get started with the Wordpress goodness, all you have to do is make sure you include the jQuery easing file, as well as the coda-slider-condensed.js and, of course, jQuery itself, in your Wordpress header.php file. Just cut and paste the following into your < head > < / head > tags.

[sourcecode language="html"]

<script src="http://www.yoursite.com/wp-content/themes/yourtheme/js/jquery-1.2.6.min.js" type="text/javascript"></script>

<script src="http://www.yoursite.com/wp-content/themes/yourtheme/js/jquery.easing.1.3.js" type="text/javascript"></script>

<script src="http://www.yoursite.com/wp-content/themes/yourtheme/js/coda-slider/coda-slider-condensed.js" type="text/javascript" charset="utf-8"></script>

[/sourcecode]

Make sure to include the correct path to your javascript files – these paths are just examples!

Integration With Wordpress

Now that we have the basics we need to get the Coda Slider working, we can get to the meat of this tutorial: how to integrate with Wordpress!

Here’s what we want to do: create a featured content slider with our most recent 3 posts. Each featured post has an image and an excerpt associated with it. We want the image to show up both within our sliding panels, and as a smaller thumbnail in the slider navigation.

Let’s get started:

  • Since we want to feature 3 posts, we need to keep track of how many posts we’re going through. To do this, we’ll initialize a variable ($postcount) that we can use to track our progress. This handy variable will also enable us to seriously condense the code that we write later (that’s where the ‘elegant’ part comes in!)
  • Retrieve a query from the Wordpress database using the powerful wp_query command. Here we’ll just use it to grab the most recent 3 posts. If you want to learn more about wp_query and what you can do with it, check this out: http://nettuts.com/working-with-cmss/build-a-newspaper-theme-with-wp_query-and-the-960-css-framework/
  • Loop through each of the posts we have retrieved from the database and display them as our three featured posts. We want the thumbnails of each post’s featured image to automatically appear in the navigation section of our slider.
  • Prevent duplicate posts from showing up using a simple – but important – bit of code: $do_not_duplicate[] = get_the_ID(); This is an array of post IDs that we will store and reference later – to make sure that posts that show up lower down on our site are not duplicates of those in the featured section.

Here’s what this part looks like:
[sourcecode language="html"]

<?php
$postcount = 0;
$featured_query = new WP_Query(‘showposts=3’);
while ($featured_query->have_posts()) : $featured_query->the_post();

$do_not_duplicate[] = get_the_ID();
$postcount++;
?>
[/sourcecode]

That’s just the PHP – we’ll need to wrap it in some DIVs to make it work with the slider, but we’ll tackle that later.

Filling The Panels

Next, we initialize our panels – this is where the power of our $postcount variable comes into play. Rather than have to manually create each panel (and manually add or subtract panels if we decide we’d like to change the number of featured stories), this variable, coupled with some simple PHP, allows us to automate that process.

[php]

<div class=“panel” id=“featured-<?php echo $postcount; ?>”>

CONTENT GOES HERE

</div> <!– End Panel –>
[/sourcecode]

We will end up with a series of DIVS like this:

[sourcecode language="html"]
<div class=“panel” id=“featured-1”> CONTENT </div>
<div class=“panel” id=“featured-2”> CONTENT </div>
<div class=“panel” id=“featured-3”> CONTENT </div>
[/php]

For CONTENT, anything could go in that spot – static content, post excerpts, custom field information, etc. Now I’ll briefly describe how to get the featured images and featured text into that content area.

Using Featured Images

On http://www.fuseboxtheatre.com, we are pulling data from the post’s custom “Image” field to get the featured image, and we are also getting the title and excerpt. Here’s how we do it:

[sourcecode language="html"]
<div class="featured_media">

<?php
// get the image filename
$value_feat_img = get_post_custom_values("Image");

if (isset($value_feat_img[0])) { ?>

<a href="<?php the_permalink() ?>" rel="bookmark"><img class="frame" src="<?php echo bloginfo(‘template_url’); ?>/yourimagefolder/<?php $values = get_post_custom_values("Image"); echo $values[0]; ?>" alt="<?php the_title(); ?>" />
</a>

<?php } ?>

</div>
[/sourcecode]
This gives us an image that is linked to our post. This assumes that you have your post image located in a folder called “yourimagefolder” that resides inside of your site’s root. Of course you can adjust your path to whatever fits your individual situation. You can manipulate this image with CSS by targeting the wrapping div, of class .featured_media.

To assign an image to a post, go down to the “Custom Fields” section of your post and enter the image name with a custom field key of “Image,” like so:

Using Featured Text

Now we want the text to go along with the image. We open another div, “.featured_text” and go from there:
[sourcecode language="html"]

<div class="featured_text">

<h2 class="entry-title">
<a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?>
</a>
</h2>

<div class="entry-content">

<?php the_excerpt(); ?>

</div>

</div>
[/sourcecode]
This will give us a containing text area, an < h2 > level post title which is linked to our post, and the excerpt for that post. Again we can manipulate these using CSS by targeting “.entry-title” or “.entry-content”.

That’s all we need inside each one of our sliding panels. Now we need to end our WHILE loop and close some divs.
[sourcecode language="html"]

<?php endwhile; ?>

[/sourcecode]

Adding Thumbnail Navigation to the Slider

Now comes the navigation – these are thumbnails that you can click to go to the associated featured post. These will be automatically drawn from the same “Image” custom field as your featured post image.
[sourcecode language="html"]
<div id=“shade”>
<ul class=“navigation”>

<?php
$postcount = 0;

$featured_query = new WP_Query(‘showposts=3’);

while ($featured_query->have_posts()) : $featured_query->the_post();

$do_not_duplicate[] = get_the_ID();
$postcount++;
?></ul>
</div>
[/sourcecode]
We start off by opening our #shade div and our Navigation list – then do the same PHP as before to make sure we get the same three posts and do not duplicate them – after all, we want the thumbnails, post titles, or whatever else we are using for the slider navigation to correspond to the content they are matched to.

For each navigation item, we use the same code we used before to get the post’s custom image, but now we put it inside of a list item:
[sourcecode language="html"]
<li>

<?php // get the image filename
$value_img = get_post_custom_values("Image");

if (isset($value_img[0])) { ?>

<a href="#featured-<?php echo $postcount; ?>">

<img class="scroller-thumb" src="<?php echo bloginfo(‘template_url’); ?>/yourimagefolder/<?php $values = get_post_custom_values("Image"); echo $values[0]; ?>" alt="<?php the_title(); ?>" title="<?php the_title(); ?>" />

</a>
<?php } ?>

</li>

<?php endwhile; ?>
< / div> <!– End Shade (be sure to remove space) –>

[/sourcecode]
The cool thing here is use of the $postcount variable – we are now linking our thumbnails to the panel divs we generated before – all by their IDs, and all automatically, just by referencing $postcount! This means we can just write the code once and loop it, rather than having to write it out explicitly for each panel.

We’re also using the Wordpress custom field “Image” again – this time to take the same image we used as our featured image, and now use it as a slider navigation thumbnail. Using the technique, we can have this same custom image show up in the actual sliding “Panel” divs themselves, too!

The one thing that’s different here is that we’ve added a class to the image: “.scroller-thumb” Now, using CSS, we can specify a size for this thumbnail image. After all, we want to use the same image for the navigation as for the featured image, but we don’t want them both to be the same size. We also don’t want to manually create two image sizes and two custom fields for every post.

Here’s some simple CSS to constrain these image sizes:
[sourcecode language="css"]
img.scroller-thumb{
padding: 0.3em 0.4em;
border: 0.1em solid #2b2b2b;
width: 13.3em;
}
[/sourcecode]
Now we’ve finished the operations we want for each list item, so we end our WHILE loop, and close the navigation list, #shade DIV. That’s it for the code portion of the slider – now we need to make sure everything is nicely wrapped up inside of the appropriate divs. Here it is all together: In your HEADER.PHP:
sourcecode language=”html”]

[/sourcecode]
In your INDEX.PHP (or wherever else you want the slider to appear)
[sourcecode language="html"]
<div id="wrapper">
<div id="slider">
<div class="scroll">
<div class="scrollContainer">
<?php
$postcount = 0;

$featured_query = new WP_Query(‘showposts=3’);

while ($featured_query->have_posts()) : $featured_query->the_post();

$do_not_duplicate[] = get_the_ID();
$postcount++;
?>
<div id="featured-<?php echo $postcount; ?>" class="panel">
<div class="featured_media">

<?php
// get the image filename
$value_feat_img = get_post_custom_values("Image");

if (isset($value_feat_img[0])) { ?>

<a rel="bookmark" href="<?php the_permalink(); ?>"><img class="frame" src="<?php echo bloginfo(‘template_url’); ?>/yourimagefolder/<?php $values = get_post_custom_values("Image"); echo $values[0]; ?>" alt="<?php the_title(); ?>" />
</a>

<?php } ?></div>
<div class="featured_text">
<h2 class="entry-title">
<a title="Permanent Link to <?php the_title(); ?>" rel="bookmark" href="<?php the_permalink(); ?>"><?php the_title(); ?>
</a></h2>
<div class="entry-content">

<?php the_excerpt(); ?></div>
</div>
</div>
<!– End Panel –>

<?php endwhile; ?></div>
<!– End Scroll Container –></div>
<!– End Scroll –>
<div id="shade">
<ul class="navigation">

<?php
$postcount = 0;

$featured_query = new WP_Query(‘showposts=3’);

while ($featured_query->have_posts()) : $featured_query->the_post();

$do_not_duplicate[] = get_the_ID();
$postcount++;
?>
<li>

<?php // get the image filename
$value_img = get_post_custom_values("Image");

if (isset($value_img[0])) { ?>

<a href="#featured-<?php echo $postcount; ?>">

<img class="scroller-thumb" src="<?php echo bloginfo(‘template_url’); ?>/yourimagefolder/<?php $values = get_post_custom_values("Image"); echo $values[0]; ?>" alt="<?php the_title(); ?>" title="<?php the_title(); ?>" />

</a>
<?php } ?></li>
< ?php endwhile; ?></ul>
</div><!– End Shade –>
</div><!– End Slider –>
</div><!– End Wrapper –>
[/sourcecode]

Conclusion

This has been an overview of how to create an elegant featured content slider for Wordpress. I hope you’ve enjoyed it! Below, you can find the CSS we are currently using for our slider at http://www.fuseboxtheatre.com. You may need to tweak it to fit your own layout.

One last thing: rather than just having the most recent three posts appearing in your featured content slider, sometimes you want to be able to control which posts show up. There are a number of ways to do this, such as adjusting the post date, assigning posts to a specific “featured” category, etc.

I prefer to do this using another cool Wordpress plugin: WP-Sticky. You can find it here: http://lesterchan.net/portfolio/programming/php/#wp-sticky (Edit: This was written before the release of Wordpress 2.7, which has a “Stick Post” feature build-in.)

I’ve found that using this plugin to assign the status of “Announcement” to the posts I want to feature is the easiest way to go. Announcement posts will always stay on top of the rest of your posts, but you can easily turn “Announcement” off, and the post will return to its rightful place among the rest of your posts. There are more cool tricks you can do with this plugin – I’ll encourage you to play around with it to discover them for yourself!

BONUS:

Remember that cool stuff we did with do_not_duplicate? Let’s say you have a bunch more posts that you want to appear below your featured content area (like we have on http://www.fuseboxtheatre.com). In order to make sure those posts don’t appear in duplicate, use this bit of code on your second Wordpress loop:
[sourcecode language="html"]

<?php query_posts(‘showposts=8′); ?>;

<?php while (have_posts()) : the_post();

if (array_search(get_the_ID(), $do_not_duplicate) !== false)

continue; update_post_caches($posts);
?>;

CONTENT GOES HERE

<?php endwhile; ?>;

[/sourcecode]

The CSS:

[sourcecode language="css"]

/* FEATURED CONTENT SLIDER STYLES */

#wrapper{
width: 62.2em;
border: 0.1em solid #2b2b2b;
margin-bottom: 2em;
}

#slider {
margin: 0 auto;
position: relative;
}

.scroll {
width: 62.2em;
overflow: auto;
overflow-x: hidden;
position: relative;
background: #0e0e0e;
}

.scrollContainer div.panel {
padding: 1em;
width: 61.2em;
}

.format_text.featured_media{
margin-right: 1em;
float: left;
}

.format_text.featured_media a img{
width: 15em;
height: 12em;
}

.format_text.featured_text{
font-size: 1em;
float: left;
width: 35.5em;
}

.format_text.featured_text div.format_text.entry-content p{
margin-bottom: 0;
padding-bottom: 0;
}

#shade {
background: #000;
height: 9em;
border-top: 1px solid #333;
}

#shade.tall-shade {
background: #000;
height: 12em;
border-top: 1px solid #333;
}

ul.navigation {
list-style: none;
margin: 0;
padding: 0;
padding-bottom: 0.9em;
}

ul.navigation li {
display: inline;
margin-right: 0.8em;
}

ul.navigation a {
padding: 0.9em;
color: #000;
text-decoration: none;
float: left;
font-size: 1.25em;
}

ul.navigation a:hover {
background: url(images/arrow_down.png) no-repeat 50% 0%;

}

ul.navigation a.selected {
background: url(images/arrow_down.png) no-repeat 50% 0%;
}

ul.navigation a:focus {
outline: none;
}

.scrollButtons {
position: absolute;
top: 130px;
cursor: pointer;
}

.scrollButtons.left {
left: -13px;
z-index: 100;
display: none;
visibility: hidden;
}

.scrollButtons.right {
right: -13px;
z-index: 101;
display: none;
visibility: hidden;
}

.hide {
display: none;
}

span.thumbtitle{
display: block;
font-size: 1.3em;
text-align: center;
display:none;
}

img.scroller-thumb{
padding: 0.3em 0.4em;
border: 0.1em solid #2b2b2b;
width: 13.3em;
}

img.scroller-thumb-big{
padding: 0.3em 0.4em;
border: 0.1em solid #2b2b2b;
}

a.selected img.scroller-thumb{
}

[/sourcecode]

The post Design An Elegant Featured Content Slider for Wordpress appeared first on GoMediaZine.

]]>
http://www.gomediazine.com/tutorials/design-elegant-featured-content-slider-wordpress/feed/ 155
Wordpress Skinning http://www.gomediazine.com/tutorials/wordpress-skinning/?utm_source=rss&utm_medium=rss&utm_campaign=wordpress-skinning http://www.gomediazine.com/tutorials/wordpress-skinning/#comments Wed, 02 Apr 2008 03:52:53 +0000 Jeff Finley http://www.gomediazine.com/site-news/wordpress-skinning/ Something I enjoy doing and would like to be doing more of is creating custom Wordpress themes. I wouldn’t consider myself an expert, but I have managed to create a few themes so far for a few people. The theme you’re looking at now for the Go Mediazine was my very first theme I did… Continue Reading »

The post Wordpress Skinning appeared first on GoMediaZine.

]]>
Something I enjoy doing and would like to be doing more of is creating custom Wordpress themes. I wouldn’t consider myself an expert, but I have managed to create a few themes so far for a few people. The theme you’re looking at now for the Go Mediazine was my very first theme I did in 2006.

We hardly ever get requests for this type of work, so we don’t have a chance to really build up our portfolio and we’re looking for clients who need a new Wordpress theme designed and implemented. The most recent theme I designed was for mine and Kim’s wedding website. Yes the Kim that works here and answers all your Arsenal questions!

Wordpress Theme for Jeff and Kim's Wedding Website

http://www.jeffandkimwedding.com

If you’re interested in hiring us to design a theme, let me know. We might be willing to cut you a deal to get more of this type of work in our portfolio.

The post Wordpress Skinning appeared first on GoMediaZine.

]]>
http://www.gomediazine.com/tutorials/wordpress-skinning/feed/ 59
Create a Killer Band Site in Drupal – Part 6 – Additional Functionality and Resources http://www.gomediazine.com/tutorials/create-a-killer-band-site-in-drupal-part-6-additional-functionality-and-resources/?utm_source=rss&utm_medium=rss&utm_campaign=create-a-killer-band-site-in-drupal-part-6-additional-functionality-and-resources http://www.gomediazine.com/tutorials/create-a-killer-band-site-in-drupal-part-6-additional-functionality-and-resources/#comments Wed, 12 Mar 2008 17:03:47 +0000 Jeff Finley http://www.gomediazine.com/tutorials/create-a-killer-band-site-in-drupal-part-6-additional-functionality-and-resources/ This tutorial is another special series written guest author Sean Hodge from aiburn.com and Connection Cube. He is an expert in Drupal, which I am totally not familiar with. He intrigued me when he told me that the majority of the bands on Sony’s record label are powered by Drupal. Drupal is basically an open… Continue Reading »

The post Create a Killer Band Site in Drupal – Part 6 – Additional Functionality and Resources appeared first on GoMediaZine.

]]>
This tutorial is another special series written guest author Sean Hodge from aiburn.com and Connection Cube. He is an expert in Drupal, which I am totally not familiar with. He intrigued me when he told me that the majority of the bands on Sony’s record label are powered by Drupal. Drupal is basically an open source CMS, and I was interested in learning more about it. So that’s why he’s writing this tutorial for us. You can learn along with me!

Read the introduction – What’s Drupal and why?
Read Part 1 – Design it Illustrator
Read Part 2 – Slicing it Illustrator
Read Part 3 – XHTML
Read Part 4 – Theming Drupal
Read Part 5 – Drupal Admin

Introduction

In our last tutorial we covered the setup of our band website. We now have a brochure style site in place that could be used to promote GoBand or add community building functionality to. We’ll wrap up this series by looking at the resources Drupal has to offer to build on this foundation and extend what we have setup.

Front Page

Recommended Modules

There are a handful of Drupal Modules that will help any website. Here is a list with some explanation of what these modules do.

  • Views – Extends the functionality of Drupal by allowing you to reformat content based on a plethora of criteria and then present it on a page or within a block. For example you could show all work that an author created with a view. Views has a handy interface to help you out. This is one of the best modules out there and will likely be in the core of Drupal in the future.
  • Content Construction Kit (CCK) – Allows you to add form fields to content. Some of the core functionality of CCK was already moved into Drupal 5. The ability to add custom content types starting as part of CCK before migrating into Drupal Core. If you ever need to define custom fields for new content for your clients this is the set of modules to use.
  • Path Auto – Takes the Drupal default URL paths and allows you to make them readable automatically. There are options you can choose between that will change the path based on what you select. For example, if you want your blog posts to have URLs based on categories and page titles then no problem. This module can be set to do that.
  • Panels – Allows you to create pages that are divided into areas of the page. Very useful for creating columns within your layout that are added on top of your theme.
  • SimpleMenu – Adds a drop down navigation to the tip top of the page that works great for administering Drupal.

Simple Menu

Adding a Blog to the GoBand Site

First of all don’t turn on the Blog Module that ships with Drupal unless you want multiple blogs that tie together. It activates more than one blog and allows the mixing of authors posts on the front page of your site. This is overkill for 99 percent of blogs and will likely confuse you. It works great if that’s what you want to set up. But if you want a common Wordpress style blog then you don’t need to turn that module on.

If you want a standard kind of blog then just use Drupal Stories. Stories are another content item, other than page, that comes with Drupal. Or create your own content item for your blog. You can turn on the ability to leave comments on any content item in Drupal and viola you have a blog. Sure there is more to it than that in order to add some common blog functionality, but that gets you started.

Here are some links to resources for blogging with Drupal:

My Drupal Blog

Adding Other Community Features

There are many more community features in Drupal. The ability to run Polls and Forums are built in. There is a lot you can do with creating User Accounts and Permissions that is built into Drupal as well. There are some modules I haven’t used that are made for building communities in Drupal that you might want to research, for example Organic Groups. Its also possible to add Photo Galleries to your Drupal Website.

Its not possible to cover everything that Drupal can do and point to all its awesome resources. There is just to much. Drupal 5 has over 2000 modules. Drupal 6 is still freshly launched though in a few months it will likely have a staggering amount of resources. Below is a screenshot of the number of Modules available for different categories in Drupal 5.

Drupal Modules

When looking to add functionality to your Drupal site. Research modules well. Do this by searching the Drupal Forums and see what others recommend. You can also research the modules support requests. This will give you an idea on how well the module is maintained. Most Important! Test! Test! Test! Install them on your test site first to make sure they don’t break your site. Test to prove they solve your needs and are easy to work with.

More Drupal Resources

There are some great Drupal resources across the web and on Drupal’s website.

  • Drupal Handbooks – Are documentation on Drupal. There is a lot of information here to absorb and many topics. Take it one topic at a time.
  • Drupal Groups – This is an area to get involved with Drupal, meet Drupal people in your region, or follow topic based conversations.
  • Drupal 5 Themes – This is a new book on Drupal theming. I haven’t had a chance to open it up yet. Though I will. There are a number of books coming down the pipeline for Drupal this year. Its going to be a big publishing year for Drupal. I look forward to the book Selling Online with Drupal e-Commerce that will be out soon.
  • Pro Drupal Development – A comprehensive book on developing with Drupal. The Theme Chapter is freely available and an excellent resource.
  • Theme developer’s guide v5 and earlier – This is a good guide for working with Drupal 5 themes. Also, download some freely available themes to review from the Drupal Themes directory.
  • Drupal API – This will become a valuable resource after you start tinkering with Drupal code.

Lullabot

Lullabot is a development company that uses Drupal. They also teach Drupal. So, there are lots of quality resources on their site.

  • Lullabot Articles – The articles tend to be more advanced. They are a good resource for learning how Drupal functions.
  • Lullabot Podcast – The audio podcast is fun. The crew from Lullabot have a long running podcast here. They review different Drupal functionality, modules, interviews, and more.
  • Lullabot Videos – You can get the videos via a Video Podcast. They are targeted at beginning Drupal users. They have Videos on different Modules, Installing Drupal, and more.
  • Lullabot DVD’s (Coming Soon) – The trailer for this video series captures the feeling of struggling to understand Drupal well. The image below is from the video, and its funny, partly because its so true. Though keep in mind the space between “I suck” and “I kick ass” at Drupal is a big space and likely where most Drupal Designers will reside. Hopefully, you will get up to “I kick ass” with Drupal theming qickly and with less frustration than I went through.

Kick Ass with Drupal

The Drupal Dojo

The Drupal Dojo is a training ground for learning Drupal. If your a coder there are lots of lessons here for you. Drupal Ninja coders, individuals with extensive experience with an aspect of Drupal, or Drupal site administrators donate their time to the Dojo. There are prerecorded and live screencasts. You can sign up and participate in the live screencasts. The Sensei running the screencast for that week gives a presentation and those participating ask questions and follow along.

Drupal Dojo

Most of the lessons are geared toward learning to become a proficient Drupal Coder. Not all are aimed solely at this group of programmers though. There are sessions dedicated to theming and community building as well. Below is a list of some of these lessons.

When to Jump to Drupal 6

This tutorial series covered Drupal 5. In the middle of the publishing cycel of this tutorial series Drupal 6 was released. This is a good thing. You haven’t lost anything by learning about Drupal 5. Sure there will be some differences in the new version, but its still Drupal.

If your making a website today should you make it in Drupal 5 or Drupal 6? This is an important question. Until Drupal 6 has been out for about 6 months it will be unlikely that it will fulfill our your sites needs. It takes time for the contributed modules to be available for the newest release of Drupal. Of course it feels great to play with a new toy. I can’t wait to start playing with Drupal 6. But realistically you should write down your sites goals and see if what you need is available.

Drupal 6

Also, documentation for Drupal 6 will take time. Existing resources for Drupal 5 are vast. This includes tutorials, books, modules, code, and lots of forum discussions. I recommend downloading Drupal 6, installing it locally, and playing with it. Get a feel for it. Then when a project comes along that is the right fit go for it. Otherwise, keep using Drupal 5.

In the new release the core system has been improved. I can’t wait to install a copy of Drupal 6 to play with. I’m curious how much jQuery has been integrated into the interface. The jQuery library comes with Drupal by default and each release more javascript and ajax goodness gets into Drupal.

The Drupal 6 release announcement has some great information about what new features are available in the new Drupal. Some of the resources about learning Drupal 6 are available on that page. Do check to see what the most recent release candidate is when you Download Drupal 6 though. New minor releases come out regularly to fix critical bugs and security issues that are found. You want to make sure you always have the most recent Drupal release version. There is always a link to the most recent Drupal version on the homepage of Drupal. Below is a an image of a screencast from Lullabot about Installing Drupal 6.

Drupal 6 Install Video

Some Drupal 6 Resources to Get You Started

Final Bits of Advice

  • Always use test sites.
  • If you’re tempted to start hacking Drupal’s core code don’t. Instead, step back and do some research on how Drupal’s system of overrides works.
  • Get involved in the Drupal community. Respectfully interact with other Drupalers. When posting to the forums you’re likely to get great advice, but remember the advice is from someone donating their time to help you.
  • Have some fun with Drupal!

Tutorial Series Review

Below is a summary of the ground covered in this tutorial series:

Conclusion

In this 6 part series on Creating a Killer Band Site in Drupal we covered a lot of ground. We followed the process from design, XTHML/CSS coding, Drupal theming, installation in Drupal, and finally Drupal extendibility. The goal of this series was to get you on your feet with Drupal so you can hit the ground running and start creating Killer sites.

Remember each site you build in Drupal, each conversation you participate in on the Drupal forums, and each line of code you write will build your knowledge just a little more about how Drupal works. Try not to get intimidated, but rather look at one piece of the puzzle until you understand that. Then connect it to another piece. And then another piece. And Before you know it you’ll be seeing the big picture and making Killer sites.

Drupal is a powerful set of tools. It can be used to build great community sites. Whether the communities you’ll be building will be for rock bands or for something else is up to you. Good luck.

Read the introduction – What’s Drupal and why?
Read Part 1 – Design it Illustrator
Read Part 2 – Slicing it Illustrator
Read Part 3 – XHTML
Read Part 4 – Theming Drupal
Read Part 5 – Drupal Admin

The post Create a Killer Band Site in Drupal – Part 6 – Additional Functionality and Resources appeared first on GoMediaZine.

]]>
http://www.gomediazine.com/tutorials/create-a-killer-band-site-in-drupal-part-6-additional-functionality-and-resources/feed/ 160 grunge,tutorial,web This tutorial is another special series written guest author Sean Hodge from aiburn.com and Connection Cube. He is an expert in Drupal, which I am totally not familiar with. He intrigued me when he told me that the majority of the bands on Sony's rec... This tutorial is another special series written guest author Sean Hodge from aiburn.com and Connection Cube. He is an expert in Drupal, which I am totally not familiar with. He intrigued me when he told me that the majority of the bands on Sony's record label are powered by Drupal. Drupal is basically an open source CMS, and I was interested in learning more about it. So that's why he's writing this tutorial for us. You can learn along with me! Read the introduction - What's Drupal and why? Read Part 1 - Design it Illustrator Read Part 2 - Slicing it Illustrator Read Part 3 - XHTML Read Part 4 - Theming Drupal Read Part 5 - Drupal Admin Introduction In our last tutorial we covered the setup of our band website. We now have a brochure style site in place that could be used to promote GoBand or add community building functionality to. We'll wrap up this series by looking at the resources Drupal has to offer to build on this foundation and extend what we have setup. Recommended Modules There are a handful of Drupal Modules that will help any website. Here is a list with some explanation of what these modules do. Views - Extends the functionality of Drupal by allowing you to reformat content based on a plethora of criteria and then present it on a page or within a block. For example you could show all work that an author created with a view. Views has a handy interface to help you out. This is one of the best modules out there and will likely be in the core of Drupal in the future. Content Construction Kit (CCK) - Allows you to add form fields to content. Some of the core functionality of CCK was already moved into Drupal 5. The ability to add custom content types starting as part of CCK before migrating into Drupal Core. If you ever need to define custom fields for new content for your clients this is the set of modules to use. Path Auto - Takes the Drupal default URL paths and allows you to make them readable automatically. There are options you can choose between that will change the path based on what you select. For example, if you want your blog posts to have URLs based on categories and page titles then no problem. This module can be set to do that. Panels - Allows you to create pages that are divided into areas of the page. Very useful for creating columns within your layout that are added on top of your theme. SimpleMenu - Adds a drop down navigation to the tip top of the page that works great for administering Drupal. Adding a Blog to the GoBand Site First of all don't turn on the Blog Module that ships with Drupal unless you want multiple blogs that tie together. It activates more than one blog and allows the mixing of authors posts on the front page of your site. This is overkill for 99 percent of blogs and will likely confuse you. It works great if that's what you want to set up. But if you want a common Wordpress style blog then you don't need to turn that module on. If you want a standard kind of blog then just use Drupal Stories. Stories are another content item, other than page, that comes with Drupal. Or create your own content item for your blog. You can turn on the ability to leave comments on any content item in Drupal and viola you have a blog. Sure there is more to it than that in order to add some common blog functionality, but that gets you started. Here are some links to resources for blogging with Drupal: Akismet Module - Is a great way to catch spam. Feedburner Module - Allows you to organize your output RSS Feed and track subscribers. Digg This Module - Adds the common Digg button to your blog that allows users to easily Digg the post. Gravatars allows the ability for user Gravatars to be enabled on your site. Service Links Module - Adds quick linking social tags that allow users to submit the post to popular social networks. Single user blog - basic - Is a post on Drupal about creating a single user blog. Go Media no
Create a Killer Band Site in Drupal – Part 5 – Drupal Admin http://www.gomediazine.com/tutorials/create-a-killer-band-site-in-drupal-part-5-drupal-admin/?utm_source=rss&utm_medium=rss&utm_campaign=create-a-killer-band-site-in-drupal-part-5-drupal-admin http://www.gomediazine.com/tutorials/create-a-killer-band-site-in-drupal-part-5-drupal-admin/#comments Wed, 05 Mar 2008 15:54:36 +0000 Jeff Finley http://www.gomediazine.com/tutorials/create-a-killer-band-site-in-drupal-part-5-drupal-admin/ This tutorial is another special series written guest author Sean Hodge from aiburn.com and Connection Cube. He is an expert in Drupal, which I am totally not familiar with. He intrigued me when he told me that the majority of the bands on Sony’s record label are powered by Drupal. Drupal is basically an open… Continue Reading »

The post Create a Killer Band Site in Drupal – Part 5 – Drupal Admin appeared first on GoMediaZine.

]]>
This tutorial is another special series written guest author Sean Hodge from aiburn.com and Connection Cube. He is an expert in Drupal, which I am totally not familiar with. He intrigued me when he told me that the majority of the bands on Sony’s record label are powered by Drupal. Drupal is basically an open source CMS, and I was interested in learning more about it. So that’s why he’s writing this tutorial for us. You can learn along with me!

Read the introduction – What’s Drupal and why?
Read Part 1 – Design it Illustrator
Read Part 2 – Slicing it Illustrator
Read Part 3 – XHTML
Read Part 4 – Theming Drupal
Read Part 6 -Wrap Up and Additional Resources

Introduction

In our last tutorial we created our Drupal Theme Files. Now we are going to get familiar with the Administration of Drupal and set up our GoBand website.

Review

For review Lullabot has a good video on Installing Drupal 5. The video has you setup your first user account and change the password. This is really important in Drupal. The first user account is the super administrator. So don’t loose that login as its real important. Also, we should have our theme files installed from our last tutorial. If you need to, then download a copy of the final Goband Theme files. Place them in the sites > all > themes directory in Drupal.

Garland Default

Below is the default Administration screen in Drupal. Notice the warning message in the red box. This is nothing to be alarmed about. Let’s take care of that. Click on the status report link within that box.

Garland Admin

We covered this in a previous tutorial, but lets make sure you have the Files folder installed. Make sure your move the files folder we created into the root Drupal install directory.

Files

Once you make a choice for Cron and have your Files folder installed in your root directory you’ll get a good green status report.

Status Report

Turn on Our Unique GoBand Theme

In the default theme Garland you have a few ways to get around the Administration area. On the left is one option. You’ll also notice the breadcrumbs at the top of the main column. If you go to the administration page you’ll also see that you can view all your administration options by task or module.

Admin Navigation Options

Before we turn on our GoBand theme we need to make sure our navigation is set up correctly for the theme. There are no breadcrumbs set up in the GoBand theme and there is only a right sidebar and not a left. So, if we don’t turn set our navigation for the GoBand theme to the right sidebar we’ll be a little lost when we turn the theme on.

Go to Administer > Site Building > Blocks. Click on goband settings. You’ll get a preview of the Administration area of our GoBand Theme. Under the regions column set the Navigation to right sidebar and click Save blocks at the bottom. This makes it so that our theme will have a navigation when we turn it on.

Right Sidebar

Notice how the right side has the Winged Chick Icons. This is not needed for the administration area. So, lets add the code circled below to our theme. After adding this code to your style.css file your results will look like the sidebar in the image above.

Remove Wing Chicks

In the navigation, that just got moved to the right, click on Themes. Now as long as you have your theme files for GoBand installed it will be pretty hard to miss the green chicks with wings image, and the bright green GoBand Text. The other themes come with Drupal 5 by default. In the image below we can see that we are still have Garland as our default theme.

Set Theme to GoBand

Now lets turn on our GoBand theme. Select Enabled and Default radio buttons next to the GoBand Theme. Then at the bottom of the page hit Save configuration. Afterwards, your results should look like the image below.

GoBand Theme Enabled

Let’s change another settings in the Theme before we move on. Click Configure top left below the page title. Uncheck Logo in the Toggle Display column. This is because we don’t have a logo setup. The logo is part of the header image. Then at the bottom of the page hit Save configuration.

Let’s Turn On a Couple of Modules

Go to Administer > Site Building > Modules. Anything set to Enabled already go ahead and leave it that way. Do check Enabled for Path and Search and click Save configuration. We’ll be using both of these modules shortly.

Initial Modules Enabled

Enable Our Search Form

Go to Administer > Site Building > Themes > Configure. This will configure the global settings for our themes. Check off Search in the Toggle display column and hit Save configuration. That’s it. We already have the search set up in our theme. So, all you had to do was enable the module and then turn it on in the theme.

Enable Search

Create Our Home Page

In our Administration Navigation on the right click Create Content. Then click Page, as that is what we are making. Start out by entering our Title and then place the content of our Body. You’ll recognize the content from our Main content section in our HTML from the third part of this series. I set my Input Format to PHP code as this means none of the HTML will get automatically converted. Though if you like the auto conversion certainly try a different setting.

Home HTML

Next we insert our Menu Title as Home and set our Description. We want this to be a part of our Primary links. It will be the first one so give it to a Weight of 1. Set our URL path settings to home. Under Publishing Options check off Published. Then click Submit. Congrats, you’ve just made your first page in Drupal. Next we want this page to show up on our home page.

Home Menu Settings

Go to Administer > Site Configuration > Site Information. Then set the Default front page to Home. While we are here drop in the HTML for our footer under Footer message and hit Save configuration.

Site Info Home

Now check that the home page is correct and that the footer message is showing up. Your Home Page should look like the image below so far.

Home Page

Now Let’s Create Our Other Pages

Go to Create Content > Page. For the Title use About GoBAND and drop some Lorem Ipsum in for the Body content. For the Menu Settings Title enter About. Give it a Description of About GoBAND. Set the Parent Item to Primary Links. Set the Weight to 2. And the URL path settings to about. Check off Published and hit Submit. Then go ahead and follow a similar process for the Blog, Booking, and Tour Schedule Pages.

About Menu Settings

Create Some Sample Sidebar Content

Go to Administer > Site Building > Blocks. Then click on Add Block in the top left hand corner of the main content area. Give it a Block description of Sidebar. Then drop in our sidebar content from our HTML file. Select an Input format and hit Save block.

Block Sidebar Settings

Now we are back in our blocks area. Give the Sidebar a Region of Right Sidebar and a Weight of 1. Give our Navigation a Weight of 9 to push it down. The hit Save block.

Block Sidebar Setup

Create Links Up Top

Go to Administer > Site Building > Menus. Then click Add menu in top left of the main content area. Give it a title of Top Nav and hit Submit. Under our newly constructed Top Nav menu click Add item. Fill in the Menu item to point to the front page and hit Submit. See image below.

Top Menu Add Item

Repeat this process for another sample Link for the Top Nav.

Top Nav Admin

Next we need to go to Administer > Site Building > Blocks. In the Region column set Top nav to top nav and click Save blocks.

Top Nav Block

Now click on configure for Top nav. For the Block title put <none>. Then click Save blocks. This will get rid of the Top Nav title that we don’t want to show up top.

Top Nav Block Title None

Set Access Control

Go to Administer > User Management > Access Control. This is an important and useful screen to review. If you were to log out you would notice that Search doesn’t show up. That’s because by default it won’t show up for Anonymous Users. Check off the boxes in the image below and then hit Save permissions. Spend some time reviewing the different options on this page. If you want to create new roles for different users its easy to do that and then set permissions for them here. Though that’s beyond the scope of this tutorial.

Search User Access

After allowing access to the Search we are almost done with this setup. Below is how the site now looks to an Anonymous User to the site.

Front Anonymous

Setting Up One Columns

Go to Administer > Site Building > Blocks. In the Sidebar row click configure. At the bottom of the page insert the user page instructions into the Pages window as shown below. Then hit Save block. This tells Drupal not to display the sidebar on those pages. So we end up with one column and not two for those pages.

Sidebar Block User Pages

We have already set up the our theme to recognize when there is only one column so it displays correctly automatically, see sample below.

Login One Column

Enable Clean URLs

Enabling Clean URLs will remove some unsightly characters from the URL: “?q=”. Go to Administer > Site Configuration > Clean URLs. First click on Run the clean URL test. If you were successful you’ll see the message below. Then select Enabled and click Save configuration. Now the ugly “?q=” characters have been cleaned from your pristine URLs.

Clean URLs

Conclusion

We’ve set up the GoBand website, which is awesome. Bask in the spotlight of your first Drupal success. This site is a solid foundation that could be used to promote the band and build a community with. We’ll conclude this series in the final edition by giving you lots of excellent Drupal resources. So stay tuned as it will be out shortly. In it we’ll give you further advice on growing your Druapl based site that will keep it Rockin’.

Read the introduction – What’s Drupal and why?
Read Part 1 – Design it Illustrator
Read Part 2 – Slicing it Illustrator
Read Part 3 – XHTML
Read Part 4 – Theming Drupal
Read Part 6 -Wrap Up and Additional Resources

The post Create a Killer Band Site in Drupal – Part 5 – Drupal Admin appeared first on GoMediaZine.

]]>
http://www.gomediazine.com/tutorials/create-a-killer-band-site-in-drupal-part-5-drupal-admin/feed/ 51