Loading

Please Wait

Hello,
I'm Mikkel.
I like

My Work

Experts Exchange (Website)

As a front end developer at Experts Exchange, I had the opportunity to work on a variety of projects and help create the look and feel of the site. The user profile redesign, the Live product redesign, and the creation of the Headlines feed are a few examples of my work. You can see more details on each below.

Tools Used

  • HTML/CSS/JS
  • Photoshop
  • Illustrator

Profile Page Redesign

experts exchange profile page

Shown above is the new profile page that I built with my colleagues. Our goal was to have an initial "business card" view that would display information about the user's areas of expertise and skills. Farther down in the overview section, the user can give information on their background (work history, education, and biography) to serve as a résumé. There are four other sections that asynchronously load in, which are: the user's recent contributions on the site, certifications earned, ratings from Live or Gigs interactions, and endorsements that the user has given or received. On the right side, one can see the overall "level" of that user, see if the user has a "verified" account, and one can share the profile on social media. The profile owner also has a "preview" button. My role in this project was to create the HTML, CSS, and JS for more advanced user interactions — beyond what pure HTML and CSS can provide.

Live Product Redesign

experts exchange live logged in experts exchange live help request

The Live product allows clients to connect with consultants in a one-on-one conversation to get help with coding problems. The problem we were facing was that clients didn't know how to get started with the product. Previously, we showed a list of all available consultants and allowed clients to connect with anyone they chose, so the requests were not always a good fit and both sides got frustrated. To solve this problem, we streamlined the whole process by making the help request form front and center for the client. We also gave consultants the ability to specify which topics they were willing to help in. My role in this project was to mock up the initial designs in Photoshop for the help request page that lists the consultants available for a given request, and then to code all of the CSS to pull it off. I also provided new HTML structure when the need arose to work beyond what was already in place.

Live Landing Page

experts exchange live logged out

Shown above is the Live product's logged out view. The purpose of this page was to show the viewer why Live is valuable, how it works, and what users like about it — all in a well-designed and easy to use interface. I took the mockup provided by our UI team and created all the HTML and CSS needed to bring the page to life.

Headlines Feed

experts exchange headlines feed

Headlines is intended to be a place for users to see tech news from around the internet. Users have the ability to cater the feed to their needs by hiding specific stories or entire sources, and adding new sources by importing RSS feeds. I created the look and feel of the feed and worked with my team's UI designer to come up with the final "card" design. I also created the HTML and CSS needed to organize the cards at any screen size and adjust to any quantity.

Show more.

Show less.

APC Entertainment (Website and Logo Design)

This was a website that I designed and coded for an acquaintance. The client was a DJ and needed a site that would showcase the services he provided, allow potential customers to get a price quote through an interactive "quote calculator," provide a way for users to book an event, display a media library, and have a contact form for general inquiries. You can check out the live site here.

Tools Used

  • Illustrator
  • Photoshop
  • HTML/Sass/JS

Mockup Design

apc entertainment design

This is the mockup that I made for the client for this project.

Show more.

Show less.

Friend Quest (Podcast)

Friend Quest is a podcast that I do with my friends where we play tabletop role playing games. We each record our audio separately and then I edit all of the tracks in Audition to get the final cut. Then, I add the intro and outro music, record voiceovers for the intro and outro, and add some basic EQ and noise filtering. Finally, I export the final audio and bring it into Premier to create a video version of the episode as well. The cover artwork was done by Peter Freeby.

Tools Used

  • Audition
  • Premier

Episodes

Show more.

Show less.

3D Animation

You can find my current 3D animation demo reel on Vimeo. Most of these are personal projects to practice and develop my skills, ranging from fluid simulations to create fire effects, to original character concepts. FireSwing Studios was a start up that I worked at for a couple summers. I created a 3D rendered splash screen for the app that we were working on. Although this splash screen was never implemented, it is still one of my favorite things that I have made.

Tools Used

  • Maya
  • Premier

Cyber Spartan (Personal Project)

spartan v1 render spartan v2 render spartan v3 render spartan v4 render

These are some variations of a "cyber spartan" character that I created.

FireSwing Studios (Splash Screen)

fireswing v1

This is the first version of the splash screen. I was still experimenting with the fluid dynamics to get the right look for the flame.

fireswing v2

At this point, I had fine-tuned the fluid effects to get the desired look for the flames.

fireswing v3

We wanted to try a lighter colored background.

fireswing v4

It was requested to have a glass-breaking effect, just to see how it would look.

fireswing final

This is a screenshot of the final render. You can see the full animation in my demo reel on Vimeo.

Show more.

Show less.

Movie Poster Mockup (Graphic Design)

I had a class design project to create a movie poster for a fictitious film. I was only limited by the titles and images I could use; I could use these however I saw fit; there were other constraints, like needing to use a certain format for the bottom copy and movie rating graphics.

Tools Used

  • InDesign
  • Photoshop
  • Illustrator

Iterations

msandberg 218 movie poster v1

This was my first pass at this poster.

msandberg 218 movie poster v2

Playing with alignment, spacing and overall size of the elements.

msandberg 218 movie poster final

This was the final product, complete with blood-spatter graphic.

Show more.

Show less.

My Work

experts exchange logo

Experts Exchange (Website)

As a front end developer at Experts Exchange, I had the opportunity to work on a variety of projects and help create the look and feel of the site. The user profile redesign, the Live product redesign, and the creation of the Headlines feed are a few examples of my work. You can see more details on each below.

Tools Used

  • HTML/CSS/JS
  • Photoshop
  • Illustrator

Profile Page Redesign

experts exchange profile page

Shown above is the new profile page that I built with my colleagues. Our goal was to have an initial "business card" view that would display information about the user's areas of expertise and skills. Farther down in the overview section, the user can give information on their background (work history, education, and biography) to serve as a résumé. There are four other sections that asynchronously load in, which are: the user's recent contributions on the site, certifications earned, ratings from Live or Gigs interactions, and endorsements that the user has given or received. On the right side, one can see the overall "level" of that user, see if the user has a "verified" account, and one can share the profile on social media. The profile owner also has a "preview" button. My role in this project was to create the HTML, CSS, and JS for more advanced user interactions — beyond what pure HTML and CSS can provide.

Live Product Redesign

experts exchange live logged in experts exchange live help request

The Live product allows clients to connect with consultants in a one-on-one conversation to get help with coding problems. The problem we were facing was that clients didn't know how to get started with the product. Previously, we showed a list of all available consultants and allowed clients to connect with anyone they chose, so the requests were not always a good fit and both sides got frustrated. To solve this problem, we streamlined the whole process by making the help request form front and center for the client. We also gave consultants the ability to specify which topics they were willing to help in. My role in this project was to mock up the initial designs in Photoshop for the help request page that lists the consultants available for a given request, and then to code all of the CSS to pull it off. I also provided new HTML structure when the need arose to work beyond what was already in place.

Live Landing Page

experts exchange live logged out

Shown above is the Live product's logged out view. The purpose of this page was to show the viewer why Live is valuable, how it works, and what users like about it — all in a well-designed and easy to use interface. I took the mockup provided by our UI team and created all the HTML and CSS needed to bring the page to life.

Headlines Feed

experts exchange headlines feed

Headlines is intended to be a place for users to see tech news from around the internet. Users have the ability to cater the feed to their needs by hiding specific stories or entire sources, and adding new sources by importing RSS feeds. I created the look and feel of the feed and worked with my team's UI designer to come up with the final "card" design. I also created the HTML and CSS needed to organize the cards at any screen size and adjust to any quantity.

Show more.

Show less.

apc entertainment mockup

APC Entertainment (Website and Logo Design)

This was a website that I designed and coded for an acquaintance. The client was a DJ and needed a site that would showcase the services he provided, allow potential customers to get a price quote through an interactive "quote calculator," provide a way for users to book an event, display a media library, and have a contact form for general inquiries. You can check out the live site here.

Tools Used

  • Illustrator
  • Photoshop
  • HTML/Sass/JS

Mockup Design

apc entertainment design

This is the mockup that I made for the client for this project.

Show more.

Show less.

friend quest mockup

Friend Quest (Podcast)

Friend Quest is a podcast that I do with my friends where we play tabletop role playing games. We each record our audio separately and then I edit all of the tracks in Audition to get the final cut. Then, I add the intro and outro music, record voiceovers for the intro and outro, and add some basic EQ and noise filtering. Finally, I export the final audio and bring it into Premier to create a video version of the episode as well. The cover artwork was done by Peter Freeby.

Tools Used

  • Audition
  • Premier

Episodes

Show more.

Show less.

img 1

3D Animation

You can find my current 3D animation demo reel on Vimeo. Most of these are personal projects to practice and develop my skills, ranging from fluid simulations to create fire effects, to original character concepts. FireSwing Studios was a start up that I worked at for a couple summers. I created a 3D rendered splash screen for the app that we were working on. Although this splash screen was never implemented, it is still one of my favorite things that I have made.

Tools Used

  • Maya
  • Premier

Cyber Spartan (Personal Project)

spartan v1 render spartan v2 render spartan v3 render spartan v4 render

These are some variations of a "cyber spartan" character that I created.

FireSwing Studios (Splash Screen)

fireswing v1

This is the first version of the splash screen. I was still experimenting with the fluid dynamics to get the right look for the flame.

fireswing v2

At this point, I had fine-tuned the fluid effects to get the desired look for the flames.

fireswing v3

We wanted to try a lighter colored background.

fireswing v4

It was requested to have a glass-breaking effect, just to see how it would look.

fireswing final

This is a screenshot of the final render. You can see the full animation in my demo reel on Vimeo.

Show more.

Show less.

img 3

Movie Poster Mockup (Graphic Design)

I had a class design project to create a movie poster for a fictitious film. I was only limited by the titles and images I could use; I could use these however I saw fit; there were other constraints, like needing to use a certain format for the bottom copy and movie rating graphics.

Tools Used

  • InDesign
  • Photoshop
  • Illustrator

Iterations

msandberg 218 movie poster v1

This was my first pass at this poster.

msandberg 218 movie poster v2

Playing with alignment, spacing and overall size of the elements.

msandberg 218 movie poster final

This was the final product, complete with blood-spatter graphic.

Show more.

Show less.

Résumé

This is my resume. Download link below.

Click here to download.

About Me

My Background

I was born and raised in Nipomo, CA. I earned my Bachelor of Science in Graphic Communication from California Polytechnic State University (San Luis Obispo) in June 2015; my concentration was in Web and Digital Media.

My Interests

I enjoy frontend coding (primarily HTML, CSS, and JavaScript), drinking coffee, playing video games, making video games, playing music (trombone and bass guitar are my weapons of choice), and I dabble as a 3D artist. You can see some of my work above.

Social Media

Contact

You can reach me at: mikkel.h.sandberg@gmail.com

Top