By: Jim Warholic, Marketing Web Designer
When it comes to website designs for business, one size does not fit all. On the Internet final frontier, some like dark on light, others like light on dark designs. Some like blue and some like orange. Some like sharp corners and edges while others like wide circles, curves, and smooth flow style. No matter which style you like, there is a website style that inspires not only you or your business to really make an impact in your sphere of influence today, but also can inspire your customers too.
One day a while back, I was Web surfing the open source Web design areas, looking at some of the creative peoples' ideas for websites, when I stumbled upon a website design from a fresh Web Developer that I thought the design had a lot of potential to be something special. The design was very simple and basic to begin with, but there was a vision from within this developer's mind, that showed he had an eye for the artistic angles; and that was what impressed me.
Desert Rider Was Born
The idea from this Web Developer was to have a blend of colors in relation to the header picture image that created a sense of flow to the whole site. The page design was created to be static in width, but with a sense of fluid width to the color scheme. The sky header along with the sandy dunes give a sense of freedom to the whole image design. Meet Matt Bee, the desert rider.
The beauty of open source Web design is anyone can take a web design and create derivative works from it. You don't have to start from scratch and reinvent the wheel. You can save yourself lots of time and money in website design. With the inspiration I got from the Desert Rider Web Designer, I decided to take the designer's fresh beginning work and create another derivative work from it.
It was around this time that Google came out with their new and improved Blogger which also included new template XML design structures that made it easier for experienced and novice bloggers alike to drag and drop items from one location of the template to another. So, as I was thinking about one of the Blogger templates, I was intrigued by the various styles in which you could have a fixed width or fluid width to the page design, and thought I could make an adaptation of the Blogger design using the Desert Rider as a source for some inspiration.
One aspect of complete fluid width designs to consider is the body text will float across the whole page, as compared to a fixed width where the body text is constrained to a certain size area. It is important to note that both the fixed width designs and the fluid designs have their pros and cons, but it is wise to consider that many people are also buying new computers that are being supplied with wide screen display monitors, with greater screen resolutions than their old CRT ancestors. Certainly, many of these older obsolete CRT display monitors are being fazed out by businesses and consumers all over the world, as businesses and consumers are purchasing lower energy consumption LCD monitors to replace their broken down energy consuming CRT hogs.
Web design today is constantly in a state of flux. While certain web designs have a timeless value, there are always improvements and new developments to be included along the way. Browser improvements, HTML and CSS standards adoptions, computer improvements, new online software solutions, Web 2.0 implementations, and screen monitor display improvements all are driving forces behind the Web Designers striving to do the best that can be done at the time.
So, with some cool new features in Blogger, I thought that I wanted the best of both worlds for a template that was able to be both fluid or fixed, depending on which way you wanted it to be. I started a new blog using the Blogger template that provided a great starting point for a new design. In fact, I had used this particular Blogger template to create many other custom web designs, so I had a good knowledge base of the architectural layout scheme, and was quite familiar with the HTML and CSS coding styles from the Blogger template Web Developer.
The Birth of the Desert Web Rider
What I liked first and foremost with the Desert Rider was how the blend of the top header functioned. However, I didn't want the template design to be simply perched on the left side of the page. I tend to be someone that likes balance. There is a sense of yin-yang yin and yang, heaven and earth, day and night, and left and right to my designing style that I sometimes have to step back from my view of the world and somewhat let it be at times. However, I tend to think that most people have a balance about them too, and that there is a bit of yin-yang in all of us.
I needed balance. The header of the page had to be in the middle. That was my first requisite and was absolutely essential to the entire page design. To me, the header section in a website is compared to the term as "Above the Fold" is to the newspaper industry, where your main headlines and most important news items are put first and are above the folded section of the newspaper. While the header section in a website is typically where your brand image is first displayed, this area however is more than your brand logo. You have to remember, if your company is not a well known brand name, that many of the first time online visitors won't know your website from the millions of other websites online. So, you need to make a unique Internet impression.
I took the image from the original Desert Rider, and gave it balance. I wanted the entire header to be free and float, yet centered on the page. While many of the graphic images are simply not balanced, they don't have yin-yang to them. The right and the left are not symmetrically inclusive. For example, you can take an image in Photoshop or any graphic program, and split it down the middle, creating a mirror image of the left or right half and flipping it and pasting it on the other side, and you would have perfect symmetry. However, that is not what I wanted. I did not want perfect symmetry, but I wanted the image to be more inline with the real world. I wanted a header that floated, but was more of an accurate representation of how the world looks when you are standing at a point and looking at the horizon with a left and right landscape view, but with the focus of a central section perspective.
To get that feeling of balance, some of the key image pictures that can be used for this particular style are skylines, mountain views, ocean views, horizon landscape views, sunsets, and the combination of both the sky and the land in a balanced photo shot where a section of the photo has similar heights and colors to where the sky and the land meet on both the left and the right side. Balance is the key. Once you have set your sites on the picture you want to use, with an eye on good cropping, and there are many free online sources for some great pictures, then you need to do a little step and repeat for the side header sections for it to work with a fluid motion. Simply taking a slice of the image, using a graphics program, along one edge of the picture where the center focused image is going to meet with both the left and right side, and using CSS background image repeat in X axis will produce a fluid width dynamic to the design.
At first, I thought I'll just make the whole design fluid. While the fluid design worked fine in a small screen monitor resolution size, it did not feel balanced to a focal point for a reader of a large screen monitor. My eyes had to scan the entire screen from the left to the right side of a large monitor in order to read it. By the time I got to a carriage return on the right side, I lost my way back along the text line on the left side when I was reading it myself. I can only imagine how difficult this can be for others that are reading the information for the first time. In fact, I have visited many pages where the width is fully fluid, and I end up reducing the size of the browser in order to constrain the information into a more narrow region for easier reading.
This took me in my thinking to the next step in the website design process. How was I going to have both a perceived fluid width on the top and a constrained center section on the body text at the bottom? I didn't want to start from scratch on the CSS and have to reinvent the wheel. I also wanted the website design to be fully centered on the browser page itself. I had an idea that by using an optional Blogger template of the same style, it was going to fit my web design needs. That is exactly what the Web doctor ordered. The basic template structure of the Blogger template fit my Web needs perfectly. With some customized CSS and HTML coding, the Desert Web Rider was starting to grow up. It took on a life of its own. The Web Rider was floating and constrained to a fixed width at the same time. I loved it!
The Web Rider is not Content
As is the case with most Web Designers, I was not content with the design. I heard it said that even Pablo Picasso had a hard time being satisfied with his own masterpieces. I wanted to use a menu system, similar to the original Desert Rider design but make this a fluid width also. Not only did I want the menu to be fluid, but the entire design requirements written by me of course, needed to also, be able to stand on its own as its own website, separate from Blogger. I also wanted to integrate the brand architecture into the information architecture between Blogger and the standalone website. The requirements were to have the unique brand image throughout both the Blog and the Website, and yet remain fully independent of one another.
So, I got to work on the menu. I made some improvements that created the fluid width flow, and provided the style I was looking for. It took some skill, and is typically the case when dealing with multiple browsers, browser versions, and different operating systems (Apple, Microsoft, and Linux to name a few), a bit of trial and error was required to get the menu positioned in the vertical section of the Blog just right, but I finally got it where I wanted it. I also had been working on the web site independently of Blogger to get the brand architecture the same between both the website and the blog. It's important to note here that while there are quite a number of similarities between the coding in the website and Blogger, Blogger provides some other key XML programming structures that must be taken into account when designing a custom blog using XML, HTML, and CSS custom coding.
The information architecture was exactly the way I wanted it. The brand architecture was the same between all Web facets and I loved it! Guess what though; I was not satisfied. I wanted more flow. I was looking for more wide circles and curves. Here is what happened. When I constrained the Web design in a fixed body area, it had the adverse affect of creating harsh straight edges that were out of balance with the header section. This is the law of unintended web consequences. The straight lines along the right and left, top and bottom, needed to be broken up. They had to be balanced out with the smooth design of the top. The design needed to have curves in just the right places and spaces. It's important to note here, because the design has a sense of floating in the top section, both the header and the main content areas can be different widths; and that is exactly how the The Desert Web Rider is designed. I use a 900 pixel width in the main content section and a 760 pixel width center header image.
So I created, with one of my favorite graphic illustration and drawing software programs, Xara Xtreme Pro, wide top curves and wide bottom curves that are color coordinated to the Web template and placed into the design using CSS style commands. Aligning the graphics using CSS took a little customization work to get the spacing just right across most of the browsers. But, I think it was well worth it, and it adds just the right touch to this particular Web design to bring a sense of freedom and flow of the information in the page itself. What you are looking at on this page is a culmination of the Desert Web Rider design improvements. The design will undoubtedly continue to evolve in wider circles as time goes on, but that is what makes the Internet so unique in that things stay fresh with constant change.
Take the website for a test drive. Feel the acceleration as you step on the mouse gas. Feel the Web rider glide along the top when the web browser is expanded or contracted. And, don't forget to take the language translations for a spin too. Simply click on the international flags links at the top. Then try some global navigation within the online Google language translation software tool, and I think you will be surprised how the language translation barrier extends itself globally through links to other websites.
Get your brand set apart. Professional Web Services provides marketing, branding, advertising, and design for B2B and B2C companies online. Contact us today to show you how we can make a marketing impact for your business online.
No comments:
Post a Comment