Company Profile

When building out a web site, the graphics used play a major part. Pictures, gradients, textures and patterns are all elements of a site that need to be optimized to be placed into the code of a web site. It seems simple enough to just place an image into a site, but using the right file type can be tricky for a novice web developer. Here is a tutorial that will provide you with a little bit of insight into slicing up your designs and optimizing images for the web.

First, a little background info on what types of images can be used on the web. Three types of files can be used for display on a web site. The file types are JPEG (Joint Photographic Experts Group), GIF (Graphics Interchange Format) and PNG (Portable Network Graphics). These three file types have the ability to be compressed and optimized, allowing for smaller file sizes and faster site loading. Each format can be used for any image, but knowing when to use each can make a site load faster and look better.

JPEG is the most commonly used file for compression. JPEG allows for the amount of compression to be controlled, but sacrificing the image quality. The more compression selected will provide a smaller file, but will also lower the quality of an image. The trick is to compress an image just enough to not noticeably damage the quality of an image. I have found that using less than 60% compression will begin to pixellate an image. JPEG should be used for any photograph or image that can be classified as more complicated than a simple gradient.

GIF is a file type that does not lose image quality when compressed. But GIF files can only use a range of 256 colors, much less than JPEGs and can cause photographs to appear pixellated. GIF is preferred for sharp-edge line art with flat coloring, such as logos, or simple gradients. GIFs also allow for transparency, but with limitations. If a GIF has any curved or diagonal edges, a matte color will be present outside of those particular edges. The amount of matte color shown is minimal, and the color can be chosen. Choose a color that would best blend into the background in which the transparent GIF will be placed. GIFs can also be used for small animations, but I would not recommend using them unless you are designing a web site in the year 1998.

The final file type that can be used on a web site is the almighty PNG. PNGs completely retain maximum image quality after compression, also creating a larger file size. PNGs also provide transparency, but with a much wider range of options than GIFs. PNGs preserve the alpha transparency of an image. Here's an example to demonstrate: If a slice containing a graphic set at 50% opacity is compressed as a PNG, it will appear translucent, allowing for images or text placed behind the PNG to appear. Another example would be to use a PNG whenever an abnormally shaped object has a drop shadow. PNGs will preserve the translucency of a drop shadow.

PNGs are supported by most modern web browsers such as IE 8 and Firefox 3, but are not supported in older browsers like the decrepit IE 6 and below. There are ways to use PNGs in older browsers. Many developers use a PNG-fix, which is code that will allow PNGs to appear normally on older web browsers. Many developers frown on this method, claiming the PNG-fix code is "hacking" the code to show the image.

It might seem like a lot of information for such a simple task, but there are ways of viewing your images optimized before placing them into your code. In Photoshop (or ImageReady), create a slice in your design and select Save Optimized As from the File menu. This will take you to another screen. You will notice tabs at the top of the screen. Two of the options are Original and Optimized. Original shows the file as is with no compression. Optimized gives you a preview of the what the image sliced will look like after compression. Make sure the slice you created is selected and choose a file format on the right side. By selecting different file types for this one slice, you will see how each one affects the image quality. You can also view the file size after compression in the lower left corner of the Optimized view.

What it comes down to is personal preference. There isn't necessarily a right and a wrong way to optimize and compress your images. Most designers would rather not compress their designs at all, preserving the image quality at it's maximum, but do not understand that this would cause a site to load slowly. Again, finding the perfect balance between compression and quality is the key to creating a great looking and functioning web site.

Yesterday, Colin and I were lucky enough to visit Apalachee High School in Winder, GA to talk about our careers in Web site design and development. Every year, Apalachee sponsors a career day and invites local businesses to come and speak to sophomore students. Plexus was invited to speak alongside other technology-based professionals. Stephanie asked/insisted that I visit the school so the kids could relate to somebody who is a little closer to their age. I was hesitant at first, remembering what my fellow classmates were like in high school. An outsider wouldn't have lasted more than 5 minutes in the mean halls of Dunwoody High School. Taking a deep breath, I set aside my fear and set off to Winder.

Upon arriving at Apalachee, I was very shocked at what I saw. There were kids walking around with boomboxes on their shoulders blaring the hip hop. Some were breakdancing in the middle of the hallway, while others were spraying graffiti on the walls. Actually, this is what I was expecting to find. The reality was very different. The campus itself was very impressive and appeared fairly new. The welcoming staff was also very genial. They led us to the room we would be speaking in and Colin and I started on our gameplan. We were going to go with a Scared Straight approach to give the kids some insight into the harsh world of design and development. We didn't get too far.

At last minute, the coordinator of the career day asked me if I would switch to the Arts and Humanities session since only one speaker showed up. I immediately said yes, feeling much more comfortable speaking about a field which I have more experience in and knowledge of. I was paired with another speaker who is also a graphic designer and has owned her own company for 18 years. We took turns speaking to rooms of about 30 to 40 sophomores. As expected, most of the students were staring at walls, the ceiling, or anything that might have been remotely distracting. Some were obviously listening to their iPods, nodding their heads to music. Others had a blank expression on their faces as if they had fallen asleep with their eyes open.

After speaking, we asked the room if anyone had any questions for us. The classroom was not very responsive, also not a big surprise. I chose to ask the students who was honestly interested in becoming a graphic designer, or wanted to pursue a career in the arts. There were several students who raised their hand. I asked them what they wanted to do as a designer. Some wanted to do print design, while a couple wanted to work as video game designers. This made me a little relieved to know that there is a future in graphic design, and that kids at such a young age are already interested in design. I told them that when I was a sophomore, I had no idea what graphic design was, and that they are already ahead of the game.

One of the main points I tried to stress was to love what you do. I didn't say anything corny or cliche like "Reach for the stars, because the sky's the limit". Nothing stupid like that........so stupid. I emphasized the fact that you need to have passion in your career, whether it be in graphic design, science, or any and every other job in the world. Even though I was reluctant at first, I am glad that I was able to tell these kids about my experiences and maybe some of them actually listened. Andrew's good deed for the year: CHECK!

I've been given a large hint from Buck in his latest blog post to write an in-depth post on the new Plexus Web site. Since I designed and fathered the new site, I'll discuss the changes that we have made.

The main idea that both I and the Plexus team wanted to focus on was to make our new site be more visually appealing to viewers. While text is extremely important for Search Engine Optimization, I wanted to balance it out with more images that show what Plexus' capabilities are. As the saying goes, "A picture is worth a thousand words".

The first thing you'll notice when arriving at the Plexus home page, is the revamped navigation and logo placement. As you begin to scroll through the page, you'll also notice that the navigation stays fixed to the top of the page. There's really no good explanation for why the navigation stays at the top of the page, we just thought it looked cool. Just kidding, having the navigation scroll along with the page allows for quick navigation access. Below the navigation, you'll find a sneak preview of our portfolio. The preview is a slider script that allows for more interaction with the viewer. It also provides a nice animation giving the site more depth and motion.

Below the sliding portfolio preview is a short introduction. Another new addition is a series of boxes describing other services we provide. Remember, "We build Web sites and MORE..." Hovering over each box changes the color of the box and lights up the information, also adding more interactivity.

Underneath our other services you'll find featured news releases and blog posts from Plexus employees. We've also rearranged our staff profiles to fit into a single row. This proves that we're not just robots working on your site, but actual people, with dreams and emotions.

Moving onto our portfolio page. Once again, with "more visual" in mind, we now have a featured image for each category. This is a function that we control through a site manager (also found in many of our clients' sites) that we created to be able to swap out photos with ease.

Our profile page has also undergone major reconstruction. Our profile landing page serves as your introduction to the Plexus crew, along with a brief overview of it's history. For our group photo, we were going for a grungy, semi-pretentious, rock-n-roll look. Clicking on an employee in the photo serves as a link to their individual profile page.

For the profile page, again, "more visual, MORE VISUAL". You will find updated photos of the Plexus team, each employee photographed against the "Plexus Red" background. Each profile photo has been enlarged so you can get a more up close and personal experience with every employee. Under each profile photo, you can learn more about each employee and read latest thoughts on their blog. The first view of the blog is a shortened preview created to eliminate the amount of scrolling when perusing blog posts.

Each profile contains several staff extras that can be updated and changed through the site manager. These include a site highlight box, flickr photo feed, and favorite links. This provides extra information about each employee, and offers some helpful advice and tools to the viewer.

Our Products and Services pages have been updated with newer photos of our pxComponents. We have taken some outdated services and products off the list and added a few that we now offer to clients.

Our contact page might not look different at first, but it has also been modified to further help potential clients get in touch with us. Upon selecting a subject, a different set of questions pertaining to that topic will appear. This helps the client voice their questions more clearly, and helps us focus on what the clients' needs are.

Congratulations! You're now an official Plexus site expert. Now take all this knowledge you've learned and experience our brand new site for yourself. And although the site might be close to perfect, it is a new site, and therefore might still have a few bugs. If you happen to come across anything that might look odd, please don't hesitate to contact us and let us know.

This is not a joke my friends, but my work has finally been honored in the latest issue of TIME Magazine. As many of you may know, Time is one of the largest publications in the nation and is in news stands all over the country. This kind of recognition might cause me to be inundated with job offers from every designer coast to coast. Sorry Plexus, But I'm makin' it big time now.

If you don't believe my claims, you can see for yourself here. In TIME Magazine's February 11th, 2008 issue, page 35, top-left section of the page, there is a poster visible in the photo. That poster is my winning poster for Focus the Nation that TIME found compelled to include in their latest issue. Sure, it looks like the focus is on the student, but it's pretty obvious that the real focus is my poster (no pun intended).

Now that I've made it in the world of design, Stephanie, I think it's time for that raise.

The new year has began for me, just like it has for many, as a fresh start in life. Myself, along with hundreds of other UGA students have finally reached the goal of graduating before hitting that five year mark. After four and a half years of sitting through hours of class and making meager wages working a part-time job at The UPS Store, I have earned my degree in graphic design. Although many automatically think, "Art degree? What do you do for a job? Draw stuff? Sounds easy." Wrong! Yes, majoring in art does mean that you greatly reduce the amount of tests you take in college, but that doesn't mean it's any less work. And my department definitely didn't make my last semester at UGA easy by any means.

For my graphic design class' final semester, we were required to work on a 4 month long project and present it to our teachers and peers at the end of the semester. The purpose of the project is to give you a more, real-world sense of what graphic design is. In other words, you pick a company, or organization, and treat them like a client. You design their identity, create brochures, booklets, posters and whatever element is needed to make your client look good. All of this also needs to be within a reasonable "budget". So no holographic advertisements projected over the Empire State Building in New York.

For my project, I combined my interest in music with my love of design. I used the name of an existing record label, and without knowing anything about them or what their identity looks like, I created my own designs for my "client". Being in Athens, it's not very difficult to find good bands to use as clients, either. I selected 3 bands, all diverse in their musical style and fan base, and proceeded to design album packaging for each group. My main goal was to create packaging different from the typical jewel case everyone has seen for over a decade. At the same time, thinking of 3 different ways to present new and interesting packaging for each band.

To wrap this mini-bio up, after months of working, and by working, I mean actual effort put forth into making a good project, everything came together in the end. Sleep was scarce during those months for everyone in my class, but everyone was extremely happy after seeing their finished works hung up in a gallery downtown.

You've probably already guessed that my teachers passed me and gave me good marks for my project. Otherwise, I'd still be sitting in class, getting one step closer to falling into the bottle. I can proudly say that I'm now working at the best darn Web site design company in all of Athens. Seriously, I am extremely relieved to have a job right out of college. Before, when I would sit around doing nothing, I wasn't getting paid. Now, I can sit around all day and do nothing, and get paid! Just kidding, Stephanie.