Look What I Can Do!
Magnificent Sea Creatures: Celebrating the Magic of Marine
Life
- Developer: Brijique Ferguson
- Tools & Technologies: Visual Studio Code, Bootstrap CDN
- Languages Used: HTML, CSS, Javascript
- Project Description: I created a 1-page bootstrap layout copying, pasting and modifying the code from the Bootstrap CDN framework. The layout consisted of two images on the page, a navigation bar with customized color and link text, a container, a card component, a call-to-action button, h1-h3 tags and lorem ipsum as text content.
- Development Process: I created a 1-page layout by utilizing Bootstrap’s grid system. The grid system would ensure it not only looked great on all devices, from desktops to smartphones but that it was responsive as well. I added a carousel with 3 royalty free images and 3 styles to the footer of the layout. I utilized the Bootstrap framework for layout and styling. The grid system made designing the responsive structure seamless, while components like buttons and carousels enhanced interactivity. The project was a valuable learning experience in creating a professional-looking, responsive website. I thoroughly enjoy the ease and flexibility of the Bootstrap framework.
- Image Integration: Images were provided by instructors. Images were placed in a folder titled “Bootstrap” and images were labeled in order to insert into an <img> tag in my HTML.
- File Management: File was compressed a labeled “brijique-ferguson-bootstrap-assignment”.
- Project Delivery: File uploaded to Canvas for submission and Github.
Click the black, underlined link below to visit the Magnificent Sea Creatures Github.
https://github.com/Brijique/Magnificent-Sea-Creatures
Canvas of Creations
- Developer: Brijique Ferguson
- Tools & Technologies: Figma
- Languages Used: Figma
- Project Description: As a UX Designer for the canvasofcreations.com art event website, my partner and I were responsible for creating low, medium, and high-fidelity wireframes to guide the site’s layout, functionality, and visual hierarchy. User research was provided to us, to develop detailed personas, which ensured the design catered to the needs, goals, and behaviors of the target audience. A site map and user flow map were also created.
- Development Process: The process involved iterative wireframes, aligning user experience with the event’s artistic vision while optimizing for accessibility and user engagement. This comprehensive approach ensured a seamless, user-friendly interface tailored to enhance the online event experience. I am thoroughly proud of our design.
- Image Integration: Unsplash plugin on Figma was used to find images.
- File Management: A CanvasofCreations Google Drive Folder was created. Inside this folder was a UI/UX folder where all of my files were uploaded for use.
- Project Delivery: Developers creating website through WordPress, granted access to the website.
Click the black, underlined link below to visit the Canvas of Creations website.
Sprinkles
- Developer: Brijique Ferguson
- Tools & Technologies: Figma, Canva
- Languages Used: UI/UX Requirements & Rubric
- Project Description: A group project that helped familiarize me with UX and UX testing. We had a rubric to follow during the entire project. Each person was delegated some aspect of the project to complete. This project centered around the UX design process. We started with a prompted problem which was the cupcake shop Sprinkles having a higher frequency of calls into the bakery during the checkout process. The company wanted the number of calls to decrease and check out to be more simple, with fewer problems.
- Development Process: As a group, we defined the problem and needs of the user, then we began to ideate. During ideation, I completed a Comperative Analysis, which highlights the pain and pleasure points a user has during their time on the Sprinkles website, potential problems faced and possible solutions for said problems. Wireframes were then created that addressed and solved the problems. Once the wireframes were approved, a prototype containing the solutions was created and then tested amongst the group.
- Image Integration: I took screenshots of various Sprinkles’ checkout pages that contained errors. I used Figma to make alterations to the images, such as creating a solution for the issues customers faced during checkout. Images were also used to create wireframes and a prototype.
- File Management: Team Sprinkles uploaded all documents and images to a Drive folder labeled “Sprinkles.” As part of the UI/UX portion of the group, I uploaded all of my content to a folder labeled “UI/UX” in the Sprinkles Drive folder.
- Project Delivery: Our group member responsible for creating the Sprinkles presentation slides on Canva, submitted a compressed file for our group and then the project was presented to the class along with the Sprinkles presentation slides.
Click the black, underlined link below to see the Sprinkles Prototype.
FreshEats
- Developer: Brijique Ferguson
- Tools & Technologies: Figma
- Languages Used: Figma
- Project Description: I created a meal delivery website that is responsive on all platforms such as mobile, tablet and desktop. The goal was to make a hip, fun, and responsive, one-page food delivery website.
- Development Process: I drew inspiration from the HelloFresh and Greenchef websites. I loved the simplicity of the websites and they seemed to align with the requirements of UI/UX. I had to incorporate 2 Google fonts, 2 design principles (from UI/UX), and 5 images to create the FreshEats website. A color palette was provided. My website included headers, “How It Works”, “Choose A Plan”, a footer with navigation links and social media links, and a background image that was not one of the 5 images previously mentioned. 3 low fidelity wireframes were sketched that represented 3 different designs within two different devices, mobile and desktop. One design was chosen for each device and a high fidelity wireframe and prototype were created for each mobile and desktop sketch.
- Image Integration: Unsplash plugin on Figma was used to find images.
- File Management: All wireframes and the prototype were exported as PDF files from Figma and labeled “brijique-ferguson-low fidelity-wireframe-desktop”, “brijique-ferguson-high-fidelity-wireframe-mobile”, “brijique-ferguson-fresheats-prototype-desktop”, “brijique-ferguson-fresheats-prototype-mobile”.
- Project Delivery: PDF files were uploaded to Canvas.
The Tribute
- Developer: Brijique Ferguson
- Tools & Technologies: Visual Studio Code
- Languages Used: HTML, Internal CSS
- Project Description: This project consisted of creating an identical replica of a mock website of an article about Ada Lovelace.
- Development Process: I created a new folder in my “Class Projects” folder, labeled “the-tribute-brijique-ferguson”. This project consisted of replicating an article using Visual Studio Code. Affinity Photo was utilized to crop the image of the article properly. A project folder was created and titled “the-tribute-brijique-ferguson and once the project was completed it was submitted as a compressed file. I used HTML and internal CSS to closely match the article’s design. The Chromebook plug-in Colorzilla was used to match the colors used in the article’s design. I accessed Google Fonts to replicate the types of fonts used in the article. Every file I used was organized in my project folder so there were no unused files. Organizing the files aided me when implementing styles internally within HTML. For instance, the image of the article contained three different colored backgrounds. Affinity was used to crop the photo, the width and height of the photo in Affinity was input into the HTML code. When linking the image in HTML, it was very easy due to having all of my files organized in my project folder.
- Image Integration: I utilized Affinity Photo to crop the photo of Ada Lovelace so that the image had a width and height of 315 px X 411 px with a DPI of 72 px. Then I inserted the image into my HTML by using a <img> tag and ensuring my image file was titled correctly.
- File Management: Files uploaded to Canvas for project submission in class and Github
- Project Delivery: Compressed file labeled “the-tribute-brijique-ferguson” uploaded file to Canvas and Github
Click the black, underlined link to visit The Tribute Github.