This was the first website I had built.
I’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. 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.
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.
Creating the wireframe was the second step for “Boomer-Caid”.
Even though the wireframes are blank, these were a vital part in designing the layout of the website.
There we go. The three wireframes it took to design “Boomer-Caid”.
The 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.
The 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.
I 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.
Once the file was opened, the slicing commenced.
And 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.
The process continued in Dreamweaver, and after MANY tweaks to the HTML code, “Bommer-Caid” was finally ready.
The Finished Result