Author Archives: shaeallison

Burke Angular App

BURKE Christmas Angular App

For BURKE’s 2016 christmas website, I decided to create a interactive map displaying holiday events across North Carolina. I have just begun the project and below are some rough color comps of how the site should look and function. I will use AngularJS to display data from a JSON file. I made custom icons for each “event category” as well as the background map. I am hoping to add a lot of fun CSS animation to the icon SVGs once the site is built.

The development progress can be viewed at this github repo.

I plan to use Angular’s ngRepeat directive to run through the data and and display the icons while still allowing me to dynamically access and filter the data based the unique IDs of the repeated items.

web_christmas-01

Icons

christmas_icons-01

 

Desktop

northcarolina_graphic-0
northcarolina_graphic-01

 

northcarolina_graphic-02
northcarolina_graphic-03

 

Mobile

northcarolina_graphic-04
northcarolina_graphic-05
northcarolina_graphic-06
northcarolina_graphic-07

Burke Client Site

BURKE Client Site

I have removed all branding and content from this site as it is has not been built yet. We were given a rough site map and some example competitor sites from the clients to create some comps for their new site. My comp was selected out of three by the clients to move forward with. I wanted the site to be simple and easily navigable for an middle-aged demographic, but I also wanted it to look clean and modern.

The comp displays a full-screen image at the top that I envisioned that being a cinemagraph of the workings in the facility or a detail of their process. The nav at the top will remain at the top of screen, changing to a dark font on a white background with the client logo to appear in the left corner. All of the navigational links are anchor links to the content on the single-scroll homepage except for the “careers” link as that goes to an external site. Development has not yet begun.

web_client_site-01

 

client_comp

D3 and Angular

D3 and AngularJS Social Network App

For my final project in Advanced Interactive Media I created a single scrolling page with information and data about social media networks. The site features D3 graphs and data displayed with AngularJS.

The project code and files can be view at this github repo.

Side note: I also created a site with additional information focused around three social media moguls that similarly styled, but without the use of D3 or Angular. Which can be viewed live here.

web_social-02

web_social-03

Custom CMOPP Page

Custom CMOPP Page

The Center for Medication Optimization through Practice and Policy (CMOPP) requested an original design to separate themselves from other sections of the website. I worked to create a custom design for the program that still followed the School’s style guide. The turnover for this project was fairly quick and we are looking to add more visual content soon.

web_cmopp-02web_cmopp-03

AngularJS Senator App

AngularJS Senator App

For my first project in Advanced Interactive Media I created an app for the 2016 Senatorial Race. This project was more about functionality and implementing AngularJS than design for me, but I am hoping to go back and add more CSS customization to the design and copy edit the text.

The app offers information about the contested seats for the 2016 election. I created JSON file with data for all of the contested senators and used AngularJS to dynamically write the HTML. The code can be viewed at my github repo.

The site is sortable by search, and two drop downs. All three can be used simultaneously to further narrow your results. On hover the candidates box is highlighted in gray and you can click to view more information in a modal window. The opposing candidates and states uncontested senator can be viewed here as well.

The site is responsive and will work properly on all device sizes.

senator_web-01

senator_web-02senator_web-03senator_web-04

Asheville Summit Site

Asheville Summit Redesign

Click here to view the live site.

Completely new design for conference event in Asheville. I was asked to lead the web site redesign for the annual UNC Eshelman School of Pharmacy Asheville Summit. I worked with students and faculty from the Asheville campus to create a design that met their wants and needs as well as the school’s recently updated design standards while presenting all of the content provided in an easy-to-navigate and visually pleasing way.

The photos below are of the live design when it was initially launched. After looking over the previous design and talking with the clients in Asheville about the site’s purpose and audience, I wireframed and designed an initial color comp and we worked back and forth to create what you see below.

asheville_redesign-01

asheville_redesign-02asheville_redesign-03asheville_redesign-04asheville_redesign-05

 

 

 

EII Improvements

EII Site Improvements

Minor front-end design improvements for UNC’s Eshelman Institute for Innovation site. No one requested changes to be made, but I noticed simple fixes that could improve the navigation and aesthetic of the site and created comps and once they were approved, made the necessary CSS and HTML changes. I also selected, edited and replaced all stock images with photos from our own library. Click photos to view live site.

The changes I made are shown in the photo banner, story thumbnails, fonts, spacing and colors. The pharmacy school has an updated style guide with additional colors which I implemented in the banner information. I also replaced the stock photos with our own photos. The “Recent News” and “Events” section were previously split into two even columns and I decided to use a larger column for the recent news section so we could increase the thumbnail size and orientation. I also removed the border radius on the buttons and event thumbnails. There were minor font-weight and color changes throughout the site as well.

eii_changes-03

eii_changes

eii_changes-04

eii_homepage

 

For Entrepreneurs_improvements

Site Design

Site Design

During a multimedia design course I decided to redesign my website and make the move from Squarespace to WordPress so I could fully customize and design my site. I completed this project and my site in 2014. I originally wanted to design a site heavily focused on my images, allowing them to be presented at full width. To view the full report with hypothetical users click here.

I am now working to focus my site on design instead of photography as it has become overwhelming to view design work within the original site design.

site_design_581-01

site_design_581-03site_design_581-02site_design_581-04site_design_581-05

 

 

Contact Database

MongoDB Contact Database

For a project in Advanced Interactive Media I created a hypothetical contact database with MongoDB. Since the premise of the project was pretty basic, I tried to have some fun with the design.

We were allowed to pull a logo for “our company’s” brand from dribble. The logo is by Glen Hitchcock and can be seen here.

The project code and files can be view at this github repo.

web_contact-04

 

web_contact-03

web_contact-02

Copenhagen Cycling

Copenhagen Cycling Infographic

I spent seven months in Copenhagen, Denmark in 2015 and was amazed by the cycle culture. This is an infographic I created in during an infographics course in the fall of 2015.

I wanted the graphic to be clean and simple, but also informative and engaging. I chose a bright, but also muted color palette and tried to represent data in a visually interesting, as well as easy to read way.

cycling_feature-01

web_cph-01

Gray Wolf

Gray Wolf Infographic

This was my first time attempting a realistic graphic and really painting in photoshop. My graphic style is usually pretty flat, but I found this experience to be extremely rewarding and it ultimately encourages me to try new things as a designer. Though I do feel the rest of the infographic fell a little short due to time constraints, as the addition of a “realistic” looking wolf was very last minute. I would like to go back and improve the rest when I get the chance.

wolf_feature

wolf_feature-01

wolf_feature

HP Infographic

Harry Potter Infographic

This was my first project in my infographic course. My goal was to create a flat clean graphic displaying information about the widely read Harry Potter book series. The graphics are supposed to look cartoonish and event “wonky” especially in the case of Hogwarts Castle.

Two challenges I ran into while making this project were data gathering and the creation of hogwarts castle. Surprisingly, I found it fairly difficult to find accurate data on book sales in the U.S. while movie data was easy to obtain, statistics regarding book sales for each individual book in a single country was much harder. My struggle with the castle was time, but I really wanted to include it. It was time consuming, but worth it in the end.

harrypotter_web-03

harrypotter_web-01harrypotter_web-02harrypotter_web-03

Give Me Freedom

Eustace Conway resides on a remote 1,000 acre plot of land in the Appalachian high country, a place he calls “Turtle Island Preserve,” a name derived from a Native American legend that translates to “Earth Preserve.” Conway has been living a primitive lifestyle since he was roughly 17 years old. He strives to enlighten modern American by teaching people how to survive with as little impact on the environment as necessary to maintain a healthy life. With recent legal troubles Conway’s attitude and tenacity has not faltered. He believes now more than ever that change is needed to sustain American freedom.