These are my pages.
When you scroll over it shows more information.
Contact information is important, so I wanted to be so clear and so easy to find and see.
This is my portfolio page.There is an option of also downloading pdf file.
and this is my blog page.
I will be re-taking my art work for the website, but I’m also using my logo, which is also my family crest:
I wanted to use the typography element that I used for my resume, and stay there as much as possible.
h1: (title) Scala Pro Regular, 39 pt.
h2: (main navigation) Scala Pro Regular, 14 pt.
h3: (sub navigation) Scala Sans Pro Light Italic, 11pt.
text: Scala Sans Pro Light, 10 pt. if possible, or, Arial 9.5 pt.
h6: (footer) Arial 6pt.
The grid that I chose to use is 12 column:
And this is the gray box examples using the structure:
1. page with out sub navigation
2. page with sub navigation
Interface:
As I posted on the site map, there are four main navigation and sub navigaion is placed only after portfolio:
The targeted viewer, who are the clients, are most interested in what kind of work I do, and how to contact me after that. Sub navigation will be invisible if you are clicked on navigation other than portfolio, but will be shown on the side when clicked on portfolio. Within the sub navigation under portfolio, content area will be as of gallery, and will have an arrow button to let the viewer go back and forward.
Wire Frame:
Because the sub navigation will be invisible the most of the time, content area may extend to the left by the main navigation area.
Content:
About
I am an artist and designer. I am Mai Kosaka.
In my mind art is to bring happiness and interest in life.
Through art, it is my hope to help you create your
visions and dreams in beautiful and meaningful ways.
Contact
Mai Kosaka
Address: 4311 Turkey Creek Rd. Plant City, FL33567
Email: maimy71@gmail.com
Tel: 208-357-6496
Portfolio
Separate file of pdf
And also photographs in categories of
Art, package, print, logo, web
Blog
I will have content for this later.
My structure seems very simple, but that’s what I chose to do. It communicates what I’m trying to communicate, and is clear.
I have researched and looked through how others do their personal website. and again looked for web design that I like. I found many creative ones by the design firms. The way each of them present their portfolio and or their work was good to reference from.
From what I have seen, and considering my portfolio and resume look like, I’d like to keep it pretty simple, so the examples that I looked for are simple as well. Followings are few of the site that I’ve looked through.
this one uses type only, but the use of typography made it clear in usability, and also interesting enough to look at. 
I like this one’s use of photographs. The website structure is super simple, but the texture of the photos make it pleasing to look at.
Introduction of colors still keeping the simplicity. I like the hand written style navigation that connects with a little sketchy images throughout the page.
I don’t really like the color and everything, but the idea of using grid and actually dividing it visually, I thought was interesting.
Everything was so new to me that I hesitated too long to start in the web structure process. From that I learned that sometimes you just have to jump in and do it even if you don’t know; in the process you will know but if you don’t start it you will never know anything about it.
I learned the importance of sketch process. If you have a solid and good sketches, the process following goes a lot smoother and faster. I am glad that I chose fairly simple sketch to begin with. I found there were many things that were limited in the web design, unlike the other printed design work. The need of neat and organized sketches should be emphasized. There were a few steps in structure wise that I missed in a first sketch that came to be a necessary steps of pages within the site.
I also learned that I have to schedule better. The reason behind is that there are many instances where program does not act how it should be, or it just does not render as it should be. Then you keep fixing things but there are a lot of few pixels that are short or too much that we have to adjust. Webdesign is not as precise as the printing design can be. Many times I had to eye-measure.
More than anything I have a lot more respect for web developers that are out there. This is not something that I would always like to do, but it certainly giving me a good basis to be a good designer even when you collaborate with web designer.
Though we were reminded, I did not organized the file as well as I should have been. Changing it later, as it was warned, is a lot of pain. Now I know that we must organized file better. I did pretty well in naming files, short and clear names made it easy in coding as well as finding from the folders.
This is very rough first try, but I’m willing and looking forward to where I could make more clean and organized html and css file that are friendly to more users.
The Monograph is required reading before the first day of class, but you may also be interested in the 30+ interviews from international web professionals and other resources that the site offers.
