Boomer-caid

This was the first website I had built.

 

Screen Shot 2014-03-07 at 10.04.26 AMI’ve designed a couple of website during my high school days, but I was never on the assembly team for them. “Boomer-Caid” was my first designed and built website. And, oh boy, can I say that building this certainly gave me some valuable experience that I’ll never forget. It was interesting to come up with the idea for this site. A number of ideas didn’t stand on they’re own, and thanks to some advice, the idea for “how the, now aging, Baby Boomers are treated in the medical industry” stuck. Working off this idea, I started at the basics; I made a flowchart, then a wire frame. 
A website wireframe, also known as a page schematic or screen blueprint, is a visual guide that represents the skeletal framework of a website.[1] Wireframes are created for the purpose of arranging elements to best accomplish a particular purpose. The purpose is usually being informed by a business objective and a creative idea. The wireframe depicts the page layout or arrangement of the website’s content, including interface elements and navigational systems, and how they work together.

 

rg_flowchart
This first part of laying out a website is to conceive what pages it will include. Creating the flowchart was the first step in making the website.

 

 

sketch1

Creating the wireframe was the second step for “Boomer-Caid”.

 

 

sketch2Even though the wireframes are blank, these were a vital part in designing the layout of the website.

 

 

sketch3There we go. The three wireframes it took to design “Boomer-Caid”.

 

 

 

 

 

home2The layout of the site came together quite well; now it was time for the design of the site to go through a few drafts. This was “Draft 1”; I tried to go for a older feel, and that’s where the wood background idea came from.

 

 

 

home1The second idea I had was for more of a cold metallic feel; to mirror the hospital/medical side of the idea. But it seemed to not stand out enough.

 

 

 

 

indexI chose to stay with the medical theme for the design, and went with the examination bed. The green rubber/leather table with the paper sprawled across that most everyone can recognize. After deciding to make the green leather the “background”, and the paper from the exam table the “wrapper”, I brought the design file (a Photoshop Document) back into Photoshop for the “slicing” process.

 

 

 

Screen Shot 2014-03-11 at 1.46.50 PMOnce the file was opened, the slicing commenced.

 

 

 

 

 

Screen Shot 2014-03-11 at 1.49.43 PMAnd all of the sliced files from the .psd were then saved in one place, making it easier to find when the building process would begin in Adobe Dreamweaver.

 

 

 

Screen Shot 2014-03-11 at 2.51.32 PMThe process continued in Dreamweaver, and after MANY tweaks to the HTML code, “Bommer-Caid” was finally ready.

 

 

The Finished Result