LINDA XU | FBI Homepage Redesign
linda xu, ux design, user experience, hci, interaction designer
21734
page-template,page-template-full_width,page-template-full_width-php,page,page-id-21734,ajax_updown,page_not_loaded,,qode-title-hidden,qode-theme-ver-6.3,wpb-js-composer js-comp-ver-4.3.5,vc_responsive,no-js

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      |      Design      |      Development      |      Before & After

Growth & Introspection      |      View Live


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!)