Sneak Peek: This is a responsive web design & development project.
Name: FBI Homepage Redesign
Type: Class Projects
Duration: One Week
Methods
Wireframes
Hi-fidelity Mockups
Responsive Web Design
Tools
Balsamiq
Photoshop
HTML 5
CSS 3
*Disclaimer: This is just a display prototype of a design of FBI Website’s Homepage. It does not function as FBI’s real homepage! It has nothing to do with FBI’s website! The copyright of original FBI Homepage belongs to its author.
Click HERE to view it live!
Keep in mind that this is a responsive webpage, so drag your browser edge around to see different display!
Goals
- To Understand the way in which the size affect the way a website is used.
- To think critically about and make an argument for how content should be prioritized for different experiences.
- To execute a fully-functional home page in HTML and CSS using a responsive design approach.
Design
| Problem Space
The original FBI Website is a non-responsive, poorly designed website, with low level or information organization.
After Change of Browser Width
| Solution Phase 1
Evaluate this page for its current visual structure. Break it into chunks of related information.
| Solution Phase 2
Lo-fi Sketches
| Solution Phase 3
Hi-fi Sketch
I changed the background color to dark gray to match with the theme better. I got rid off the shadows and unnecessary skeuomorphic design, replaced them with color blocks and flat design.
Development
I used HTML5 to build the static page and used CSS3 to make it responsive. I kept the main color and other traits from the original website. I built it from desktop first. There were some changes done to the mockups iterations. I wanted to keep it free for the mobile hi-fi so, I bored the lo-fi mockup in mind and adjusted & designed the mobile mockup using codes. After the desktop is done, it is much easier to design the mobile.
The main metrics is %. The new page is able to function as display purposes.
Before and After
| Before
| After
Growth & Introspection
This was my first time designing a web page all by myself. I learned how to use HTML5 and CSS3 and made them useful tool to fulfill design solution. I also learned information structure,content development, and most importantly, responsive web design.
After this project, I was able to critically think about , analyze and design for the web. I believe I am able to devise solutions appropriate to any given problem and be able to talk about these issues in a manner that is clear, meaningful, and consistent with industry standards. I understood the roles of the designer in creating websites.
View Live
*Disclaimer: This is just a display prototype of a design of FBI Website’s Homepage. It does not function as FBI’s real homepage! It has nothing to do with FBI’s website! The copyright of original FBI Homepage belongs to its author.
Click HERE to view it live!
(keep in mind that this is a responsive webpage, so drag your browser edge around to see different display!)