web design, graphic design, art, music and illustration

Space Shaping – Web Design

Space Shaping – Eugene, OR – 2011
Adobe Illustrator, Adobe Photoshop, Adobe ImageReady, HTML, CSS, PHP and WordPress

I approached the website design for Space Shaping as a fine art project. I was familiar with Niko’s artwork and became a bit nervous to think that my task would present beautiful 3D art installations with a 2D monitor. Space shaping creates modern-looking event decorations, mostly inspired by warehouse parties and festivals like Burningman. Their clients include the String Cheese Incident, Mountain Stomp, Caffeine, Symbiosis and some church events. Many visitors to this website will notice the geodesic dome in the background. These domes are often used at festivals to shelter guests from the sun and/or rain. They also provide stable support for heavy lighting effects systems and hanging art installations. The Sky Drops are one of Space Shaping’s signature art pieces, shown here with a pink/violet glow. They flank the center piece, the pink/violet flower, which also acts as the company logo. Because this site competes with today’s cutting edge graphic styles, I used new CSS code on the headings that will only be effective with the latest browsers. I love working with artists, more so when they are excited about projects like this one. Get you space shaped here: http://spaceshaping.net/

Emrg-n-see 2011 Music and Art Festival – Web Design

Emrg-n-see – Portland, OR – 2011
Adobe Illustrator, Adobe Photoshop, Adobe ImageReady, HTML, CSS, PHP and WordPress

The website design for Emrg-n-see was based off a poster design by WKYD ( http://thewkyd.com ). The poster featured a sphere shaped object which appears in this design directly behind the logo. The website design also features the diagonal group of lines behind the sphere. I don’t get too many chances to work with other designers, I enjoyed the process of building the festival identity with W. This is my fourth year contributing to the festival’s marketing department. In previous years, the festival was located on rural land and guests camped for 3-4 days. The material from past years always featured crystals in the graphics. This year, the festival would take place in Portland. I saw the opportunity to slice a photo of downtown Portland in such a way, so the river looked like crystals. The site has some fun roll-over images (I use the sprite technique to reduce download time). Emerge online and see for yourself: http://2011.emrgnsee.com/

dhavir productions – Web Design and Logo Design

dhavir productions – Istanbul, Turkey – 2011
Adobe Illustrator, Adobe Photoshop, Adobe ImageReady, HTML, CSS, PHP, Prestashop and WordPress

I had originally done the website design for dhavir’s WordPress installation. Transferring the WordPress html/css templates over to the Prestashop installation was smooth. Prestashop is the fastest growing opensource ecommerce application. It allows dhavir to sell physical DVD and CD products as well as audio and video downloads. Over 50,000 websites run Prestashop at the time of this writing. Take a look at dhavir’s products here: http://www.dhavir.com/shop

RamJack – Web Design, SEO and Graphic Design

RamJack – Eugene, OR – 2011
Adobe Illustrator, Adobe Photoshop, Adobe ImageReady, HTML, CSS, PHP and WordPress

I was originally hired to re-do the graphics for RamJack. After learning that we would need to move the site to a new server, the client agreed that the new install should be rebuilt from the ground up, using a domain with the key terms “oregon foundation repair”. This web design project proved no simple task. I spent days researching RamJack’s printed material and comparing it to other foundation repair websites. My search engine optimization plan was set early in the beginning. I used over a dozen SEO website tools to formulate a marketing plan all while organizing 60+ pages of content. The site is a powerhouse of key terms and phrases and currently has only two competitors for the search terms “oregon foundation repair”. If there is anything you need to learn about foundation repair? You will find it here: http://oregon-foundation-repair.com

Helios Resource Network – Web Design, Graphic Design and Logo Design

Helios Resource Network – Eugene, OR – 2011
Adobe Illustrator, Adobe Photoshop, Adobe ImageReady, HTML, CSS, PHP, Helios Calendar Application, Coldfusion and JQuery

I am in the process of upgrading the web design of Helios Resource Network’s web site. The site was built over ten years ago and runs it’s directories with Coldfusion. The database is maintained with online forms and with a Microsoft application called Access. The directory holds a variety of information on hundreds of non-profit organizations. I recently installed a calendar system on the site. Twice a month, I research local websites and add events to the calendar that relate to sustainability. Once the calendar is full of events, a newsletter is sent out to over 600 Eugene residents. The events are submitted by myself and by the public through online forms. Members who sign up for newsletters only receive events in the categories they sign up for. The calendar also features the ability to embed it’s information on any other website. The website also features a jQuery section on the Grant project page and the homepage here: http://www.heliosnetwork.org

Jerusalem Pulse Radio – Web Design, Graphic Design and Logo Design

JPR – Jerusalem, Israel – 2010
Adobe Illustrator, Adobe Photoshop, Adobe ImageReady, Macromedia Flash, HTML, CSS, PHP, Jquery, iTunes Podcasting, YouTube Video Channel and WordPress

Doing the web design for Jerusalem Pulse Radio was no small task. Over a two year period, I reskinned the Drupal site, moved the site’s host twice and transferred the entire site to run a WordPress content management system. I also created the animated header in Flash, the site administrator produced the Flash audio. The JPR empire consists of a YouTube channel ( http://www.youtube.com/user/JerusalemPulseRadio ) and iTunes Pocast channel ( http://itunes.apple.com/us/podcast/id382166679 ). The YouTube channel design is based off the main site and it’s videos are also embedded on the main site’s video page. The audio shows are available with flash audio players on the site and then exported automatically to the iTunes channel. The JPR site displays content by type (audio, video or blog post) while also organizing those media types by author/show. The WordPress content management system is running a complex plug-in that pulls RSS feeds into the site database. These feeds are acquired from over 30 different web sources and automatically updates the site content every day. The feeds are organized into 9 Headline categories, exploding the overall content of the site. As of this writing, there were over 33,700 news headlines. The controversial website has attracted a large audience, due to my SEO techniques and the subject matter. As of this writing, there are a number of debates going on in the comment sections. I have a feeling the processor on this web server may need some extra cooling fans! Join the discussion here: http://www.jerusalempulseradio.com

Real Soda – Web Design

Real Soda – Portland, OR and Seattle, WA – 2010
Prestashop Shopping Cart, HTML, CSS, PHP

Real Soda is a great example of an ecommerce site on a budget. This site took me 12 hours to design graphics, write W3C valid HTML and CSS code, install the opensource application Prestashop and manage the site’s control panel. This project cost Real Soda under $800 to launch (not counting the monthly payments to their web host.) Although Zen Cart is a very popular shopping cart for web designers, and Magento is making a big splash among programmers, I will continue to support the European Prestashop. It is simple to install, and more importantly, it is simple to manage. That’s important because not all my clients are internet savvy. The folks at Real Soda caught on fast, and the product line has been growing since. You can explore the shopping cart here: http://www.realsoda.net

Yidmatch – Web Banner Design, Logo Design

YidMatch – Jerusalem, Israel and Los Angeles, CA – 2010
Adobe Photoshop, Adobe ImageReady

Emrgnsee – Web Design (using some elements created by another designer: W El Rey)

Emrgnsee – Portland, OR – 2010
Wordpress, HTML, CSS, PHP, Adobe Photoshop, Adobe Illustrator

I was part of a 4 person team that worked on this website. Lucky for me, Matt Dressmon (http://euphoriuhh.com/) did a large amount of the data entry that I had done the previous year. The original design had most of the elements here, but I chipped in the space background (thanks to my work with ufotv.com, I am now the go-to guy for all things galactic.) The background actually has multiple space images layered together. The actual site is quite large, hosting information on workshops, live artists, food carts, vendors and the festival’s music. Besides contributing my graphic and coding skills to the site, I also did a large amount of data entry into the wordpress control panel. The site is located here: http://2010.emrgnsee.com/

YidMatch Homepage – Web Design, Graphic Design and Logo Design

YidMatch – Los Angeles, CA – 2010
Adobe Illustrator, Adobe Photoshop, Adobe ImageReady, HTML, CSS, PHP, VLDpersonals, WordPress and phpBB Forums

YidMatch is an social network (dating web site) built for marriage-minded Jewish singles. To build my client the most secure dating web site, we first purchased software from VLDPersonals. VLDPersonals is a web design company that makes internet dating websites. Outside of the VLDPersonal’s code, the web site also utilizes an additional wordpress cms system and a php forum installation that is synched with the dating site member database. The homepage design targets Jewish, marriage-minded singles. The launch marks the end of a two-year venture in social network programing and designing and I am happy to refer you to see the site here: www.yidmatch.com (feel free to sign up, too, if you are Jewish and single!)

The YidMatch Features page runs a javascript navigation and highlights the benefits to signing up.

After purchasing and installing the software, admins are presented with a number of features. Some of the default features were: Instant chat rooms, video, audio, friends, favorites, dozens of search options and a complex events calendar. I took this foundation in the php code, and added a number of modifications and additions to the software.

The YidMatch dating site allows members to modify a number of options on their profile pages. The profile options allow members to build custom web pages to match their personality. Members are able to choose their own graphics, backgrounds and menu placements on their profile page. I designed and implemented over 50 different graphic icons, five of which are part of the member’s profile page. The icons show a large number of characteristics like: eye color, religious background, career, sense of humor and hobbies. Other samples of profile pages are below.

When you are planning to launch an online presence, it’s important to develop your website’s content before a designer begins building the site. How the site looks is important, but not remotely close to the message that it delivers. This article will help you create that message.

1) Why are you making a website?

Your website should have a goal (other than providing information). What is your goal?

• Checkout process: Products are sold online in a shopping cart environment
• Contact form: The first step in ordering a product or service
• Contribute: Your site may rely on visitor interaction (like a dating site, social network, forum or directory). Getting the visitor to sign up and add information would be your goal in this case.

2) Who will be using this site?

Make a list of the types of visitors that may visit your site.  Include traits like:

• Experience: Will your site cater to first-time users or will your content address well informed customers?
• Location: It may be important to qualify a customer?
• Age
• Sex
• Income: Make sure your image is aligned with your customers’ wallet.  Sounding too expensive will discourage low income visitors.  Wealthy visitors may lose interest if your product/service looks too “middle class.”

Question: Will each group of visitor require a different goal? If so, you’re site may require repeated content on some pages.

Circle the type of visitors that are more likely to navigate to your goal?

This may be a good time to disregard certain types of visitors and develop content to those who are more likely to navigate to your goal.

3) CONTENT!

Your navigation will be based on standard pages, information pages and your goal page(s).

HOMEPAGE

The “Elevator speech” or mission statement: If you just met a nice person in an elevator, how would you explain what you do in a minute or two? I have this elevator speech on my website:

I am a Eugene, Oregon Graphic Designer with experience in designing, coding and hosting professional web sites. For over 5 years, terrytoledo.com has been a creative graphic design company serving:

* Small businesses needing brand development and advertising
* Established organizations needing printed materials and a web launch
* National companies in search of experienced professionals

My clients are as diverse as the design solutions they require. I offer professional, fast and inexpensive solutions in the communications industry. I have 10 years experience creating great designs. I have a casual demeanor, but I am serious about representing my clients.

Call me for a free estimate on any project (illustration, graphic art or web design).

Your intro can include:

• duration of experience
• types of services/products
• call to action

The homepage may also include

• new services/products
• multimedia (flash or video)
• a list of your webpage highlights. Each bullet explains the content on that particular page and includes a link to that page

CONTACT US

• Mailing address
• Fax
• Phone
• Social network links
• Email address
• Contact form

ABOUT US

• Your passion for ______
• Short and long-term goals
• Number of employees
• Experience & education
• Awards, Permits and licenses

TESTIMONIALS

The most influential marketing tool, ever.

PRODUCTS/SERVICES

Organize them by:

• New products/services
• Best Sellers
• Popular (featured on other websites, TV, radio or other media)
• Sales and specials
• Manufacturer
• Use

Identify your product/service

• Quality
• Durability
• Reliability
• Convenience
• Safety
• Comfort
• Status
• Style/Image
• Luxury
• Time-saving
• Workmanship
• Economy/Savings

REMEMBER! All content must talk to the group of visitors that you circled in section 2!

Include links to these pages from each product page

• Warranties
• Shipping Terms/Time frames
• Returns
• Customer Service

ASSOCIATED INFORMATION

Each page that falls within this section will cover general information about your industry.

• History of the industry (Wikipedia is a great inspiration)
• Trade Shows
• Manufacturing process
• General uses of your types of product/service

LINKS

• Social Network
• Contractors
• Manufacturers
• Business partners

4) Fill in the holes and take a good look at your competition!

Compare your content to your competition, focus on these topics:

• Price
• Service
• Location
• Quality
• Information

What topics are your strengths?

What are your weaknesses?

Have you promoted your strengths on your homepage?  Your product pages? Make sure your strengths are front and center! Does your competition cover information you do not? Include this content if it is relative to your product or service. Make sure it is located in your navigation so that the viewer is encouraged to click on your goal page!

5) Reorganize your content to influence your search engine rankings!

I’ve written about search engine optimization.

• Google Page Rank (Part 1)
• Google Page Rank (Part 2)

I’ve attended conventions like the Portland Code Camp at Reed College.  One of the classes that I felt most involved with was the Search Engine Optimization and Internet Marketing lecture.  The class was taught by Colleen Wright and assisted by Jennifer Goudey-Forster. Although much of the class covered information I have already written about, I was introduced to additional ideas worth mentioning.  I’ve also learned a great deal about Social Networking and SEO from the small business class at Mercy Corps NW.  The Foundations Class was taught by Bill Horton and featured a lecture by Benjamin Tomkins.  I also follow a number of bloggers on SEO topics, check back as I plan on organizing a nifty “Links Page” soon!

There are two methods of optimizing a web site for search engines:  On-Page and Off-Page

On-Page Factors

Creating HTML documents that are formatted to give important information to search engines is essential to reaching your target market.  Some of these factors are:

• Title Tag
• Page Name (H1, H2 and H3 Tags)
• Bolded Text
• Anchor Text (the text that becomes hyperlinked)
• The text displayed at the top of the content
• Image Tag and Name
• Meta Tag (Search engines still use this info.  Meta tags give information on what your page is about, but this info does not get displayed unless it appears in some kind of search result.
• URL (although it may not actually be in the HTML document, but the url contains the domain name and the document’s name.  Both names will benefit the site if they are part of the site’s keywords.
• 5% to 7% keyword density

A note on density:  Although it is important to have your keywords appear on your site often, how those terms are placed is equally important to search engine optimization.

Keyword Strategies other than density

• The relative distance between keywords – Search engines will note when keywords are often used together in a sentence.
• Where the keywords appear on the HTML document – When a web page is built correctly, the most important terms relating to the document should appear near the beginning (the title or heading on top).  After the main content is placed after the header, less important terms (links, images, forms) should be arranged in order of their importance.  The least pertinent terms should be saved for the bottom of the HTML document.  When using columns and tables, it’s important to remember that search engines count the terms in a linear way.

• The frequency of the keywords – Search engines use linguistic formulas to determine if keywords are being used properly.  Nouns and verbs are recorded in relation to sentence building, keywords that are used frequently in proper context will receive a higher rank.
• How keywords relate to the main topic (and the sub topics derived from it) – Keywords planted on the page will be meaningless to the search engine if they are unrelated to the document’s content.

It may be common sense, but some SEO services still duplicate keywords into HTML documents without regards to sentence structure.  Although I may not always use the best grammar, the fact that my keywords are presented within readable content will give them credibility.

More On-Page Factors that assist in Page Rank

The On-Page methods involve the HTML coding and copy writing processes. I use a number of methods in my coding when optimizing web pages for search engines. Here a are some HTML and CSS tips:

• I use the “display: none;” type style very cautiously. Search engines are sensitive to key word stuffing, so this HTML practice is only used for short headlines, company names or slogans.
• I keep all important information near the top of the HTML document because search engines give higher rank to leading content.
• I use sub navigation lists that repeat key words while allowing users to access parts of the site with fewer clicks.
• A legitimate way to add links to a content management web site is by listing search results within your site. For example, after a search has returned a list of links in your site, a sub navigation can offer suggestions to the current search results. This sub navigation will list a number of similar keywords found on the site. An extra benefit to having search results listed as urls are the extra HTML pages that will be created on the server side. The web crawlers will call up the urls and force content to be pulled from the cms database. These large additional html pages will be created by the cms when normally they are only created by a web browser whose search triggers the cms to que the database.
• I make sure that my code is validated with the Web Consortium. This will assure correct emphasis on HTML tags and page content. Also, since I state W3C validation in my contract, my clients and I have a non-biased service that determines when our project is finished. I usually charge extra for cross browser errors (Internet Explorer consistently breaks web sites when interpreting HTML code and WordPress sometimes places paragraph tags in random places, conflicting with a validation). The W3C service is priceless.

I’ve been writing HTML code by hand since 1996, I’ve learned a great deal in the past 14 years!

Off-Page Factors

(submitting data and links to other sites)

Web sites that connect to your site with hyperlinks are often called backlinks. There are a number of ways to develop free backlinks to your site:

• Directories
• Internet Press Releases
• Social Networking Sites

Search engines rank backlinks by a number of criteria:

• Authority Sites (major publications, blogs or forums) that have a large following will benefit your page rank by hosting a link to your site
• Sites with a PageRank of 5 or more will increase the value of your site
• .edu and .gov sites are considered excellent references
• The age of your backlinks also plays a factor in adding value to your site
• If the site linking to yours has similar content, search engines will put more emphasis on the backlink

There are a number of ways to find backlinks for your site, one way is by contacting me!  I can provide a free estimate on optimizing your site with on-page and off-page methods.  Of course, SEO will not guarantee you a great PageRank, but with proper planning and strategically placing your url linked on other sites, your website will be in a better position to grow in popularity.

Hits coming from search engines are called organic visits. If you’re a business, however, you might as well call them new customers. Most businesses invest in a website to expand their customer base, unfortunately, without proper attention to SEO (Search Engine Optimization) a nice website can sit unnoticed.

Each click that leads to your website is a vote. These votes are weighed with additional factors that ultimately determine a page rank by a search engine. The process of ranking every website is so elaborate, an independent industry has developed to provide search engine optimization. Companies can now guarantee page rank results by adjusting html files and adding specific content. Optimizing a website can run up to $3,000 and can turn a business into a multi-national company within a year. For the best explanations, visit Wikipedia’s search engine optimization and PageRank definitions.

In Search Engine Optimization, Content is King

Search Engine Optimization often involves something that most web designers avoid. Writing copy. The content of a website will always be the main factor in search engine results. Search engines will read and analyze your content, determine common phrases and store the results among millions of other sites. Researching key words and including them within your content is a standard way to improve your stats. Keyword density in document text is most effective when your keywords appear more than 3% of the time. Anything near 10% may indicate keyword stuffing and cause your site to be flagged. A good way to check your site’s keyword density is to visit http://www.webconfs.com. Keywords that are used at the beginning of the document are also considered more important. Keywords that are used together are called key phrases and add extra value to a page rank, especially if the phrase is repeated on multiple pages within a website. I have been adding content to my site for over five years and have finally noticed the benefits in my page rank.

HTML Optimization

Using key phrases and words within the html is a science to be mastered. Links may be the most important part of html on your site. URL titles are also considered by search engines. Luckily, the content management systems I use to build my sites add URL titles, file names and meta data automatically. A website that names for html files with keywords will be rewarded with a higher page rank. There are a number of tags that can be labeled with key words. Here are a list of tags that I use to optimize websites.

• Title Tag – This is one of the most important places to have a keyword. What is written in the title tag shows in search results as your page title. The title tag must be short and words towards the front are given more emphasis.
• Heading Tags – There are 3 or 4 levels of heading tags that can be utilized on a page. Most content management systems will automatically put your page title in a heading page.
• URL Title Tag – This tag defines the box of text that appears when a pointer is moved over a link.
• Image Alt Tag – The images that are used in your site can drive traffic from image searches. Keywords placed in IMG ALT tags will add to the importance of those words.
• Meta Tags – These tags are typically hidden from view and give information about the content. These tags are becoming less important over time yet are still automatically filled out by most content management systems.

Outside Links to Your Site

You want more people to link to your site. Not only do you want more links, but you want links from websites that are popular and have a strong page rank. Links from popular sites will add points to your ranking. To find where backlinks are coming from, type in “linkdomain:www.yourdomain.com” in the search field at yahoo.com.

There are only so many things you can do to add links to your site, but here are a few ideas.

• Take part in online forums – If you have opinions or experience in a field related to your keywords you may be able to drive traffic to your site by helping others solve problems. The internet is full of forums debating politics, revealing scientific breakthroughs and defining history. Contribute to your online community and search engines will reward you for it. Just make sure to include a link to your website in each post and interested readers will want to learn more about you.
• Write articles for online magazines – Not only will this help your page rank, it can be profitable.
• Get involved with a nonprofit or your local government – Get involved and make sure your website is credited with a link. Links from .gov or .org websites have a better reputation and carry a stronger vote for your site.
• Get listed in directories – Having your organization listed with yahoo.com, DMOZ, citysearch.com or uscity.net and add more links to your site from other domains. Directories can also help drive new visitors to your site without using a search engine.

If you are placing a link to your website from an outside source, include it only once and it will become more important to the search engines. In any case, professionals discourage attempts to trick the search engines. Chances are, Google has already thought of it. Attempting to trick a search engine with mirrored content, hidden text and high-jacked rss feeds will hurt your ranking and perhaps lock your website out of future search engine results. Manipulating computer language compromises the search engine service. Organizations like http://www.seopros.org are working to expose hackers and standardize appropriate methods for optimizing web sites.

I can help you grow your web site’s page rank.  Give me a call if you would like a free estimate on any search engine optimization.

A new service is available for 2009, I am now able to install and customize an open source application called Prestashop. It comes with a PayPal gateway, great web stats and some sharp effects. The admin control panel is completely customizable, so if you want the information architecture rearranged you can spend 10 minutes on the site map. Same goes for the storefront, too. I’ve tried eCommerce, Zen Cart, Magento and a number of other free applications but this is the best by far. Thanks Prestashop!

Take a look at my paintings, too! I now have a way to sell my artwork over the web. So far, everything in my store comes with free shipping. Check back often as I offer digital prints of past work, cafepress tees, stickers and my first comic book.

I plan on sending these postcards out very soon. Let me know if you would like a copy by sending me your address with the contact page!

Do you visit a number of web pages for information? Does it also relate to your web page? If so, you should think about offering posts from those sites on your website with RSS feeds. An RSS feed can add links and text directly to your site. Plus, it updates itself automatically! In fact, this post is an RSS feed found on my homepage and on the admin panel of all my client’s web pages. It’s a new way I can keep everyone up to date with new services that I can provide. If this sounds interesting to you, give me a call or send me an email and I will be happy to explain it more. Cheers!