Good Sunday evening happy web design student! I hope you had a great weekend!
Okay, so starting this week we have two projects going at the same time.
Beginning of your Interface Design
You are a multi-tasking, multi-threading, robust and secure web design system! Please review the Production Resources chart on the Module Overview pages from here on out. It will be quite a ride!
The project proposal is a written scope of work document. It is essentially a structured essay that will serve to set expectations of you and your customer and will serve as the as the Roadmap for web site creation process. It is to include information about you and your company, your understanding of the project, your proposed solution, a timeline for the project and an itemized cost proposal complete with payment milestones.
You are going to take the information from your Interview Worksheet and create a narrative. Your examples are at this link.
Please do not copy and paste too much. :) The green text, in these examples, is my “notes” to you.
Why a Project Proposal
A project proposal is how you get a job. Yea, yea, there are those of you who have gotten jobs without a proposal, but I submit that is a sketchy and dangerous thing.
For example, at the City we put out a Request for Proposal, or RFP. Generally, the RFP will stipulate some exact specifications that all proposals must meet. Often, there will be a budget stated. A properly designed proposal is necessary to participate in this process. More often than not, the proposals a three-color bound documents or nicely presented in a three-ring binder. The design of the proposal is paramount. It has been my experience that I ask myself, “If this company cannot design a good proposal, how are they going to be able to design a web site?”
Proposals can serve as an understanding between parties. The proposal can set expectations and even set penalties for “non-performance.” I would like to go as far to say that a proposal can serve as a signed contact; however I am not an attorney and therefore cannot and will not provide to your legal advice. If you have specific legal questions, I suggest you consult legal advice form a licensed attorney.
Proposals set the “scope of work” and are often referred to as just that. Tasks and deliverables (those things that you deliver to your client or they deliver to you) should be listed and defined. Things outside the scope of work are not part of your proposal and therefore subject to a separate scope of work. This way, you can explain to your customer that a change to the scope of work is not a problem, but say the creation of an additional web form or Flash element is outside the current scope of work and that you would be happy to get them a quote for that work.
I strongly urge you to always define the scope of work so that you can exceed your customers’ expectations. To this end, it is important that we be as specific as possible when creating our proposals. Good luck!
Explanation of Project Proposal Scoring
There are twelve (12) sections to the proposal; each is worth ten (10) points for a total of one hundred twenty points (120) points. I assigned you the full 10 points if I feel you have treated the section completely. I assigned you zero (0) points if the section (and information) is missing from the proposal. If you have made a reasonable attempt at the section, then you may receive something between 0 and 10 points. It is almost impossible to receive an “A” grade in this course if you have not submitted a project proposal. It is possible to not do very well on the Proposal and do well in the class, as long as you submit a strong Final Project Web Site.
In general, in the comments section, I try to start off with what I liked about your proposal. If I deducted points, then I tried to explain what I would have liked to see in order for you to earn the full amount of points for that section. I noticed that I tend to have more to write if there are more corrections to be made, so if you receive a high score, and not many comments, consider it a blessing.
The Introduction should tell me a little bit about you and your experience. Tell me about your company. Also include a summary as to what your customer would like and why you will be the one to be chosen. This is essentially your thesis statement: “I am the best choice for you for all of your web site and design needs!” The remainder of the proposal will prove this thesis.
If you are designing a site for yourself, tell me a bit about you and your experience. Let me know why you chose to create the site and to what expect to achieve with the site.
Statement of Goals
This section should be concise. In general I recommend that you choose two to four goals. Order them from the most important to the least important. This will demonstrate to your customer that you understand what they want. If you have it wrong, they will probably let you know.
I discourage quantitative goals, such as: increase sales by 5%, improve gross profit by 5%, obtain first page Google search results, etc. The only way I would include quantitative goals is if I have a thorough understanding of the market and the business for which I am designing the site. Generally, this type of information comes from a comprehensive five year business plan. There are some great classes offered by Santa Barbara City College in the Business department that can take you through the completion of a five year business plan. Basically, if you have not analyzed the market top-down and bottom-up, you are probably only “making-up” the numbers in your goal. If this is the case, it is far better to leave out the numbers for a more qualitative goal.
The target audience is the people who you feel will be most likely to visit your site. Here is would be great to understand a bit of the demographics of your visitors. By understanding your visitors, you will better be able to design your web site for them.
For example, if you find that your target audience will skew older than younger, then it might suggest that the font size you choose for the main text should be bigger, maybe 12 to 15 pixels. If you find that you target audience has a dial-up connection, then your pages should be really “light.”
This will also help you determine the width of your interface. This is always the point in the class where many of you will ask, “Why is the interface only 960 pixels wide, when most monitors offer a resolution of a couple thousand pixels?” Well this is a great question. There are many good reasons for selecting the default width.
An interface of 960 pixels provides a great look for the generally accepted 1,024 x 768 pixel minimum resolution monitor. It centers well and provides some “air” to the left and right.
960 pixels requires the use of multiple columns to breakup blocks of text
960 pixels is the default width of the Dreamweaver CSS templates that we will use.
All this said, the width is your design decision which is based on your content, bandwidth and customer’s needs. You can make it what you want. If you decide on a larger width, then there is a simple “tweak” that will be made in the Dreamweaver CSS template.
The site diagram is important because this is the first time the information architecture is visualized. Up until now, we have been working with words in an outline form. The outline is intellectually important, and easy to manipulate for the sake of organization, but at the site diagram we gain the ability to visualize how the pages will relate with each other in a graphic way.
Site diagrams are essentially a flow diagram for the site. It allows you to easily see the different site levels and to see if there should be any interconnections at some of the lower levels. Granted, our diagrams will probably be relatively simple, but these are important elements as the site grows in complexity.
I invite you to view the video, Creating a Site Diagram with Microsoft Word 2007. This video was the first I made in a series that now spans the enter web site creation process. I hope it is helpful.
All of the videos are meant as a supplemental aid to this course only and are not required. As they follow the written procedures, I consider the Accessibility Accommodation for the electronic documentation.
Content development can be one of the most important sections, but traditionally it is probably one of the most under-utilized sections of the project proposal. This is the section where you design in detail where the content for the web site is going to come from, what format it will be in, and who will approve it.
Probably the most difficult thing you will do as a web designer is get content from your customer. Many customers want you to just put a site together and present it to them. But, as you know by now, it is the content that drives the design. The receipt of content is closely tied in with the project schedule. If you do not receive the content on schedule, you may not have enough time to groom and place it into the pages.
You also need to know what format you will receive your content. I once received a ClarisWorks file for narrative content on a web project I was doing. At the time, I was using a Microsoft Windows workstation. Word didn’t know what to do with the file. I had to request the narrative in the body of an email. This caused a day delay in the project.
File format vary from different versions of applications to different platforms. You might receive file form Excel, Illustrator, PageMaker, Quark Express, Open Document Format (ODX), Portable Document Format (PDF), Tagged Image File Format (TIFF), and hundreds of others. You may even get “hard-copy.” You need to specify what file types you are able to open and manipulate.
Equally as important, you need to know if the content you receive is “pre-approved,” staged on the site for approval, and who exactly has the power to approve content. One of the reasons you need to figure out who is responsible is so that if there is an error, there is a clear chain of command that was followed. I discourage you from being responsible for content. I strongly urge you to make sure content is approved by a designated person in your customer’s company, and that you get all approvals in writing or email confirmations.
In the case you are building a site for yourself, where you are your own customer, I still want you to specify the native file types of your content, exactly what file formats you intend to use on the site, how you intent to “groom” these assets for web delivery.
I encourage you to be as precise as you possibly can at this point.
Designing as a Process
You will notice that the design process did not begin with Photoshop. We have done a lot of work up until this point deciding the main theme of our site, the goals and general information to be included. We have made some suggestions as to what kind of content shall go on which pages in the site and created an information hierarchy called, “Information Architecture.” Once we have these more intellectual issues out of the way, we can start with the graphic design of the site.
Web sites today have a lot of “eye candy” and want to have a definite “wow” factor. It is difficult to get these new age looks by starting with markup language or even a world-renown “what you see is what you get” (WYSIWYG) web editor like Dreamweaver CS5. This is because Dreamweaver is a graphic web design application, and not a graphic design program. The difference is that Photoshop make images and Dreamweaver makes web pages. The key to success is a workflow that consists of marrying the best of each application.
The graphics editing and enhancing capabilities of Photoshop far exceed those of Dreamweaver. Photoshop allows us to create a picture, or interface design, of a typical page on the web site in order to see how the design works from a graphic perspective. We can continue our designs in Photoshop by realizing a home page and page variations. These page variations will end up as site templates in Dreamweaver. In general, it takes far less time working in Photoshop, creating and moving elements, than it does in Dreamweaver.
When we design web sites, we want a consistent look and feel. We want to be able to easily move and manipulate elements within the page design in order to perfect the interface. In Photoshop it is relatively easy to allow elements to overlap and encroach on other elements in order to add continuity to the design. Thematic elements, such as colors, shapes, text can easily be replicated and stored for use later use as the design develops.
When we are ready to prove our design as an HTML page, we are ready to export flattened “slices” from Photoshop into our Dreamweaver site. Photoshop has an export function, “Save for web and devices…” that allows the export and optimization of only the images necessary to create the functional web page. This process drastically reduces the total file size of the interface images thus creating pages that transfer and render quickly.
When we are designing in Photoshop we are always careful to make sure we maintain the integrity of the layers in the master interface design file. In other words, our maser design files must never be flattened. This allows us to easily come back to the design and add buttons, change interface text and make changes to the web page graphics. These changes can be made quickly and exported to the web site for integration in Dreamweaver and then upload to the site.
Beginning of your Interface Design in Photoshop
Start with the Interface Design Procedure! Please note that I have separated the procedure into two documents. I have posted the first of those documents, a new procedure for Photoshop CS5. I have not completed the second half of the procedure for Dreamweaver. I will have that before we start the Dreamweaver section of the class.
I strongly suggest skimming through the entire document to get an idea of where we are going. There are also a lot of assets to assist you on the Interface Design web page, to include the Photoshop Interface Design files for Scott’s Place on the Web!
Please be sure to check-out the “Interface Design Alternatives for Scott's Place on the Web!” page. There are several variations on the classic design.
Photoshop Wireframe Interface Design Templates
I have created a Photoshop Interface Design Starter Files. You may use these to help you get started. They are at the link below.
As a requirement for your Final Project Web Site, the site you create for this class must be hosted on an Internet-accessible web server. A major reason for this is that you get experience in uploading and maintaining a “real” web site. Connecting with a web server to upload your site can sometimes seem like “rocket science.” In the Dreamweaver section of the design procedure, you will learn how to connect to w web server and upload your site.
You may also host your site anywhere you want. Over the years, some students have actually hosted their site on their own web server. Go Daddy is a popular option, and there are thousands of other options. The only thing I discourage is the use of those “free” hosting services that put advertising banners are the top of your pages. Unlike the intentional Google AdSense placement, these “added” ads general are not Accessible and do not validate as conforming XHTML.
Devin, our illustrious System Administrator will provide hosting accounts on the student server in the next few weeks. I will keep you posted.
Student sites are offered so that students who cannot or will not pay for hosting can successfully complete the course. Regardless of where you host, you are required to leave your web site up for at least 4 weeks past the end of the semester in order to give me time to review your site.
My next online office hour is this Monday, February 13, from 7:00 PM to 8:00 PM.
Online office hours are supplemental and not required. However, if you are struggling or having problems keeping up with the course, I encourage you to participate.
My office can only hold five (5) participants. I strongly urge you to be on time in order to be one of the first five to be accepted in the meeting. If there are already five participants and you are not allowed to enter, please keep trying to enter. As participants leave the meeting, spaces will free-up and you will be allowed in.
Ask a Question Forum
I really appreciate the class’s use of the Ask a Question forum. If you have not checked it out or participated in this Forum, I strongly encourage you to do so!