Site Re-Design Instructions
After reading the article on the site re-design, have you decided you want a try at web design? Well, you are in luck. I have the psd layout ready for those that want to join the effort.
Please feel free to email me and request your copy. As mentioned before, you must agree that the psd file will only be used for this project. Also, I have some instructions to read.
The Theme
We will be using a commercial Wordpress theme called Newscast. It has some incredible features that will help move the site towards a better community site rather than a magazine blog. Here is a live preview of the site.
There are a few built-in options for the look. We will be starting with the dark option. It is better to highlight other’s art with a grey background. I want this site to be pretty, but I do not want the design to distract from the content. As you are making your pretty version of this site, please focus on a somewhat muted design (no swirling pink lines).
The final version of the site re-design will look very different from the site preview above.
The Layout
The layout of the site needs to remain the same. There are some things I will be changing. However, as I alluded to the tyrannical dictator in me in the earlier article, I will worry about those changes. I am limiting layout changes for a couple reasons. By not changing the layout I will have a better shot at getting this new site done in reasonable time. And the theme creator did an outstanding job with the layout, I don’t really see any reason to go messing with that.
As you go romping through the psd file please keep everything in its place. Add your design elements to what is already there.
My Design Preferences
I have a few design preferences I put into each site. These are just my preferences, take them or leave them as you wish.
I like to work natural textures into sites. I like to bring a little bit of the real-world into the digital world. I don’t really have any good reason for doing so.
I prefer not to make sites too busy. I stress usability in my designs. Busy graphics often hurt usability. Please, be as creative with the file as you wish. My preference though is that you lean towards calm and elegant graphics.
What’s With the Search Bar?
In the psd file, you will find the search bar within the header looking pretty bad. I would normally work hard to find a better looking solution. However, I have decided that in this case to let the re-design community work it out. If you have any good ideas for this, please work them in.
How Pictures are Used in Design
There are two different ways of looking at pictures for web sites. The content pictures (appearing in articles and posts) can usually be shrunken to an appropriate size and then uploaded into place. But, layout/design pictures need to get a little more thought.
With the pictures used in the site design, we can use larger pictures set in static positions, or we can tile the pictures. This is kind of misleading though as tiling pictures is better done with larger-dimension images (keeps weird patterns from emerging).
The large pictures can stretch across much of the page. Or they can be confined to specific zones. You can look at the zone picture below to get an idea of how it might be best to think about this layout.
Tiled pictures could also be applied to most of the page or to specific zones as well.
As you are creating graphics, keep in mind that the resolution might need to be decreased for the production site. I will be saving the pictures for the web and will potentially be decreasing the image quality to make file sizes more appropriate.
If you are using transparency in your graphics, the graphics will need to be saved in a file format called PNG 24 to preserve the transparency. It is best not to have a wide variety of different pixel colors (photographs) near the transparency effects as this will make the PNG 24 file size very large. This only applies though if we have to include the complicated images within the PNG 24 image. If we can keep them separate by there being a clear definition between the two then we can potentially save them into different files.
Compensating for Different Screen Resolutions
There is a wide variety of viewing devices and monitors we need to consider. It is ok if your graphics go well outside the bounds of the content area, though it would be best to not increase the dimensions of the psd layout.
But, keep in mind that the narrower devices will likely cut off the outer edges of your graphics. And, the graphics need to be constructed in a way so that that they will not look weird on a wide monitor. You can see on the current site how the asphalt texture gradually fades away. I did this for wider monitors.
Tiled images don’t necessarily need to worry about wide/narrow monitors.
HTP Hits
Each time specific actions are done there is what is called an HTP request. Each HTP request slows the page load down. An image download is an HTP request. The fewer requests, the faster the page download.
Have Fun
Other than the above considerations, please let your creativity run rampant. I look forward to seeing what comes of this project. This is my favorite part of web design and I hope you have as much fun with it as I do.
After reading the article on the site re-design, have you decided you want a try at web design? Well, you are in luck. I have the psd layout ready for those that want to join the effort.
Please feel free to email me and request your copy. As mentioned before, you must agree that the psd file will only be used for this project. Also, I have some instructions to read.
The Theme
We will be using a commercial Wordpress theme called Newscast. It has some incredible features that will help move the site towards a better community site rather than a magazine blog. Here is a live preview of the site.
There are a few built-in options for the look. We will be starting with the dark option. It is better to highlight other’s art with a grey background. I want this site to be pretty, but I do not want the design to distract from the content. As you are making your pretty version of this site, please focus on a somewhat muted design (no swirling pink lines).
The final version of the site re-design will look very different from the site preview above.
The Layout
The layout of the site needs to remain the same. There are some things I will be changing. However, as I alluded to the tyrannical dictator in me in the earlier article, I will worry about those changes. I am limiting layout changes for a couple reasons. By not changing the layout I will have a better shot at getting this new site done in reasonable time. And the theme creator did an outstanding job with the layout, I don’t really see any reason to go messing with that.
As you go romping through the psd file please keep everything in its place. Add your design elements to what is already there.
My Design Preferences
I have a few design preferences I put into each site. These are just my preferences, take them or leave them as you wish.
I like to work natural textures into sites. I like to bring a little bit of the real-world into the digital world. I don’t really have any good reason for doing so.
I prefer not to make sites too busy. I stress usability in my designs. Busy graphics often hurt usability. Please, be as creative with the file as you wish. My preference though is that you lean towards calm and elegant graphics.
What’s With the Search Bar
In the psd file, you will find the search bar within the header looking pretty bad. I would normally work hard to find a better looking solution. However, I have decided that in this case to let the re-design community work it out. If you have any good ideas for this, please work them in.
How Pictures are Used in Design
There are two different ways of looking at pictures for web sites. The content pictures (appearing in articles and posts) can usually be shrunken to an appropriate size and then uploaded into place. But, layout/design pictures need to get a little more thought.
With the pictures used in the site design, we can use larger pictures set in static positions, or we can tile the pictures. This is kind of misleading though as tiling pictures is better done with larger-dimension images (keeps weird patterns from emerging).
The large pictures can stretch across much of the page. Or they can be confined to specific zones. You can look at the zone picture below to get an idea of how it might be best to think about this layout.
Tiled pictures could also be applied to most of the page or to specific zones as well.
As you are creating graphics, keep in mind that the resolution might need to be decreased for the production site. I will be saving the pictures for the web and will potentially be decreasing the image quality to make file sizes more appropriate.
If you are using transparency in your graphics, the graphics will need to be saved in a file format called PNG 24 to preserve the transparency. It is best not to have a wide variety of different pixel colors (photographs) near the transparency effects as this will make the PNG 24 file size very large. This only applies though if we have to include the complicated images within the PNG 24 image. If we can keep them separate by there being a clear definition between the two then we can potentially save them into different files.
Compensating for Different Screen Resolutions
There is a wide variety of viewing devices and monitors we need to consider. It is ok if your graphics go well outside the bounds of the content area, though it would be best to not increase the dimensions of the psd layout.
But, keep in mind that the narrower devices will likely cut off the outer edges of your graphics. And, the graphics need to be constructed in a way so that that they will not look weird on a wide monitor. You can see on the current site how the asphalt texture gradually fades away. I did this for wider monitors.
Tiled images don’t necessarily need to worry about wide/narrow monitors.
HTP Hits
Each time specific actions are done there is what is called an HTP request. Each HTP request slows the page load down. An image download is an HTP request. The fewer requests, the faster the page download.
Have Fun
Other than the above considerations, please let your creativity run rampant. I look forward to seeing what comes of this project. This is my favorite part of web design and I hope you have as much fun with it as I do.
ABOUT THIS AUTHOR
Reply