Web and Interface Work sabrina Wood

Ruby Red Cleaning

Website Banners

samples from different months (click to view enlarged)

Facebook Banners & Posts

main cover image and profile picture
sample posts (*note the owner recognizing my contribution to the website)

Website Layout & Interface Consultant & Prototype Tester

I worked with the web developer David Yarde of Sevenality to review and revise the wireframes. Before the website went live, I worked with him to tweak several things in the interface (balancing column lists, removing orphans, fixing alignments, increasing the scale of the logo, etc.)
To ensure color consistency for the website and print work, I created an ASE (Adobe Swatch Exchange) file with colors in RGB and CMYK.

Icon Work

Sample icons, originally intended for website
Seasonal icons used for promotional work
5.5 x 8.5" Notepad; icons are also used for emailing clients

Blakemore School of Music

Website Layout Consultant

Worked with client on the placement of images to ensure that they do not visually take you off the page. Previously, the images were on opposite sides and the user would naturally follow the direction that the person is looking in the photograph(s). After cleaning up the audio files, I also helped in the website coding to remove the double labeling header. As you can see above, there is now only one header per concert piece.

Facebook Posts

Click to enlarge

Faith Baptist Church

Website Layout & Interface Consultant

I met with the staff to help them select which template from Church Plant Media they should choose. I then served as a consultant as they added information to the site to ensure that the colors and scale of the objects were correct. Additionally, when designing promotional print materials I also created the website and Facebook banners as seen in the examples below.

Website Banners

Spring Missions Conference 2013
Spring Missions Conference 2014
sampling of files provided for one project

Professional Development

Certificate of completion for 25 hour Digital Storytelling course, Adobe Generation Professional

Course Overview: Adobe’s suite of creative apps make it easier than ever to communicate digitally. Explore how you can leverage these technologies to teach concepts, assess learning, and prepare your students for success as digital communicators. This free five week Digital Storytelling course is aimed at teachers wishing to start their journey in understanding and using digital tools to create captivating digital stories, presentations, and communication. We will explore apps such as Adobe Spark, Adobe Photoshop, Adobe Audition, Adobe Character Animator, Adobe InDesign and Adobe Premiere. We’ll cover how to make educational video and create beautiful learning resources for print and screen.

Certificate of completion for 25 hour UX to UI course, Adobe Generation Professional

Course Overview: This course draws upon best practices from the user experience design (UX Design) industry. Through our weekly live classes, you’ll meet and be inspired by professional designers and educators sharing their stories, tips & tricks. Through our easy-to-follow coursework, you’ll learn to use the same tools industry experts use to create amazing UX and UI designs, including Adobe Experience Design, Adobe Photoshop and Adobe Illustrator. In this course participants will start off examining the users needs and creating relevant documentation that allows a digital, interactive project to have a better fitting, functional, final design. Each week participants will identify key needs that will inform design decisions until the project is ready to be designed graphically as a user interface. In the final weeks of the course participants will create the UI design based on their UX conclusions from the previous weeks.

Below is a clip of the European timezone class announcing that I won the weekly award for best projects for week four assignments. Globally, there were 1423 enrolled in this class.

The goal of this course was to solve a problem that we had encountered. I used this course as an opportunity to do spec work for Faith Baptist Church. One of the pastors offered critical feedback throughout the information architecture phase. The result is that the church would like to have the app developed and use the interface designs that I produced. Below is the spec work showing the different phases.

Week 01: Personas

Week 02: Sample Sitemaps

Week 03: Sketches and Wireframes

Week 04: Mood Board, Style Tile and Sample Layout

Mood Board
Style Tile
Sample Layout

Week 05: Mockups with User Testing Modifications

Before and After Profile Screen
Before and After Announcement Set Reminder(s) Screen
Xd file preview

Teaching Materials

Sample Lecture on Website Typography Trends (password 1425)

Sample Exercises

Project Overviews

Resource Handouts (current course and previous)

Student Work

The link below shows some of the work that the students produce for each project phase of the course.

Promotional Materials for Mobile Development Department

Posters

Sampling of Updated Informational Session Slides

Before
After

Credits:

Created with images by FirmBee - "ux design webdesign"

Report Abuse

If you feel that this video content violates the Adobe Terms of Use, you may report this content by filling out this quick form.

To report a Copyright Violation, please follow Section 17 in the Terms of Use.