UX/UI DESIGN

RAPID PROTOTYPING | RESPONSIVE DESIGN | WireFrames | Sketch | HTML | CSs 

This project was completed in the summer of 2015.

 

RAPID PROTOTYPING AND RESPONSIVE DESIGN PROJECT:    I redesigned Bridge Cultures' Homepage, starting from drawn wireframes to develop a prototype responsive webpage coded in HTML and CSS.

RAPID PROTOTYPING AND RESPONSIVE DESIGN PROJECT:    I redesigned Bridge Cultures' Homepage, starting from drawn wireframes to develop a prototype responsive webpage coded in HTML and CSS.

To experience the responsiveness of the page, use a computer to view the page. You can then drag the side of your widow to widen or narrow its width. If you wait a moment the page will adjust to the new width of you window. Also, depending on your web browser, you can also right click or control click on the page. Then click on the "inspect" option. A new page view will appear. On the top left, labeled "Device," is a pull down menu that will allow you to select various devices. When a given device is selected the page appears as it would on that device

Bridge Cultures is an early stage enterprise working to bridge socio-economic, cultural and educational gaps, by partnering with entrepreneurs and universities worldwide.

I worked closely with Bridge Cultures’ CEO over the summer of 2015 to develop a visual brand identity, and designed event flyers and informational brochures. Since then I have drafted a mockup and created a prototype of Bridge Cultures' Homepage, which is designed to be responsive to screen size and allow easy access to information and services. 

My Process:

Featured
Mobile First
Mobile First

Mobile first is a prevalent trend in user interface design. The practice involves designing a user interface for a mobile screen first, and then designing for a tablet and desktop. 

Shown here is my mockup of the Bridge Cultures' website on a mobile screen. At the top of the first image is a toggle menu that when touched drops down to reveal the navigational elements of the full website, as shown in the second image.  

At the bottom of the mobile screen are clearly visible navigational buttons that link to Bridge Culture's various programs and services. 

The mobile site is designed with two main purposes: 1. to inform new visitors and potential customers about Bridge Cultures. 2. to facilitate the efficient navigation and use of Bridge Cultures' services. 

Wireframing
Wireframing

Wireframing is a design practice involves drawing quick sketches, or wireframes, of the visual and navigational elements of a user interface. Wireframes allow designers to holistically design a visual and informational hierarchy and systematic organization of an interface.

A wireframe of a tablet screen is shown on the left. From my wireframes, I used the design software Sketch to create a mockups of the Bridge Cultures' Homepage. A mockup of the tablet version of the webpage is shown on the left. From the mockups I coded a responsive webpage using HTML and CSS, which can be seen by clicking the green button above these images.  

The mockup for a desktop screen

The mockup for a desktop screen

 

The original Bridge Cultures' Homepage: