Redesigning a Website from Start to Finish
Have you ever been navigating the web to stumble across an unfortunately designed website? I think we’ve all been there. It’s not always the web designer’s fault, sometimes websites were just following popular design patterns when they were put together. Sometimes websites can go almost a whole decade without seeing any updates to their structure or design. And sometimes websites are just badly designed from the start.
Making a website from scratch isn’t exactly an easy process. There is lot that goes into designing how the website will look, how it will perform and how it will be structured. A lot of times, smaller companies and organizations can’t afford to pay a whole team to design and build their website and so the whole work load falls upon one person.
Most of the time web developers are, at heart, either more of a developer or more of a designer. This is often apparent when viewing freelanced websites that were designed and built by one person.
Now, as a junior level web developer who’s still in school, I don’t claim to make the best designs. The designs I made for my school classes could definitely use some work. The point of this article isn’t to show that I can make better designs than someone else, but is to walk you through the process of re-designing an existing website. So without further adieu, here is a website that I re-designed in one of my classes while attending Utah Valley University.
Website: parkcityfilm.org
As it turns out, the Park City Film Series organization made some updates to their websites since I made my revisions. It now looks a lot better than it did. Fortunately I was able to grab a screenshot of how the site looked before they made the changes. You can see it below.
As you can see, not everything about this site is bad. The logo is unique and I don’t mind the dark background. Definitely the worst part of the website is the color pallet. There are three different yellows going on that don’t quite go together. There’s also some spacing/ sizing issues going on. I won’t go into every detail about my process for re-designing this site, but I will walk through the main points.
The Color Pallet
I started my re-design by overhauling the colors of the website. I decided to ditch the ugly yellows completely and chose some colors that were a little more subtle. I personally didn’t mind the dark background for the website, but I feel like it distracted a little from the rest of the site and just didn’t look as clean as a white background. So I decided to stick with a more standard white background for the whole site. You can see the rest of my color pallet below.
The Layout
The next most important thing that I changed with this site was the layout of the website. I kept the general structure of the site but I added and changed some things to make it look a little cleaner. The website also was not responsive at the time that I re-designed it so I added designs for phone and tablet sized screens.
The Logo
I mentioned previously that didn’t mind the logo, I just hated the yellow color. So I kept the logo the same and just changed it’s color to a softer blue color.
Finished Product
Here is the final design that I went with. If I was to do it again I would definitely make some changes, but I do feel like it is an improvement over the original design.
Here is a link to my prototype in Invision — Mobile version
Here is my design guide that includes all responsive designs
Landon Hatch is a student in the Digital Media program at Utah Valley University, Orem Utah, studying Web & App Development. The following article relates to (Final Project) in the (DGM 270R — Digital Comp 2 Course) and representative of the skills learned.
