Web Design Tips and Trends

Facebook Landing Page

2010-03-15T14:06:00.000-07:00

Facebook Landing Pages tutorial on Mashable.

Facebook () is known for its uniformity. You can post all sorts of content, but the actual design and layout of your profile is the same as everyone else’s.

Free Web Icons!

2009-08-05T07:40:00.000-07:00

40 Free And Useful GUI Icon Sets For Web Designers

"Icons are everywhere in a website and their primary purpose of guiding and giving out information to visitors is a highly important one. Other than words themselves, these little graphics within a website that tells you how you can move to the next page, cancel a transaction, checkout the cart and the likes, basically the entire navigation. In a general sense, they act as symbols that allow easier and smoother communication between the webpage and the person interacting with it."

Glazer Kennedy Insider's Circle Event

2009-07-29T06:46:00.000-07:00

Encore Creations and evolveALOUD will be presenting on the latest methods using business event marketing, social media, online video and online reputation management in one powerful and synergistic force to evolve YOUR marketing!

Host:	evolveALOUD
Type:	Meetings - Business Meeting
Network:	Global

Date:	Wednesday, July 29, 2009
Time:	11:30am - 1:30pm
Location:	Orlando Chamber of Commerce 32804
Street:	75 S Ivanhoe Blvd
City/Town:	Orlando, FL
	View Map

Email:

info@evolvealoud.com

Learn more on Facebook

Watch the Video

Three online video formats for the future | The Industry Standard

2009-07-20T05:36:00.001-07:00

Three online video formats for the future | The Industry Standard

Posted using ShareThis

Video Optimization

2009-07-15T08:18:00.000-07:00

The following is a list of tips from an article published on http://ask.enquiro.com/2007/how-can-i-optimize-my-videos/.

Video Optimization Best Practices and Tips

Make sure that your video clips are relevant and informative – For starters, ensure that your video provides useful and informative information. Videos that demonstrate step by step procedures are great, videos that express an opinion about a specific topic can be useful too. Videos that have nothing to do with your brand or service offering or are general or vague in nature will just confuse your audience. Save the viewer the trouble and don't just upload a video for the sake of uploading a video.
SEO Video Optimization Fundamental Tip #1: Give your video a Catchy Title – Video can be used to bring visitors to your site. One way to get users to view your video is to give it a catchy title that contains a related key phrase that is relevant to your product, service or brand.
Use Video as a Portal to other Content on Your Site – Upload a couple of videos to portals like YouTube and provide links back to related content and other videos on your site.
SEO Video Optimization Fundamental Tip #2: Optimize your video for Important Key Phrases – You might want to optimize your video for terms users are likely to be searching for. Tag your video with these terms, consider naming the file name of the video with these terms in mind.
Provide Transcripts of your Videos – Good old HTML content is still a favorite with the search engines. If you want your video to rank well, you need to give the search engines something to index and rank. Surround your videos with onpage copy that can be indexed by the search engines.
Keep Your Videos to five minutes or less – there is nothing worse than a boring video that goes on an on. If you have video content that is of long duration, consider breaking it up into smaller pieces and tag each accordingly. Not only does this make for better viewing pleasure, it also keeps the user looking for more.
Make use of a Video Sitemap – For video that is native to your own website, make sure that users and search engine spiders can find your video content. The easiest way to do this is through the use of a video sitemap on your site. Use important keywords in the anchor text links to your videos featured on your video sitemap.
SEO Video Optimization Fundamental Tip #3: Tag Your Videos – tag your videos with key phrases that are reflective of the content.
Brand your Video with your Logo – Video is a great tool to generate brand awareness with your prospects. Take advantage of this by incorporating your brand in your videos.
SEO Video Optimization Fundamental Tip #4: Remember Inbound Linking Factors – Link to videos using important keywords in anchor text.
Offer the Option to Embed Your Video – allow other users access to the coding that will allow them to embed your video on their website or their blog. Think viral marketing
SEO Video Optimization Fundamental Tip #5: Add Descriptive Meta Data – optimize your video for relevant keywords and include a keyword rich description of your video content.
Allow Users to Rate your Video – videos that receive higher ratings from users are the ones that users tend to favorite and save. You can bet that the search engines will pay attention to this when ranking these videos.
Syndicate Your Video – Submit your video to RSS and syndicate your videos.

More on RSS and Blog Feeds!

2009-07-15T06:19:00.000-07:00

A previous post on RSS Feeds needs to be updated with new findings. The previously linked article is a good resource for creating your own RSS pages using Dreamweaver, but not the easiest way to include a Blog Feed on your website.

Upon further investigation, it turns out that Google's FeedBurner provides all the tools I was looking for. Headline Animator and BuzzBoost will generate code that can be used on your site or any social network. Headline Animator can be customized by uploading your own background image. The size of the uploaded image will define the size and appearance of your feed.

BuzzBoost provides more options for the content shown in the feed, but does not allow a background image to be supplied. It will use your site's existing CSS to style the blog feed.

In order to get started, sign up for FeedBurner and register your blog. All the options are provided in different tabs.

Emerging Internet Technologies for Education

2009-07-15T06:05:00.000-07:00

A colleague of mine writes an interesting blog on technology in the classroom.

He continually provides new information to anyone interested in new media and education. I've inserted a preview of his latest blog post, and a link to the entire blog.

Read the Full Story

"These inspiring, insightful videos make the case for stepping up the integration of technology in today’s classrooms"

"As an advocate of the use of Internet technologies in education, my fundamental goal is to inspire instructors and other members of the educational community to embrace the use of these technologies in today’s educational process. I’ve attempted to make the case myself in a couple previous blog posts, such as the popular 5 Reasons Why Educators Need To Embrace Internet Technologies and 10 Internet technologies that educators should be informed about. Of course, many others have made the case as well (and generally done so in a more captivating manner)as the videos below will attest."

- Kelly Walsh, Faculty Member at College of Westchester

Create an RSS Feed

2009-07-09T06:08:00.000-07:00

Ever wonder how to create an RSS Feed on your website? Here's a nice tutorial using Dreamweaver 8 or CS3.
Feed Tools in Dreamweaver 8 and CS3: RSS and XSL.
RSS or Blog Feeds can be a valuable addition to your website, whether it is personal or business. Blogs create an outlet for your personal voice and opinions, and also can be an important part of your website's optimization and page ranking. Why not maximize blog exposure by adding it to your site?

Use Photoshop to Design Your Site!

2009-06-30T11:21:00.000-07:00

PSD to XHTML

It really demands hard work and time to Design a great looking website layout in Photoshop to make it ready to get coded. Now when it comes for coding its really tough to code a well designed photoshop mockup specially to make it browser compatible as coding (css/xhtml) standards changing day by day. Today I would like to share with you guys some great tutorials on converting a PSD to HTML / XHTML specially for beginners and intermediate learners to advance there coding skills.

Adobe InContext Editor

2009-06-22T08:26:00.000-07:00

Adobe's new content editing feature, InContext Editor, looks like it will be a very useful tool for online, live editing of websites. Web clients can update their own content as defined by the Web designer/developer. I'm excited to test this feature with some existing clients, as well as begin to offer this live service to potential new clients! And, best of all, IT'S FREE!!

Easily update web content online

"Let content contributors make website edits so you can focus on design. The Adobe® InContext Editing online service makes web content maintenance easy for designers and content editors alike — no software installation or training needed. Web designers can maintain the design integrity of their sites while enabling clients to make their own web updates from virtually any major browser."

Adobe.com

Demo Reel Tips

2009-06-08T05:59:00.000-07:00

I was talking to a Project Management class about Demo Reel creation, and remembered a great tutorial that a coworker had shared with me. This is a four part instructional video on demo reels done by an animator for PIXAR. Click the image to start the demo.

Avatars!

2009-06-03T06:57:00.000-07:00

Best Profile Picture/Avatar Ever

"One of the most important parts to Online Reputation Management and Social Media probably is the least focused part most of the professional’s online presence. The Avatar, or profile picture is your signature.

It should not only represent you but you should represent it. What does that mean? When we talk about Authentic Web Marketing, if your image sends a message too far away from who you really are it can send mixed signals online and cross currents in for real world encounters.

Every Tweet, every Facebook update, and now with Facebook connect and Google Profiles, every comment carries your Avatar. Each post not only exposes it more but also reinforces the brand that is you."

-Ian Garlic

Creative Business Cards

2009-05-21T06:11:00.001-07:00

Unusual Business Card Designs.. There are some really interesting card designs listed in this article.. Get noticed!

Effective Business Cards

Gradients

2009-05-18T09:49:00.000-07:00

sixrevisions.com — Using color gradients, or effects that transition two or more colors with one another, is one of the most popular design techniques in web design. They're easy to create yet hard to get right. In this showcase, you'll witness some of the best examples of using color gradients in the hopes of inspiring you in your own designs

Gradient Use in Web Design

Creative Logo Design

2009-05-13T06:10:00.000-07:00

"As designers, we are always in constant need of inpiration. Whether it be Web or graphic design, other work to fuel our creativity is essential. Logo design requires the most amount of inspiration, however.

Below we present a showcase of 50 beautiful, clever and creative logo designs that will hopefully inspire you. If you take a closer look at the showcase below, you will notice many trends. Some of these include the usage of simple shapes to create something complex, origami shapes, coloring and transparency trends, and many more." - Matt Cronin

Creative Logo Design

Blog Directories

2009-03-25T07:17:00.000-07:00

Directory listings are great way to expose your website or blog. You can add your listing to one or to many different directories depending on the the type of site and on the directory specifications. Some directories are free, some require a monthly fee. It may be worth the expense to add your site to a paid directory if it will incresase traffic to your site! Search google for industry specific directories or general directories. Links to your site from multiple places will increase your ranking on search engines. Search Engine Optimization or SEO is extremely important to the success of your website. Hiring an expert in website optimization is a great way to get started!

A few blog directories to check out:

http://www.digg.com/

http://www.bloghub.com/

http://www.bloggopedia.com/

http://www.blogorama.com/

Twitter and LinkedIn are also great resources to network your blog or business:
http://www.twitter.com/
http://www.linkedin.com/

Loading...loading....loading...

2009-03-23T08:35:00.000-07:00

Flash content can be eye-catching and dynamic.. but what if it just won't load fast enough! Will a viewer stay on your page if the content doesn't immediately load? Sometimes yes, sometimes no. I will share a few tips to make your Flash content load faster..

The first two options relate to Flash content that contains rasterized images like .jpg's. I've borrowed these from a site called http://www.sitepoint.com/article/steps-faster-flash.

Change the JPG setting of your images:
Open up your library by hitting CTRL + L, and locate your imported .jpg. Right-click on it and go to properties. Uncheck 'use imported JPEG data' and you'll find that you can adjust the image quality. You will have to play with the quality setting until you find a happy medium of appearance vs. file size. I always adjust this setting -- it alone can make a huge difference to your file size.

Load Images Dynamically
A great new feature of MX is that it gives you the ability to load .jpg graphics dynamically. This is achieved in the same way you would load an external .swf -- using the loadMovie() action. Add a MovieClip to the stage and give it and instance name of "imageholder". Then add the following actionscript to a keyframe:
loadMovie("name_of_jpg.jpg","imageholder");
Warning! Progressive JPEG images do not appear when loaded dynamically using the loadMovie action.

Re-use Symbols and Instances in Flash
You have the option to create symbols, movie clips, and graphics that can be added to your library and re-used throughout your project. If you are using multiple instances of the same object, then the browser only has to load that symbol once, regardless of how many times it has been placed in your movie. If you need to alter a symbol, use the Break Apart command, and then you will be able to make adjustments to it.

Smoothing
If you are having a problem with pixelated images, you can try using the smooth option under the settings for your raster graphic. In the Library, right click on your image and choose properties. When the window pops open, there will be a check box for "smooth". If you click on this option, Flash will smooth out any issues with pixels that your movie has had.
**Note that this is not a good option to use if you are trying to show a high resolution image as it will soften the appearance.**

Adjust Export Settings
When exporting your .swf file from Flash, go into the settings and make sure that the quality is set properly. Most times, you don't need to have web content set to 100%. This will somewhat reduce your file size. Also remember to check on audio and playback settings.

Google Search
There are constantly new changes being made to internet technology. On occasion I would recommend a thorough google search for any new tips that might be circulating out there!

Bad Web Design!

2009-03-19T07:57:00.000-07:00

As a designer, one hopes to create eye-catching and innovative design, fully functioning, dynamic websites, and thought provoking animation.

An artist hopes NOT to show up on the following website: http://www.webpagesthatsuck.com

Take a look at the lists of bad web design going back 13 years. I've used it as a resource in classes before undertaking a lesson on web design.

A site that is badly designed or uses confusing navigation could wind up on this site. I've actually noticed a few beautifully design sites listed that have ridiculous and confusing navigation.

Just because you know how to create a floating, blinking drop down menu that grows flowers and talks, doesn't mean that you should.

Intake Forms

2009-03-12T06:12:00.001-07:00

Creating a contact form to use on your website is a great way to collect information from potential clients. Rather then simply listing your email address or phone number, the contact form will require the user to enter important information like name and number, and also give the option to ask for extra info like comments or questions. The simplest way to create a form will require the viewer to send the email themselves, while using a .php file to send your form will automatically send you the information as soon as the send button is pressed.

Don't know PHP? Don't worry, there are many websites available that will create your form and the PHP file for free! With a few alterations to the .php file, you can customize your form and add extra intake fields.

For example, I use a site called The Site Wizard to create forms. It will quickly generate a form to use, but has limited intake information. You will need to create an extra .html page to use for your ERRORS and THANK YOU pages after someone hits send. If you need to add extra, customized information, then you can copy and paste the existing form lines, and change the name or question. After you do this though, you must alter the .php file so that the new lines get sent. Basically, read over the PHP and everytime you see a line that refers to one of the intake form boxes, duplicate that line and change the name to match your new box. For example, if there was orginally Name, Address, Email, and Phone, but you added Comments, then you would need to find everywhere in the PHP that Name, Address, Email, and Phone are listed, and create a new line for Comments. If you don't alter the PHP, and only the form, then the new info you have added will not be sent to you in the email.

It might help to read up on PHP before you tackle it, unless you have experience with other programming languages and HTML.

Work for Hire!

2009-03-11T08:08:00.000-07:00

Starting a business can be tricky, especially in the creative fields. There are some industry standards, but many artists have very individual styles and ideas about how a company should operate. Common things to think about are pricing, strategy, and marketing. Some of the hidden topics include taxes, bank accounts, payroll and billing. It's a lot to think about, but there are resources aplenty!
There are many books on all of these issues available. One that I recommend and also seems to be an industry favorite is "Graphic Artist's Guild Handbook: Pricing and Ethical Guidelines". It includes sample forms, invoices, contracts, and also has detailed pricing guidelines (and its not just for graphic design!). The pricing guides are extremely helpful when quoting a new client. You can also use it to show sample rates and comparisons. A quick search on Amazon will turn up hundreds of books to get you started.

A few tips can be extremely helpful when going into business on your own. I'm going to share from my own experience as well as the experiences of friends in the industry.

When thinking about a business strategy, you should start simple. If you know how to do 100 things, it will be hard to market yourself initially. Choose your strongest skills to focus on.

When it comes time to advertise, make sure that you have a functioning website. I have a few other blog posts available that give tips on web design. Simple navigation is probably best and be sure to use SEO (Search Engine Optimization) to get your site found! Word of mouth is probably the best advertising when starting out, but try other methods as well. List yourself on Facebook, Myspace, Craigslist, etc. Try to attend business related functions in your area to pass out cards. Send out mailers or emails to potential clients. You can also cold-call directly to the businesses you want to target.

If you are setting up a new business you will need to decide on the type. Be it LLC or INC for example, then you would want to register with your state (a quick search on google will bring up the appropriate website). Once you have registered your business, you can apply for a Tax ID number. You'll need this tax ID number to start a business bank account. It will look a lot more professional to use a business name and documents rather than sending invoices and checks with just your name and home address listed. It will also help you at tax time!! I've noticed that most banks have a lot of tools available to their business account holders, such as accounting and payroll.

Most of all, your new business is going to take hard work and maybe even a little bit of luck. Start yourself off right, and then work toward your goals!

Realistic Vector Art

2009-03-09T13:00:00.000-07:00

Vectors vs Rasters is an argument that is most often quickly solved. Are you designing with photos or simple graphics? Are you creating a poster or a business card? Do you like using Photoshop or Illustrator?
All of these questions are related to the Vector vs Raster debate, and deal primarily with style preferences. If you're designing a logo, business card, or clean edged graphic, then most likely, you'll want to use vector based software like Adobe Illustrator. If you want to use photo-realistic images or need advanced layering and filters, most like you'll used raster/pixel based software like Adobe Photoshop. But... what if you want to photo-realistic quality you get from Photoshop, with the scalability and clean lines of vector art? This is where realistic vector art can help.
Using the Gradient Mesh tool in Illustrator, you can assign colors to points on an object that will automatically blend together, creating a customized and detailed gradient. The more time spent color each individual point on your object, the more realistic the final outcome will look. Results have the potential to trick viewers into believing they are looking at a photograph rather than a vector image, and the image can be scaled as large as desired without losing any quality like a rasterized image would.

Description: Vector graphic containing a highly detailed gradient mesh that resembles a photograph
Advantages: Vector graphics will never look pixelated, can be scaled infinitely larger, and will preserve a clean, crisp feel

The link below shows a variety of samples of realistic vector art. Click on the "Outline" option to see the mesh.

Realistic Vector Art Samples

Sample Art above by Adalynn Martinez, a Multi-media student in my Digital Illustration class

No Flash Player!!

2009-03-05T10:25:00.000-08:00

It can be very frustrating as a web designer to create amazing Flash content, only to find out that many of your viewers do not have Flash installed. There are a couple ways to get around this.

1. If you have a site that is completely designed in Flash, then you will need to use the javascript option listed below. The reason for this, is that unless you want a single image to replace your entire site, you will need to redirect the user to an alternate page that does not contain Flash. This option creates more work for the designer/developer because you'll actually be constructing two separate sites.. one for Flash, and one for HTML alone.

2. This second option works well for any site that has Flash content only as a header, or other singular part of a site. The majority of the site in this example should be HTML, with limited Flash content added. This technique uses a line of HTML code that will swap the Flash content for an image anytime that a Flash Player is not detected.

Links and Code for Flash Detection:

(Also try searching Google.com for Flash Player detection)

Adobe Flash detection kit

Flash detection script for Javascript or HTML

Chick-fil-A

2009-03-03T07:46:00.000-08:00

It has been a subject of conversation several times since I've moved up north. In Florida growing up, Chick-fil-A was always a treat during trips to the mall. Eventually the fast food chain branched out with individual drive-thru restaurants all along southern highways. (I've actually held out for hours on road trips just to find one) Anyone I've met up north who has visited a Chick-fil-A, always remembers it fondly as "The bet fast food ever!". While the food stands alone, the advertising the company uses also proves very effective and memorable. Most people who have visited the restaurant are sure to remember the black and white cows promoting "chikin" as an alternative to the burger chains. Humanizing the cows with their "Eat Mor Chikin" signs immediately conjures the smell and taste of a Chick-fil-A sandwich, or waffle fries. The branding works and is immediately identifiable to anyone from the south, or to anyone who has ventured off the highway. Another thing that I have noticed, is that while the advertising has changed over the years, the original logo has not been modified. It remains a red beacon signifying wholesome, southern food on the go. The style of the scripted logo is reminiscent of a 50's diner, or maybe a neon sign. It works alone or is effectively placed into all of the company's modern advertising campaigns. Recently, the Tropicana orange juice company tried to recreate their branding and logo. They met with vehement complaints and emails in response to the new campaign. While the new packaging was pleasing to the eye, it did not retain any of the former elements that the public had associated with the brand, such as the orange with a straw in it. Perhaps their campaign would have been more successful if they had kept some of the classic elements of their brand similarly to the Chick-fil-A logo positioned along with the cows.

Video on the Web

2009-02-23T07:59:00.000-08:00

Video on the web seems to get more and more popular every year (or maybe even every week). Nearly everyone that has ever been on the internet knows about youtube.com, and probably also about the ability to post video onto social networking sites like facebook.com and myspace.com. These are good resources to share videos, but what if you need professional quality, streaming video embedded right onto your website?

This is the question I'm looking to answer.. There are many video players out there that can be embedded into a website, but most of these seem to be expensive and some are difficult to use. Are there any FREE video players for the web that can be embedded on your site AND still look nice/play properly/etc? Youtube works fairly well, but your website is transformed into an advertisement for youtube. There are ways to embed an .mov or .mp4 directly into your webpage, but it can be a little tricky to get the code just right. Simply embedding it onto your site probaby won't work. A couple links to try:

http://www.2-popforums.com/forums/showthread.php?

http://library.creativecow.net/articles/chaffin_abraham/embedding-quicktime-movies.php

You can easily create a link to your movie that should make it play in a new window. Create text or an image to use as your link and then link to your movie file (.mov or .mp4) using the properties window (Dreamweaver). When you preview in your browser, the movie should play in a new window or download to the viewer's desktop. Use .mp4 to get better streaming capabilities.

One example of a free video player that seems to look nice and play pretty well:

http://flowplayer.org/

It also has an option to buy the software for customizable player options.

If anyone knows of a great free player that I should know about, tell me!

Background Textures

2009-02-19T11:46:00.000-08:00

You can create interesting textures for website backgrounds quickly with Photoshop. Here are a few tips to get you started:

1. Size the document appropriately to match your website. For example, if your website is 1000 pixels wide by 800 tall, then you want to make your background slightly larger than that and possible much wider if your site will be centered on the page. You might also want to match up your edges for seamless image tiling if it is a smaller image.

2. There are several websites with free textures that you can start with. One that I like is http://www.cgtextures.com . The site allows quick and free downloads of a wide variety of images. Either download a texture to start with or simply choose a background color to start with in your Photoshop document. You could also use a photograph of your own.

3. Step three will involve Photoshop filters. If you are happy with the downloaded texture, as is, then you could skip this step. If not, then try a few of the following filters on either your downloaded image texture, or onto a solid layer in Photoshop.

Filters to try: Colored Pencil, Dry Brush, Film Grain, Angled Strokes, Crosshatch, Noise & Dust, Film Grain, Crytallize, Pointillize, Grain, and Texturizer. Use one or combinations of several to get your desired effect.

4. After the desired look is achieved, you can use Hue/Saturation to adjust the color and tone of your background.

5. Finally, flatten the image and save as a low resolution .jpg image, and you're ready to add this background to your website.

**To match up edges of your project, use Offset, under the Others filter heading.