KCYV – Web Coding

August 15th, 2011 by admin No comments »

 

Now we are on to the coding stage of this Website. The idea is to code out the main structure of the page in HTML/CSS/JavaScript, get everything looking correctly in the appropriate browsers, make sure the code validates and then convert it to a WordPress template.

Thinking that it would be nice for the bottom of the columns to line up, we decide to use a nice little JavaScript to do the trick – Easy to code, looks nice and works in all of the browsers – except Opera. F@ck! So, back to the faux column HTML/CSS code – Easy to code, looks nice and works in all of the browsers – except Internet Explorer 7. F@ck! And so it goes…

 

Evil Erin's stressful evening

 

As most Web developers will tell you, Internet Explorer (IE) is the bane of our existence. Countless hours are lost trying to figure out how IE is misinterpreting the code and how we can create some kind of creative hack/fix that will still let our code validate. Not only that, each version of IE is buggy in different ways which results in different hacks for different IE versions. Luckily at Atom-O-Rama we have an official policy that we will not support IE6. We only have to code for IE7 and up. This means that we don’t have to pull all of our hair out in late night frustration – just a few strands.

KCYV – Visual Prototype

August 15th, 2011 by admin No comments »

 

We’ve already gone through the Visual Prototype stage, so I’ll just give you a quick run down of how everything went.

Since the client didn’t have any other marketing material we started with the logo. A good idea in identity branding is to repeat colors and design elements from the logo. In this case we pulled the dark blue to create the footer background color. Then we pulled the yellow color for buttons. We decided to complement the blue and yellow with some red which technically wasn’t in the logo, but we changed the black text of the logo to red and placed it above in on a curved path.

The client had specified a faded image at the top. Originally we were going to go with a Kansas field with a blue sky and clouds, but it seemed a little cluttered. Dropping the field and concentrating on the blue sky keep a nice open Kansas feel to the header, plus we added some sunlight rays to tie in with the sun on the logo.

At this point we had two main ideas, one with a white background and one with a more cream colored background. The white background gave the website a more modern feel, while the cream colored background gave a little of an antique feel that tied in with the faded image in the header.

KCYV 1st Visual Prototype

KCYV 2nd Prototype

 

At this point the client liked the cream colored background and suggested adding a parchment texture, which added a lot to the Web page (collaboration is great). From there we made a few minor changes. We curved the main navigation to tie in with the curved logo text and adjusted the sunlight rays to be more prominent.

KCYV 3rd Visual Prototype

 

Screaming Zombie from More Than Dice

Then, just to be snarky, we added a big zombie head as a surprise! Obviously we couldn’t use the zombie head on the production site as 1) the zombie head image belongs to someone else and 2) the zombie apocalypse hasn’t come to Kansas yet – as far as we know anyway. The client loved it though and we’re going to see about getting the logo artist to create an artist head illustration for us. If anyone knows who the original artist for this image is, please drop us a line in the comments so that we can give them credit.

 

KCYV Zombie Prototype

 

So here is the final approved visual prototype:

KCYV Final Visual Prototype

 

Next up… coding!

KCYV Wireframes Version 3

June 6th, 2011 by admin No comments »

Getting closer. The client has requested one more change on the About Us page. Instead of listing the social media icons horizontally, we’re going to list them vertically with the name of each icon typed out beside its corresponding  link. This will allow users to identify each icon without having to hover over each icon to get the pop-up tool tip associated with each. This is the beauty of wireframes. We get to play around with the structure and try out different things before getting into the graphic design nitty gritty.

 

KCYV About Us Wireframes

KCYV Wireframes Part Two

June 3rd, 2011 by admin No comments »

KCYV Wireframes Version 2

After receiving feedback from the client, we’ve made a few revisions to the wireframes. Originally, the only social media link was for Facebook, but since then the client has added Twitter, YouTube and LinkedIn. We made a few other changes at the client’s request: made the calendar links larger, added a 4th contact on the Contact Us page, and moved the search field closer to the top of the Home page. The new images are up at aordev7.com.

KCYV Initial Wireframes Are Up

June 2nd, 2011 by admin No comments »

KCYV Wireframes

 

Our first version of the wireframes for the Kansas Consortium for Youth Voice website are up for client viewing at aordev7.com. We’ve uploaded 17 wireframe images for the various pages that will need to be built/formated. We will eventually build out WordPress templates for these pages.

Wireframes

June 2nd, 2011 by admin No comments »

Wireframes. Some developers hate them. Some love them. When referring to wireframes in the field of web development, we are usually referring to very basic sketch-ups or layout of information. After collaborating with the client to determine the information requirements for our website, we have the fun task of organizing everything. A well developed website doesn’t just look pretty – it must convey the client’s message in way that is cohesive, understandable, and creates a positive experience for the users.

Wireframes allow the developer and client to explore different architectural organization by experimenting with the arrangement of elements at a basic level, before the final graphic details are brought into play. It’s much easier to move around images and blocks of text for optimal placement before adding all of the finishing graphic touches.

When working with wireframes, we usually do not have all of the data from the client. At this point we are more concerned with where the information is going, not what it will look like. As you can see in the image below, we use placeholders for text, images and graphics that we do not have at this point. Lorem Ipsum is the standard dummy text of the printing and typsetting industry and has been adopted by the web design industry as well. You’ll see a lot of Lorem Ipsum as well as made up dummy text in our wireframes. “Blah blah blah bladdity blah blah” seems to be a favorite as well.

 

Wireframe example

 

KCYV Web Project Started

April 11th, 2011 by admin No comments »

We’ve started on the Web project for Kansas Consortium for Youth Voice (KCYV). The initial contract had to be revised to clarify some of the final licensing & copyright details, but it was signed by both parties and everything is good to go.

We registered a couple of domains for them, ksyouthvoice.org, ksyouthvoice.com, and kcyv.org. Their official site will be hosted with ksyouthvoice.org as this corresponds with their existing email account, while the other 2 domain will just forward to the main site.

Currently, we’ve got a temporary page with their logo live at ksyouthvoice.org. Development will take place at a different web site and transferred over when the project is finished – we don’t want their users to be looking at some shabby unfinished pages now do we?

We’ve already figured out what pages we will need to develop code for, so now it’s time to develop the wireframes of each of the pages.

 

Pi Day

March 14th, 2011 by admin No comments »

Pi Day Public Domain Image

It’s that time of year again - Pi Day! As the mathematical constant Pi is commonly written as 3.14, we take time on this day (3/14) to honor the noble Pi.

What better way to celebrate Pi than to chow down on a tastey slice of pie? For those of you craving something with more substance, check out the New Scientist for more Pi related festivities.



March Happenings at Atom-O-Rama

March 4th, 2011 by admin No comments »

Office Workers - Public Domain Image

What’s up at Atom-O-Rama you ask? Plenty! Elizabeth just got the go ahead to start the visual prototype for the Caul web site redesign. Since it’s only two pages, we’re just going to skip with the wireframe formalities and go straight to the Photoshop design. Not something that we usually recommend, and to all of you kiddies out there… “Do not try this at home!”

At the moment, Elizabeth is also waiting on a contract to be signed for the Kansas Coalition for Youth Voice. This non-profit organization is just getting started and has requested a web site to help promote their organization and get their information out to the rest of the world. We’ll be using WordPress on the backend as a content management system, so that they will have the capability of making their own updates. It’s a little bit of extra work up front, but more control for them down the line. It also means more documentation and training on our end. It’s not like we can just throw a copy of “WordPress for Dummies” in their direction and call it done.

Brett is working on some nifty graphic branding for a nursing PowerPoint presentation. Not an actually logo mind you, but they are in need of some graphics to give the presentation a bit of cohesive organization and professionalism. He should be getting the project details in the next couple of days.

And let’s not forget that it’s tax season. Lucky us. Taxes are not due until the 18th of April. Seems that there is a federal holiday on the 15th so we get 3 extra days. Woo-hoo!

New Month, New Year,
New Client, New Design

January 17th, 2011 by admin No comments »

Our newest client is Caul. The music of Caul has been described as a brand of dark ambient music that has a ritualistic, even sacred component to it. Haunting and dramatic backgrounds are textured with melodic overlays, giving his listeners a complex and rewarding listening experience. Caul has requested our services in the redesign of his website.

In an effort to help people understand what is involved with different design projects, we’re going to document some of the up-front and behind-the-scene processes that take place over the life-span of this web redesign project. Come with us as our journey begins…

Once upon a time, there was a little website www.caul.org.

Caul Website - before

Caul Website - Before

 

Our client has asked for his website to be redesigned, from its current minimalistic state to a more professional looking site that still maintains a clean look and feel.

After our initial project discussions we agreed to address the following issues and requirements:

  1. The basic architecture of the website will not change.
    Interestingly, this site only consists of two internal pages: The Home page and the Store page. All other links take the user offsite to other web pages that contain the relevant information.
  2. The width of the web pages will be shortened.
    Currently, the width of the web pages is over 1200px in order to accommodate a row of 4 image/links on the Home page. While this works for the image row, the rest of the Home page is swimming in way too much white space to look proportional.
  3. Simple, clean and minimal are our keywords for the design.
    Initially, the client wanted everything possible to be white. His ideal website would consist of a pure white background with 1 button on it — visually intriguing, but in this case not practical. Instead, we’ll be experimenting with gray on white textures as well as some subtle gradients and drop shadows.

Our next step — visual prototypes.