For the past few weeks I’ve been working on a new website layout and here it is. The logo at the top actually goes back few months when I started a new design to incorporate my portfolio into this website, but ended up ditching the design. After a recent design job, I decided to give it another go. This time I’m very pleased with the results. I took my time, for the most part, and tried not to rush anything. In the end, I couldn’t wait to push the site live though, and it currently is not completely finished. There are probably a handful of little things to go back and finish along with the only major part of the design to finish, the portfolio page. Continue Reading »
Posts Tagged ‘Design’
New WilmotHighSchool.com
Well, the new WilmotHighSchool.com website is in the last stages of development and it shouldn’t be too much longer before it goes live. I’ve got the design all setup and now the web design class is just going to have to move all the old pages over to the new template. Here I just wanted to talk a little bit about what went into the redesign and how we’re planning to transition to the new site.
The Problem
Even though the current website has served the school well for the past year-and-a-half, they wanted a refresh on the website. This also gave me a chance to fix some of the things that have bothered me with the old site.
The header on the homepage was a little large and some of the drop down menus had to open up because of that. A user would have to scroll down just to see the content on the homepage if they were on a smaller monitor.
The flash slideshow was also a bit of a problem. It was the standard Dreamweaver slideshow player and therefore looked very standard. It had the standard looking control buttons, which took up too much extra room on the page. It also had functionality problems. When it would loop back to the begninning of the slideshow, it would always skip the first slide for some reason. In firefox it would load the images at half the size that they should be about half the time, making them unreadable.
The last thing is that the alumni website, powered by High School Reunion, didn’t have the same layout as the rest of the site. Creating a theme for HSR is easy once you have something like a main site template done in Dreamweaver and makes it clear that it’s all the same website.
Layout
For the new layout I decided to solve the number one complaint by putting the navigation up against the top of the page. I also made the rest of the header much smaller by removing the flickr images and placing them in the sidebar under the search and weather.
I’m also a big fan of the new slideshow player. I found the basic code on flashotaku.com, but modified it greatly. The buttons are now on top of the slideshow player, but are only visible when you need them — when you mouse over the slideshow. It starts automatically, and when it loops back to the beginning it show the first slide again! The thing that I like most about it is the fact that it is no bigger than the images that it displays so there is no wasted space.
Photoshop
After I drew up some rough sketches of the layout of the site, I jumped into photoshop to draw it all up. I reserved the top 50 pixels for navigation and the next 100ish for the title. Everything after that is all content. I threw a shadow on the the outsides of the content. I put a red gradient for the navigation bar, with a darker layer over it for the over states.
The biggest thing was the drop shadows. Everything has a drop shadow: the layout as a whole, the title, the nav bar, the nav bar over states, etc. I like how the site has a little bit of dimension. The last site had a “flat” look. With the new site the buttons actually looked pressed-down when you hover over them.
After I had the mockup done in photoshop I got the slice tool and made slices of everything that I couldn’t reproduce with CSS.
Dreamweaver
In Dreamweaver I started the same way I start every site: setup the main divs. A holder, to hold the whole site and make it possible to center it. I had the put in a nav div above everything else, since the nav for this site is the first thing you see. Header, content, and footer divs are self explanatory. On the homepage I had to create a left-column and right-column so I could put in a sidebar on the homepage and on the alumni website.
I put the shadow background image on the holder, put the red gradient on the nav div, and put together a nav bar with Dreamweaver’s built in navbar function with all the up and over states. I defined a title and content section for the template and I was pretty much done.
Finishing Touches
I added the drop down menus and breadcrumb links and I was done. We just had to move the old website over to the new template, which would be done mostly by the web design class at school.
There are a few features that we’re working on now and some last minute changes. I really want to get everything just right and make the transition go as smooth and cleanly as possible.
This side-by-side really shows how much more clean and compact the new layout is.
Mar
28
2009
Almost Done with the Theme
I’m almost done with the new theme for the website. I need to get the gallery working better though. I want something closer to what Matt has. I really just want 1 photo on the blog page and when you click on the single post it shows all the pictures. It would take up too much room to show them all on the blog page, but you need to be able to see one of them for a preview.
Apr
09
2008
Dreamweaver 8 Test
Well I took the Dreamweaver 8 certification test today. It was actually a beta test. I don’t really know what that means, but I know I can still get certified and I’m pretty sure the certification is the same as if I took the regular test. Plus… it was a free test. One of my teachers must have registered or something and had 10 test that she could give and since she knew that I’ve worked with Dreamweaver she asked if I wanted to take the test. Of course I did, what’s there to loose?
The test was, however, a “two and a half hour test”. That’s how long you got to take it anyway. It took me an hour, so I’m not sure if that is a bad thing that I finished with an hour and a half to spare.
The test itself was a little goofy though. There were quite a few (5-10) questions that were repeated at least five if not more times throughout the test. Now, the test was 132 questions long, these repeated questions account for 25-50 of those questions. So I guess there were actually about 70-100 questions on the test. Besides all the repeated questions, the test was almost completely multiple choice with a few sequensing questions. It didn’t have you actually working in Dreamweaver at all.
The test wasn’t too hard. My score was 689… I’m assuming that’s out of 1000, but they didn’t tell me. I don’t know if i passed or not either — I guess once my teacher sends the results in they will decide what a good score is and whoever has a high enough score gets the certificate — I’ll let you know if I passed when I get my test results. That being said, most of the questions were fairly easy. A few of the questions were so easy that I was scared to answer them because I thought it was a trick question and there was the occasional question that was so wordy that I didn’t even know what it was asking.
I would have thought that the test would have concentrated solely on Dreamweaver and that they would have you working in Dreamweaver and performing actions in Dreamweaver. Wrong, Wrong, Wrong — This was more of a general knowledge HTML/Web Design exam than a Dreamweaver test. There were a lot of questions about Copyright, Accessibility — as in accessible to people with disabilities, and general HTML/CSS questions for someone who might be using Dreamweaver as their primary HTML editor or something. It definatly wasn’t what I thought it would be, but I still knew most of the answers.
So far it has been a pretty good overall experience. Now I’m anxious to see my final results and if I get the certifiacte. I think this could be a great thing to have when I’m going to get a job doing this stuff.
Apr
24
2007
Theme Design – In Progress
I just started my “re-design”. It’s not much, and it’s actually based off my old theme. But I wanted to make it a little more interesting and unique. So far I’ve gotten the header and sidebar redesigned. I’m not really happy with the header though, it’s huge(which i do like), but it takes so long to load. I think i might chop off the sides, it doesn’t need to be 1400 pixels wide. If I cut it down to about 800 or 900 pixels and make a a gif instead of a png that should help alot. Along with that I’m going to create a much smaller header for the interior pages in my site, and add a better homepage. The big header will be on the “Home” and “Blog” pages. The small one will be on all the other ones.
The sidebar isn’t great either. It isn’t really new, so I’m going to think about it this week and probably have my design done by the end of the week.
Along with what I’ve done so far, I’m going to tweak the posts a bit, and change the comments page up. I’m also going to add some more images in various places, now that I’ve got my gallery set up, which I’m also going to atempt to redesign. I think I can do it. The design right now is alright, but I think I want to make a few changes. I don’t know, we’ll see.
If anyone has any ideas, let me know. I like your feedback, which reminds me, I’m going to fix the feedback page now.
Apr
05
2007
