Wire Frames for my port


McCraw Design

Last week Shawn McCraw from McCraw Design was our guest speaker. This was one of my favorite classes so far. It was nice to hear from a highly successful designer and all the leaps he has faced. I always knew that networking was important and I feel this just goes to show with how Shawn McCraw operates his business. He kept mentioning how he was not the sole designer behind the projects, but a different array of designers and artist working towards on goal. You can’t do it all on your own, but you can be a big part of the success!

Shawn motivated me to start doing things differently, to start sketching again (something I really havent done in a long time), be diverse, observe and listen, and don’t get attached to your work. If you are going to be great at freelancing then you need to be able to sell, and explain reasoning behind what you do. Don’t just find out what your client wants you to do, also find out who they are.

It was also nice and at the same time upsetting to see that some of the problems I have had with clients he also faces. From what I gathered this is going to be an ongoing process through my web design career. The good that came from this was our discussion about contracts and charging for your work. I have a clearer picture of how this should be done, and to get content in a quicker manner.

Overall, I gathered a load of information and motivation from Shawn, and really enjoyed this guest speaker.

Never stop learning!



<!DOCTYPE html PUBLIC “_//W3C//DTD XHTML 1.0 Transitional//EN”

<html xmlns=http://www.w3.org/1999/xhtml>
<meta http-equiv=”Content-Type” content=”text/html; hcarset=UTF-8 />
<title>Untitled Document</title>
<style type=”text/css”>
.urgent {
color : red;
font-weight : bold;
font-size : 20pt;
}     class urgent styling
.notsourgent {
color : blue;
font-weight : normal;
font-size : 70%;
}     class notsourgent styling
<script type=”text/javacript”>     Enables JavaScript coding
function makeLessUrgent() {           Names the function makeLessUrgent
}      Gets HTML DIV class id “THIS IS URGENT” w/urgent CSS style
<div class=”urgent” id=”urgentmessage”>THIS IS URGENT!</div>
<br />
<input type=button id=”msgbtn” size=”20” value=”Dealt with”    Creates a button
onclick=”makeLessUrgent();” />      When button is clicked displays “Dealt with” with css style of notsourgent


Me trying to explain some JavaScript code?

We are learning JavaScript in my scripting class and was asked to try and explain some code. I am going to do my best, but dont take my word.

<SCRIPT>                                                                                                           -Opens the script tag

function showTime() {                                                                               calls this function “showTime”
var now = new Date();                                                                                  Variable called “now” to show the date

var hours = now.getHours();                                                                  Variable called “hours” to get the current hour

var minutes = now.getMinutes();                                                        Variable called “minutes” to get the current minutes

var seconds = now.getSeconds();                                                        Variable called “seconds” to get the current seconds

var timeStr = “” + ((hours > 12) ? hours – 12 : hours);                    Variable called “timeStr” is saying if the hours are greater than 12 than subtract then subract 12 from the total hours and put “:” after the displayed number              (ex:hours=18 so subtract 12 and display 6:)

timeStr += ((minutes < 10) ? “:0” : “:”) + minutes;                           Variable called “timeStr” is saying that if minutes are less than 10 display a 0 in front of number and put a “:” before (ex: its 9 miutes, display :09)

timeStr += ((seconds < 10) ? “:0” : “:”) + seconds;                           Variable “timeStr” is asking to do the same as with the minutes but only with the seconds

timeStr += (hours >= 12) ? ” P.M.” : ” A.M.”;                                      If hours are greater than 12 display :PM if its less than 12 display :AM

status = timeStr; Time is displayed in the Status Line

setTimeout(“showTime()”, 1000);                                               Closes Function “showTime”

</SCRIPT>                                                                                                     Closes Script tag

<BODY onLoad=”showTime()>                                                    When site loads show “showtime” (5:50:46:P.M.) in the body of the page


Week 1 Intro to JavaScript

 JavaScript provides action for a page. It is a seq. of statements to be performed by the browser. You can create cookies, perform visual effects, validate data, and many more other actions. JavaScript first appeared in 1995 originated by Netscape navigator and was created to eliminate slow download times.

 JavaScript is made up of three parts:

  1. ECMA- which provides the core function. Its a base for more robust scripting
  2. DOM-Document Object Model. Page made with an heirarchy of nodes. Provides methods and interfaces for working with content.
  3. BOM-Browser Object Model is the least standardized and allows a browser to perform many different things.

Sever-Side is all the processing power used by a web site. Some examples are CGI,ASP, or PHP. Where as Client-Side uses less bandwidth and runs in the browser. Its like the horsepower of the users computer.

WEB 2.0 is the transition from static html pages to a more dynamic web pages that are organized and serving the applications better.

Ajax is asynchronous JavaScript and was made popular by Google in 2005.  It is a new way to use existing standards and was made to build highly interactive and responsive web applications.

RIA (rich internet application) is used to combine the desktop with the web.


Bolin Steger Outline



Visual Statement/ About Bolin Steger

Rotating Images with quotes from testimonials 

Custom Designs   

Exterior Images
Interior Images
Outdoors/Landscaping Images
Floor Plans

Building Process   

Pre Construction
Post Construction
What to expect

Time Frames



Lending Info
Companies/Materials we use
Glossary of Terms

Contact Bolin Steger   

Make an Appointment
Call for a quote



Usability Testing for Bolin Steger Homes


• Would like to see a building process explaining the steps and time frames between pre-construction and post-construction.
• Main focus for site would need to prove the dependability of the builder.
• Would like to see a pricing per foot.
• What companies and materials does the builder use?


• Would like to see facts and the benefits to using this builder.
• Be able to zoom into pics for details.
• Thinks the building process info isn’t necessary for the web site, would rather hear it in person.
• Photos are key!
• The price per square foot could scare away potential customer’s, plus the prices could change. Suggested a call for a quote under the FAQ or Contact nav menus.


• A few key testimonials on the Home menu, separate testomials on specific areas of the build. (kitchen, bathrooms, etc.)
• Thinks that having the building process helps to show Bolins Stegger’s commitment to there work and that he has a plan.
• Is wondering how many people go to Bolin Steger’s location. As a builder does he go to the customer? If so is a Map necessary?
• Like’s the call for a quote suggestion better than the price per square foot.


• The site nav is simple and easy to use.
• Doesn’t think there should be a Glossary of terms.
• When asked where to find Lending info he said under the FAQ or it should have its own section.
• Likes the building process to give you a time line of your build.
• There should only be a Map if there are built neighborhoods or an office.
• Likes the call for quote better than price per square foot. Thinks the price per square foot would change to often.
• The quote section should be under the Contact nav menu.

• Would first look for photos or floorplans before looking at the building process.
• Likes the building process to show the steps that Bolin Steger takes to build homes. Builds confidence in the builder.
• Would like to know who the contractors are that would be working on the home before he starts building.
• Would like to see a pic of the builder in the home page, helps in judging character.
• Feels a Glossary of Terms is not needed for future or potential clients, only for those who are currently building. Is this site for both or just future clients?