The inspiration
for this site was sparked by the Fireworks class, formally known as
IMED 1391 Fall 2001, taught online from Houston Community College by
Carolyn Tan.
Original Concept
Starshine Design began as an idea to use a high tech motif to showcase
the projects completed during the course and to meet the goals of the
final project for the semester. Originally the work began just perusing
other graphic elements on the web. Spinning globes and hi tech images.
The first format didn't even consider the name or theme Starshine design
but was envisioned more like an industrial theme Web design "factory"
I
had the idea of using some sort of spaceship type console that would
employ the familiarWindows Media player screen interface in a different
way. (Oddly I work almost exclusively on a Mac) I was impressed with
fellow student Anthony Kimmon's "Lightbox" approach to showing
off work on his home page and hoped to be able to do something of that
sort on my final page.
I also discovered a cool looking Liquid Crystal Display
that I knew I wanted to incorporate in some way in the final design.
First Design
Being left handed I am not much for Flowcharting on paper. I tend to
build and modify on screen and intuitively. I had an idea there would
be four to six pages featuring my work and possibly my resume since
that site also is in dire need of update. So the work focused for the
first week or so on assembling the elements for the main page layout.Even
looking back on that evolution give a scary glimpse into how I work
sticking things together in all sorts of ways until they star to gel.
Here then the first attempt at a Web Factory look.
The
background was in fact a modification of a free screenshot from a 3D
graphic designer. The watch and the CD tray were supposed to montage
into the theme But they felt sort of just stuck in there and even before
being feather masked in or anything they didn't really make a clear
statement to my mind. Note the original "name" world wide
web.com.
Version 1A
Adding buttons on the left in a traditional feel got rather messy. Now
things are feeling off balance and squeezed in. 10 buttons also well
exceeds the simplicity I think a first page should offer. While I have
the colors pretty well locked in at this point. Cool tones, blue and
green being the prominent hues, the overall feel is that many elements
are competing for attention. It's almost impossible to find the "Center"
and even though the "title" is up on the page it was never
centered to either frame. Back to the drawing board I think.
Version 2
The idea of finding a name that wasn't registered was a serendipity,
since I needed something for this project and I wanted to also find
a "brand" for marketing my own flavor of Web Design and media
skills beyond this class. In fact Chrissie and I have registered the
domain and put up a placeholder page for our endeavor Starshine Design.
So the fun began of working with possible logos for the endeavor. I'm
not convinced anything here will be the final pick but it is a good
place to experiment and allow it all to evolve.
The
idea of the upper left hand "company logo" is instituted.
The "starfield" is developed as a less distracting backdrop
to the media screen and car's the "Star" theme. The stylized
Yellow caps is carried over form the logo into places within the design.
Button count is brought down to a less daunting number of seven Still
a bit more then the ideal but working better. The traditional "buttons"
just don;t feel very hi-tech however and I decide I'll experiment with
a different design once inside the page for the Navigation Bar.
I am more comfortable
with the balance and color usage of the page and proceed to work on
the screen icons and frames for the roll-overs.
Building the
Main Interface
I spent about 16 hours playing with the graphics that I collected for
the pages and the screen displays Taking a 3 D gallery image and re
placing the items with my own was prolly the biggest piece of over kill
since the "gallery" is so small and the work is too tiny to
really see. But I got more practice moving back and forth between Photoshop
and Fireworks. Learning to take screen shots (images right off my monitor)
like those on this page was helpful. Building the 8 frames for the "monitor
screen disjointed rollovers helped me understand the relationship between
frames and layers and elements and hot spots and slices. At this level
I started to see which pieces would be used over again and decided to
star using the Symbol library to manage repetitive images. In the above
iteration both states of button as well as the screen background an
the Starshine screen logo were all simple Library images. Content for
each text window was developed and the image alignment, centering, and
optimization began taking place. Elements would be optimized even before
the final export to keep sizes down. Getting the correct order of the
page elements was finalized and the hotspots and slices were built.
The Internal
Pages
About Us, Restorations, Sample Pages, Gallery, Tips & Tricks,
Report, and the USA Map Page (found as the other clickable globe state
of the Nav Bar home button) were the target pages. I knew I needed to
find a uniform way to Navigate through them, and I wanted to bust out
of the box a bit and try something a tad more contemporary.
The starfield was fun to build and the idea of the tip of the planet
earth as the curved edge came into play. I didn't want the Navigation
Bar to take up premium space but there were a lot of buttons to cram
in. I built the Nav Bar much quicker having tinkered so much with the
main page buttons. I learned that if I was going to have a "glow
or shadow" or some sort of "effect" that extended beyond
the original button as in the Home button and each "star"
of each link, it is better to build the Over state first and work backwards.
Even assigning the slices to Frame 2 first, made sense since frame one
is really an omission of elements under the same slice. All worked well
and the most time was spent tweaking the the alignment of the words.
The Nav Bar was then added to each of the six pages ( the USA Map is
already a mess so I wasn't going to slow it down even further). I wasn't
sure how to handle the display of the button which indicated the same
page you were on. For example on the About Us page... what should the
About Us text be doing? Vanish? dimmed out? An Arrow pointing to the
place you are? Opening Dreamweaver I learned to how to identify easily
the "over state" JPG for the existing page graphic and I cut
and pasted the the graphic link also into to the Out state area and
just deleted the slice. The end result is a permanent OVER State for
button of the page you are on. It seemed simple and an easy way to help
the reader know where they are. An additional LCD display directly under
the Nav Bar serves as a reinforcement and sort of title are for each
internal page. I decide I liked the Nav bar far better then the buttons
on the first page but they each served a purpose and demonstrated two
styles working on one site.
Adding
the Flow Chart page created the first and only third level page, to
this site.That
required some additional navigation support. I added the "back
to Sample Page button on the title bar. and to balance it out a "Ahead
to Gallery" button on the right side. A
simple rollover allows the buttons to glow green and I discovered how
to paste the HTML code in using Dreamweaver.
Content Development
Working
with the idea that this was to be a place to introduce the "new
company" An about us page strives to give the site a bit of character.
Each of
the main page
screen
windows are literally window dressing to pull the customer in and give
them a sense of familiarity and what to expect. Bu the About page gives
a bit more detail. IN hind site a simpler design would be just to make
the buttons required for the project and it may have been more helpful
for the instructor not to have to wade through other art and projects
from other classes to find the maps and pop ups, but I felt almost all
the design elements with the exception of pop ups, animation's, and
the USA Map are demonstrated in the main page. Also I have other people
I wanted to showcase my web sites, retouching work, and photography
with and so I designed this to both demo the class work and my overall
web and photo work.
After working to
get a handle on the Dreamweaver interface and figure out how to get
it to up load to the Student server site parameters I begin publishing
the pages. By Friday Night I have the thumbnails for the gallery and
some of the Sample pages work. The restorations page code needed only
minor tweaking from it's original habitat on the server. This Report
page and the Tips and Tricks page will be the last ones completed as
I pass the halfway point in the design of the site.
I am toying with
different backgrounds for different pages. The About Us page uses a
computer paper style( thank you Appleworks) and a monotype font which
is added line by line in Fireworks. then flattened down. Thank goodness
for saving the PNG files when typos were spotted. I find a grid background
elsewhere that looks hi tech for the artwork display pages. Eventually
it is also used with a skew for the new improved main page. At this
writing I am toying with making it the uniform background for art display
pages. I'm using black table cell fills to keep the text readable and
the images well framed above the grid lines.
Main Page Final
Revision
I post the URL with the existing work Friday night. Carolyn suggests
I keep the colors uniform between the main page and the inner pages.
I have to agree. It had been nagging me. The Nav Bar was a cleaner image
and more fun and inviting to roll and click on. I spend Saturday and
Sunday reworking the main page. IT is taking me time to do lots of this
but I'm learning how things operate so I feel my speed and depth of
knowledge of the software is improving. chrissie and I are now both
frustrated because there is no information on how to get both Java script
rollovers AND animation frames to work on the same page before exporting.
I'd have loved a twinkling star and a spinning globe.. chrissie had
been hoping for a rotating art display on hers. Some things just have
to be abandoned. Maybe they will offer a Fireworks Two class now that
we are learning everything in the home stretch.
I'm wrassling intensely
now with Dreamweaver. The USA Map files are massive and forced me to
increase memory to the software which apparently isn't a healthy thing.
I am crashing all the time. I discover Fetch is so much easier and quicker
to up load or delete files with. Dreamweaver seems to make some interim
cache list which makes uploading the ridiculously large map files an
all day event.
I reduce the DreamWeaver
Memory after the USA Map fiasco and the crashes happen much less. Still
I am not convinced Dreamweaver is the ultimate tool when it has been
very unstable this weekend.
Now it is Monday
morning I've been on this thing for three weeks now and I'm ready to
be done with it. My new front page looks good. But I gotta admit my
fellow students have much cleaner simpler and very compelling designs.
I wonder if they are still hiring at MacDonalds.
I still need to
do the tips page and I think I will revise the background to be uniform
on all the graphics pages. I have a few more elements to add and delete
to the pages themselves. I am thinking about a table of contents and
some anchor tags for this page now that it has gotten so wordy.
Monday Night and
I am done with all the pages and backgrounds except for Tips and Tricks.
Overnight Monday to Tuesday I load the PNG files, write the Tips and
Tricks page and start tweaking all the pages so they are uniform. I
decided to reload the index page as a .GIF and the text looks so much
cleaner then it had. Even thoguh the file size is larger.. it seems
to load quicker.
Spellcheck the contents
on text pages is completed( hopefully) and then I give the whole thing
another look and hope I get a decent grade.
Many thanks to all
my classmates and our dedicated and wonderful instructor. May we work
together again inthe future.
