Crossing Over

Skills: UI Design, Branding, Creative Direction, Coding (HTML & CSS), Graphic Design
Tools: Adobe XD, cPanel, Visual Studio Code

Created in spring 2022 for MEJO 187 (Foundations of Interactive Media)

Prompt: Modify the Los Angeles Times’ “Crossing Over” long-form article into an interactive, responsive website for both mobile and web, from wireframes to mockups to prototypes.

Each of the steps’ “Mobile” and “Web” headers are linked to the respective XD file or live webpage.

Wireframes

I designed fully functional wireframes of the website on Adobe XD with working links to various pages. Chapters 3, 5, 7, 9, and 10 were not created for this project.

Mobile Wireframe

Click the heading above to be taken to the Adobe XD mobile wireframe.

Web Wireframe

Click the heading above to be taken to the Adobe XD web wireframe.

Mockups

I designed fully functional mockups of the website on Adobe XD with working links to various pages. Chapters 3, 5, 7, 9, and 10 were not created for this project.

Mobile Mockup

Click the heading above to be taken to the Adobe XD mobile mockup.

Web Mockup

Click the heading above to be taken to the Adobe XD web mockup.

I designed and developed a fully functional website–including all 10 chapters, menu, profile (overview), profile on Mary Lee Bendolph, map, and timeline–using only HTML and CSS. The remaining individual profiles and the search menus were not built out for the assignment. Click the heading above to be taken to the live webpage, built for mobile and web browsing. The following images are screenshots from the home page on my iPhone and laptop, respectively.

This file was created for non-commercial purposes as part of an assignment at the University of North Carolina at Chapel Hill. All of the images and text have been used in accordance with the U.S. Copyright Office’s educational fair use guidelines.