This harder than it looks.

Do I believe this is finished? No. Not in the slimmest chance. Do I believe that in order to get any further on this site is to make this post. I feel that the site is lacking not theme, but in design. In building the site I found that keeping it as basic as possible was the best way to communicate the information to a fifth grader. I admit that I am limited in knowledge and if I understood more this may look much different. If anyone has any advice for the site than just let me know.

http://lawrencefolio.com/oceanindex.html

This is one of thise things that I have changed over and over and over again.

I found that doing the standard chart graphic on the homepage just was not working out and did not work all that well. So I changed the theme and this the graphics completely.  I decided to go with submarines. I know that sounds odd, but I like it. The imagery will hopefully give the feel of being a member of a sub crew and that will carry through as the theme.  I kind of did this backwards in the sense that I set up the photoshop comp before I finished collecting my images.

And I thought this would be easy.

I thought that I understood how type worked, but as I come to someone actively participating on a website I realize that making it work is another story. I think separating all navigation, and titles from all other body copy will help the reader distinguish what is what on the site. Therefore all body will stay in sans-serif and all nav and titles will be presented in Georgia or a serif font.

The hope is, as I have said on other posts, to make this as easy as possible to navigate and get to the information a reader is looking for.  My hope is to present the information in such a way that it will be visual interesting and entertiaining for a 5th grader to look at and read.  Most of these ideas are targeted to accessibility, but a few others I decided to be a liitle bit more visually entertaining.  I have toyed with the idea of using a submarine motet for a bit and a of these go in to that idea a little.  I am sorry that the sketches are not any better.

I wanted the site to clear, simple, and concise. The viewer needs to be able to quickly a easily access and assimilate the information provided. Hopefully this graphic explains things for you.

Client: Fifth grade students, teachers, and parents

Audience: Fifth grade student in the State of Virginia.

Expectation of Site: Information presented in a simple understandable way, while give the viewer a interesting story line while teaching scientific principles of the site.

Outcomes:

Students will have the ability to comprehend, and retain information on scientific principles.

Site materials (scientific principles):

Oceanography: Continental Shelf/Slope/Rise

Marine environments

Physical properties of the Ocean, in this case, Depth.

In researching this topic not only went to fifth grade sites teaching the subject matter, but also to national sites designed for an older audience. This gave me the depth I needed to understand the subject and how it could be properly presented.  No I have not use all of the research information, but what I have chosen to use is the most pertinent to the subject matter.

This site will serve as a portfolio website and will be seen by possible employers of firms and other businesses, other Designers.  I want this to be something will show my skills in design and other genres. I want them what they could gain from me as a designer.

The Portfolio site will consist of 3 basic sections. First will be Design including, Informational, Identity, typography and other categories. Second will be Web Design, and finally photography. These sections do not include my home page, resume/Contact Info, Blog, site map, or others which will also be part of the site. The Purpose of the site will be to attract potential employers.

Stick to the Basics

Teaching Web Design to a Non-Designer

Let’s face it. If someone is building a personal website for a home, Family, or business than they are most likely thinking of making the most flashy, intense site that they can.  The difficulty is that most people do not realize that simplicity, and bit of organization is more effective. Knowing some design will help accomplish this goal. First; think about a simple, consistent layout makes a site easy to follow. Next; know the code HTML and CSS are not as scary as they look. Remember typography is your best friend.  Finally; who is reading/viewing the site. Keeping these basics in mind will assist in designing a simple, effective website.

Layout,

There are a few elements of a website to set out as from the start. First; design the grid.  Six to eight frames on one page is fun to build, but will confuse the reader.  Most of the time a three column grid is popular and is all that is needed. This concept is very important that your grid stays simple, because the reader does not want to look too far to find the point of the site.  The grid will also be the frame work of the site, therefore the simpler it is the easier it will be to build the site.

When thinking of layout a designer also considers the white space of a site. This term infers that a web page should be kept light and uncluttered.  When a reader comes to a site they want to find information easily and quickly.  General sites such as About.com advise “…The reader does not want be bombarded by photos and advertisements even if those advertisements are for the website.” Keeping a site simple and to the point will be more effective and cause the reader to return again later.

Color and Graphics should also be kept in mind when deciding the effect of a website.  Color can deliver diversity, and can send a message about a person, or business, but can also serve as a distraction and annoyance to a reader.  Graphic elements can also enhance the vibrancy of the site. These are elements of a website that a first time designer should be cautious with, but afraid of them.  Web user experience research that

“…website users are powerfully influenced by aesthetics, and that positive perceptions of order, beauty, novelty, and creativity increase the user’s confidence in a site’s trustworthiness and usability. Recent design writing and interface research illustrate how visual design and user research can work together to create better user experiences on the web… that delight the eye and brain. In short: there’s lots of evidence that beauty enhances usability.” (alistapart.com)

Navigation is one of the most important elements of website layout and design. Weather it is the primary or secondary navigation it should remain in the same location for all web pages in the site. Navigation should be clear and to the point. Something as simple as changing the color of a word, or button is enough to tell a reader were to look.

Typography

Next, Type or Font, is essential to the communication of a website. Designers as a basic rule use no more than two to three different fonts on a site. By limiting the amount of fonts it keeps a web page clear and easy to read. Like graphic elements a font will communicate also David Berlow, of The font Bureau, said “I studied fine arts until I opened a drawer of metal type and realized that this was at least half of what told most stories.”(alistapart.com)  If a font hard to read because of the style and how close it spaces letters a reader find it amateur and lose confidence in the site and the designer. Remember that Sans Serif for body and Serif accompanied by large font size will help the reader find what they need simple and fast.

Know the code: XHTML/CSS

Most people in the world consider XHTML and CSS foreign languages. Yet by know, at least, what we are viewing in code will help a designer better understand the design of a website. If a designer understands how to manipulate source code can create a more effective website. There are many that choose to use a visual view only, and though it is easier to understand what is being done, we are not able to control what the software is coding for us.  Thus take the chance of stacking the code with unnecessary body that will slow down the site ability to load and transition between pages. By knowing how code works we know thus know how to organize how the source code is interacting with its partner CSS page. When it comes down to it if you do not understand source code find someone who does.

Know the Reader:

Finally, one of the most important parts of setting up a business understands your client.  They know how to target the audience so that they will gain revenue.  Websites work the same way. A designer is not going to design site for a retirement home and design the layout, font, and language to target a fifth grader. When considering a website a designer collects research, both empirical, and  quantitative, thus they are able know and understand how to design a website that will make a reader return and utilize the site repeatedly.

These are some of the basics of design that will help make an effective, clean, simple website. Understanding the Layout of the site will help project a knowledgeable understanding of business and a quality product.  Know the font used will help forward the idea and the customer base the designer want to attract.  Being knowledgeable about source code and CSS will help manipulate the design of site to attract the desired clientele. Researching who will see the site will help shape a website and that knowledge will assist in bring about the desired results of the site.  These simple, basic elements of designing on the web will help make an effective website.  So stick to the basics.

alistapart. com,

Visual Decision Making, Lynch, Patrick –    http://www.alistapart.com/articles/visual-decision-making/on

Real Fonts on the Web: An Interview with The Font Bureau’s David Berlow, Zeldman, Jeffrey – http://www.alistapart.com/articles/realfontsontheweb/

about.com, Basics of Web Design, Kyrnin, Jennifer – http://webdesign.about.com/od/webdesigntutorials/a/aa070504.htm

Research for this started with the basic idea of what a 5th grader would want to see.  It also need to to be balanced with what my skill level would allow. I think looking for information from from college sources to start, and then using those as a basis of understanding for being able to use sites that are targeted toward the 5th grade age group.

I have tried to search for experts in the Oceanography field of study, and other sources that explain the topics.  I do think that more information would be needed at the beginning, but at the time of this post I have all the information I need.