Final Critique

Index of pages from this semester.

Fall 2010: Update 11

This week I worked on a small portfolio I can take to interviews. It matches the portfolio site I've built. The book's about 8x8. It will be spiral bound, which makes margins a little tricky. I'm thinking if I leave half an inch on the side that's going to be bound, the contents should be clear. There's about a dozen pieces in the whole book, some from the internship I did last year, some from classes, and a few things I've done independently. It also includes a short resume, contact information, and a spot for a business card. This coming week, I'll have to make some business cards to go with the book.

Fall 2010: Update 10

I've gotten a finished website up on the Internet! I did some research on the best site for webhosting, and finally settled on ipage.com. The price was reasonable, they have lots of protection features to keep the site (and my information) safe, and they have a 24-hour live customer service department. That said, check out AttentionSpann.com to see my new portfolio site. Once I got it up on the Internet, though, I decided to make some changes, mostly in the color scheme, which means I've been introduced to the joy of managing uploaded files. That's a bit of a pain, but I can't really complain considering I now have a portfolio site up and running.
I've also started working on a small book to take to interviews. I've got the design down in my head; it's just a matter of getting it out and on the computer.

Fall 2010: Update 9

I've been working on my porfolio site this week. I started building some graphics for it last week and started assembling, as it were, Monday. There are five pages to the site: home, advertising, graphic design, resume, and contact. As of right now, there isn't anything on the home or resume pages and just simple contact information on the contact page. What's taken all week was setting up lightboxes on the advertising and graphic design pages. There were other ways to display my pieces on the website, but I decided I like the lightbox best because it lets people click on one piece and click through the larger images without having to click on another thumbnail. In addition to the lightboxes, I built a navigation bar that took some time. I'm pleased with the progress I've made in just one week. Check it out for yourself.

Fall 2010: Update 8

Toward the beginning of the week, I was looking for and trying to make sense of some css and html code for galleries and navigation. Specifically, these were code for navigation using tabs, which involves mostly css. You code the way the links appear differently than they normally would. I noticed that most of the examples and tutorials I found use lists to organize the links, which I would never have thought of. The gallery script I found was impressive, but there were a few problems. The first is that I can't make sense of it; it's too advanced for me to do anything but copy it. The second was that it has spotty cross-browser support. It works great in IE, but Firefox and Safari are tricky. So, it works in most browsers; it just works funny in most of them.
The last part of the week, I started working on graphics for a portfolio site. I want to build one from the ground up. I know you can use websites like wix.com to build and host a portfolio, but I want to build one using css and html (and as little javascript as possible) just to prove I can.

Fall 2010: Midterm Critique

Index of pages I've worked on so far.

Fall 2010: Update 7

I've been looking lately at the css zen garden website. So, this week I've been doing a lot of studying the code (html and css) written by the site's contributors. It fascinates me that so many different designers can use the same html and css tags to make such different designs for a page. The css and html is right there on the site to download because they want people to submit their css designs. I've been thinking that I could, perhaps, do something like the css zen garden for my portfolio website. I could design a few different css files and put links on the site. I don't know if that will be feasible or not, but it is something to think about. This next week will be a lot of reading. I got the book that goes with the website, and it looks like it will be really useful.

Fall 2010: Update 6

It's taken me half the week, but I think I've finally figured out why I can't get my email forms to work properly. After a good bit of Internet research, I found out that the files have to be uploaded to the Internet for them to work, not just opened in the browser. That was an easy enough problem to solve; I uploaded the files to my I-drive. And they still didn't work. Back to researching. I have the final answer. The server has to be set up to handle php, which is what I was using to handle the email part of the form. I know what the problem is, but I have no way to fix it (at least not that I know of yet, and providing this is the right answer to the problem).
While I wasn't obsessing over getting contact forms to work, I made a good bit of progress on dropdown menus. Last week I built one using only html and css that worked on only a select few browsers (none of the popular ones). This week, I found some great tutorials that show how to build two different types of dropdown menus. One is what I would call a collapsible menu. If the user clicks on a heading, the heading opens to show everything that was under it. Clicking again closes the heading. The other type of dropdown menu I found was what I was originally thinking of. When the mouse moves over the headings, a list of subheadings appears underneath. Moving the mouse down onto the new list lets you choose one of those things, or moving the mouse over another heading closes the first list and opens the new one.
I know all of this is more about technique and how to do things without any regard as to how they look, but I'd rather have the knowledge of how to do things first. I can worry about making them look good later. Actually, I think I'll build a sample site (or rework my portfolio) using these techniques as a sort of practice project.

Fall 2010: Update 5

There's been a lot of reading this week. I never thought I'd say that I'd read most of a text book in only a week, but I can say it now. There's just a few chapters of the HTML book left to finish reading. The book started with really basic things like how to code a page with and tags. The higher chapters are where things get interesting. Some of the things in the higher chapters are things that a program like Dreamweaver will do for you, but I think it's better to be able to do them on your own. For example, one chapter explains how to embed video and other media in pages. There's also a chapter on forms that I'm really interested in; I just can't figure out how to get the scripts for the form to work right. Lots of great stuff left to look into, though.

Fall 2010: Update 4

I got a little sidetracked this week. Joseph gave me some great books about Dreamweaver and CSS. I'm really interested in the book about CSS because the things in it can be used with any html editor and not just specifically Dreamweaver. There are even tricks to build things like drop-down menus that would usually require JavaScript using CSS and only CSS. On the other hand, there were some really cool tricks with Dreamweaver in that book, like building and working with templates to make large websites easier to manage. I've let the Panhandle Pump website and brochure go for now so I can concentrate on these books. Hopefully that means I'll be better equipped to work on those things when I pick them back up.

Fall 2010: Update 3

If you check out the SCAD Industrial Design Brochure link here, you see a great web brochure with simple intuitive navigation. The pages turn just like the pages in a real magazine would. I've been trying to figure out how to recreate that action for use in my own online brochures. The simplest thing I've been able to come up with is designing a brochure in InDesign and exporting it as an SWF. That automatically gives that great page turning action. The problem with doing it this way is that not every computer can play SWFs.
Now, as I see it, there are two options from here: make two brochures (one that's an SWF and one that's not), or using some other way to get an animated transition. InDesign offers the ability to export the file as an interactive PDF; but the only way to see the page tranistions is to view it in full screen mode, which complicates the process of viewing an online brochure.
After a little research, I found out exactly how SCAD made their brochure. They used an online digital pubishing service at yudu.com. It offers free software that lets you upload PDFs to create the sort of document like the SCAD brochure. So, I'm going to check yudu.com out to see if it a better option for online brochures.

Fall 2010: Update 2

So, I was pretty sick the beginning of the week, and I didn't make it to any classes or free lab times then. I was able to work on moving the contents of the page without moving the background. It wasn't as hard as I had thought it would be: the css to do it was so simple even I could understand it. Tying the image size to the size of the window wasn't as easy. I found a few tutorials that involved JavaScripting to find the size of the window and calculate how to fit the image; but it eventually dawned on me that you can just set the image width and height to be one hundred percent of the window width and height, which solves the problem without a lot of complicated JavaScript. The only problem with keeping the background image tied to the window width and height is that the image gets moved out of proportion, and I don't think there is anyway to keep that from happening. On a different note, I was also able to come up with a way to keep part of the page, a separate column off to one side from moving with the rest of the content.

Fall 2010: Update 1

Joseph suggested turning the brochure for Panhandle Pump Company that I was working on last semester into a website and an online brochure. That way I have the information more or less collected and organized already, and all I really have to do is figure out how best to put that information into an electronic format. So far, I've been working on a website. It's more technical at the moment than good looking. I've been more concerned with making the css work than anything else so far. I was able to find a tutorial for positioning a footer at the very bottom of the page, and I was able to add to that to make a content box that filled the page and didn't shrink if the content was smaller than the page. I recently realized, though, that a static background with a moving content area might be a better choice. That's what I'll have to look at next.
I do have what there is of the site up on the Internet on my I drive if anyone wants to have a look.

Fall 2010 Semester Plans

This semester I want to focus on the technical side of web design. I want to learn more about using HTML, CSS, and JavaScript to develop websites and solve the problems and challenges that come with the Internet. At the same time, I want to continue working on what makes good web design, and I'll also be looking at how to turn regular printed brochures in to effective online brochures.

Week 10: Portfolio Breakthroughs

This week, I continued to work on my portfolio site. I added a few pieces of paper and drawings to the background that is behind the book on the opening page. I also added the link that will open the book so the pieces can be seen. For the sake of time, I've given up making an animation of the book moving from laying closed to sitting up open. Instead, the view will just switch from one view to the other with no animation in between. Considering that change, I also added a background of scattered papers and pencils to the main part of the portfolio. Here are some screenshots of the background and a link to the opening page of my portfolio:I also fixed the problem of the next and back buttons not working if you clicked a tab first. Of course, the solution was something incredibly simple that never would have occurred to me. I simply masked the back button of the first page and the next button on the last page. They are still there and can still be clicked, but I'm the only one who know they're there. Before, clicking on the pieces in the book opened a larger version, so the details could be seen. I couldn't figure out where to put the code to get back to the main portfolio, though, with the child or the parent. It didn't seem to matter where I put it, I got an error message that the return button wasn't being detected. I finally realized that the code I was using was looking for a button to be clicked on when I didn't have a button. I deleted the code that looked for a particular button and asked it, instead, to just listen for a click anywhere as the cue to return to the parent. That fixed that problem. Here is a link to the page with working children:

The problem I''ve been having with the page turning animation is still something I haven't figured out. I left that alone this week in favor of working on other things that I thought I could solve fairly easily. The fix for the problem with the back button on the first page gave man an idea, though. It may be a question of creating a mask of some sort in the page turning animaton that will keep the content from being seen until the page finishes turning. If that works, I really only have to put a resume on the page I've reserved for it; and I think my portfolio will be done.

Week 9: Portfolio Still

I spent a lot of time this week looking for how to fix the problem that I discovered last week. When the pages turn backwards, you see the previous piece before and after the page turning animation plays when you should only see the previous piece after the page turning animation plays. I spent a lot of time looking for tutorials, hoping to find one that addressed the problem of turning the pages backwards. I found a few full animations of books with pages that turn forward and back. The action script was hidden, though (They were copyrighted, I think.); and I couldn't see it; so they weren't very helpful. I didn't find one that helped me fix the problem, but here are screenshots of and links to two of the best page turning tutorials:

When I couldn't figure anything out to fix that, I started working on making the pieces in my portfolio into buttons. When someone clicks on them, they will get a larger version of the piece so they can see the details. Here's a link to the portfolio as it stands now:

I did notice some more problems with the next and back buttons. If you click on them in the very first frame, they work just like they should. If you don't click on one of them and click on a tab first, the next and back buttons don't work at all. I'm sure it's some little quirk of action script that I need to figure out. That's what I'll start out working on next week.

Week 8: Portfolio

This week I did some more work on my portfolio website. I actually have the animation that takes people through the portfolio mostly finished. All the tabs work, and the pages turn forwards and backwards. The one big problem I have is what happens when the pages turn backwards. The frame changes to the previous one, which means the piece displayed on the page changes, before the page turning animation plays. So, you see the previous page before the page turns and again when the page turning animation ends. I'm not exactly sure how to fix this problem, but I'll work on it. This is a screenshot of the portfolio animation and a link to the animation as it stands so far. I've also done some more work on the first page of the site. Most significantly, I've added my name to the first page of the notebook. I figure it's probably pretty important that people know whose portfolio they're looking at. I

still have to animate the book from where it rests on the desk at first and get it in place to match up with the animation I've already got and finish the desktop where the book is.

Week 7: Panhandle Brochure

This week, I worked on making changes to the Panhandle Pump brochure and on getting my portfolio up and running. I've made some changes to the brochure that were suggested during the critique. Specifically, I've changed the majority of the font to a san serif font for legibility and for the breathing room it gives the brochure. I've also been working on changing out the pictures in the brochure and adding new ones. I've been exploring what I can do with larger and smaller horizontal bars in the composition, too.

These are the pictures that the owners want added to the brochure:

I've also gotten my portfolio running to a point. It's not finished, but the animation of the pages is working. Here is a link to see what is up and running so far: http://pixelcola.net/3618/kims/portfolio/Untitled-1.swf.

Week 5: Poster and Recipe Book

This week I worked on an entry for the Shrimp Festival poster contest. The chamber of commerce asked for a poster that expressed the main themes of the festival (food, music, art), the year, and the location (Gulf Shores, AL). The physical requirements were size (18x24) and colors (bold, bright colors).

I divided the festival into its separate parts. There is a block for the art festival, a block for the music festival, and a shrimp to represent both the food and the festival overall. Each object is done in varying shades of the same color to give them some depth without taking away from the simplified stylized look I wanted for them.

I also finished the recipe book I was working on last week. I've added the extra information to the bottom of the recipe pages and rearranged some of the information. The book turned out to be twelve pages long, not counting the cover.

This page is the front and back covers of the book.

This page is the first and last pages of the book. These are the lists of information that needed to be presented together. I've tried to add some interest to the information by playing with the numbers, giving them a more playful attitude.These pages are some of the recipes with another little list at the bottom.

This is the center spread of the book. The featured recipe is on the right-hand page in the black box, treated the exact opposite of the other recipes.

Week 4: Recipe Book

I've been working this week on a recipe book for a local dietician to use for a presentation at an elementary school. There were only a few requirements for this project:
1) It's going to be printed on 8.5 x 11 paper and folded in half to make a book
2) It has to be in black and white
3) Of course, it has to include all the information I was given.
The book's actually turned out to be longer than I had originally thought; it's going to be about fourteen pages with the cover. I was given ten recipes, two "top ten" sort of lists, and another two pages of other information to be included. Each recipe and the two lists will get their own pages, and the other things will be added to the bottom of pages where they will fit. That the book has to be in black and white and that it is for elementary school age children and their parents has helped shape the design.

This is the cover and back of the book, the front being on the left so it will fold right with a little logo on the back. The black blocks around titles is something that I carried throughout the book.

These are the first and last pages of the book, which is where I decided to put the lists. The amount of information that needs to go on each page and the requirement that everything be in black and white prohibited a lot of graphics. Instead, I concentrated the design on working with text alone instead of trying to incorporate a lot of graphics that would just make the design busy.

These are two of the pages of recipes. Carrying on the black title box on the front and the title boxes on the list pages, I've made title boxes for the names of each of the recipes. The little extra bits of information will go on the bottom of pages like these that have room at the bottom, probably in outlined boxes.

This is the middle spread of the book. The recipe on the right is supposed to be the featured recipe, which is why it's in a black box, in reverse from the rest of the book.

Week 3: Portfolio (still)

I know I'm late with the post this week; but I was at the Addy awards ceremony for AAF Pensacola last night, and posting completly slipped my mind.

That said, I continued work on my portfolio this week. I built a version of the notebook I want to use laying flat, so the work displayed on it will be flat and easier to see. The next thing was to get the page to turn on the book. I found a great tutorial for doing this on tutorialized.com; the screenshot links to the tutorial. Creating the animation was a little time-consuming, but it happened eventually.
The real problem was tying the page turning movie clip to a button. First the page wouldn't stop turning, whether the button was clicked or not. Then the page wouldn't turn at all even when the button was clicked. Eventually, I put a stop action on the first frame of the movie clip and programmed the button to skip to the second frame of the movie clip and play from there.
I reveresed the movie clip and added a button to turn the page back, so the book will turn both ways.
I also did a little bit of work on some other pieces to go on the desktop behind the book.

Week 2: Portfolio

I haven't gotten any feedback on the Buccaneer rackcard and the Panhandle brochure, so I wasn't able to do much work on those this week. Instead, I started work on my digital portfolio. I wanted make something that was personable and sort of informal. What I came up with was a desktop with papers, pens, and a notebook scattered on it-something like what my desk really looks like. The notebook will function like a real notebook and be the functional part of the portfolio, though I may come up with something interesting to do with the other objects on the page. Clicking on the tabs on the notebook will open it to the particular category of work selected. I'm planning on shifting the perspective on the book when it's clicked, so it will be flat, which will display the work better.

I'm planning on making the page look like it's really turning, but that will take some research because I can't really think of how to do that off the top of my head. So, I've gotten a good bit done; but there's still a good bit to do.

Week 1: rackcard and brochure

This week I've been working on a rackcard for Bucccaneer Gift Shop in downtown Fort Walton. I decided to go with the name of the shop and liken the rackcard to an old treasure map. It's certainly not finished; I need some pictures and some input from the customer before I can finish it. I also designed a logo for the store, since they don't already have one.

I've also been working on a sales brochure for Panhandle Pump Company. I used a sort of a grid pattern for the layout since it's an industrial sort of business. I also did a little bit of redesign on the logo. It wasn't anything huge; I just stylized the outline of the state a little. There is still some work to be done on it. Other than the picture on the front needing to be changed out, it's pretty close to being done.

Digital Senior Project

For the project this semester, I'm planning to do an internship at Hillis Graphics. This will involve creating pieces, from posters to business cards, for clients, which will eventually be printed. Along with the internship, I'm planning to do several other smaller projects, some of which will be for printed graphics and some of which will have to do with electronic graphics.