admin, Author at Glendon Gengel's Portfolio

Evite

Posted on July 18, 2017 at 7:19 pm.

Written by admin

Knowing people are invited is the major function

But if that were the only function, then why not 12 point Times New Roman? The other purpose this invitation serves is to give an idea of what Sage is all about– why you would want to meet them at this booth.

The reason is glass. Sage creates an incredibly striking and energy efficient glass that you can control the tint on with the flick of a switch– pretty neat, eh? The invitation works to clue the reader in as to whether they should talk to Sage based on how relevant the product is to them.

If the products are up their alley, they read below for the specifics.

Olafsen Ethics

Posted on July 18, 2017 at 6:51 pm.

Written by admin

The Olafsen Ethics Symposium

Is an event held up at UND every year with the intention of demonstrating ethics in business. It was my job to put together a promotional poster for the event and the only specifications I had were to get across the speakers name, and key event info (date, purpose, relevance).

The business administration turned me loose after that and what I decided was the most key information was what this speaker had done. Creating 1.6 million glasses just to help people out catches your attention and gives the reader an idea of what the presentation is going to be about.

I made the whole thing pop by using high contrast colors, a sharp font, and a clear hierarchy of information.

Window LP

Posted on July 17, 2017 at 8:28 pm.

Written by admin

G & P Windows feels clean, functional, and to the point

The photos of their work should do most of the talking while the rest of the page words to fill the reader in on the specifics of how the product works and establish a sense of trust.

From a design perspective, the project was quite straight forward: send over some inital mockups to get us talking, adjust the mockups till everybody is happy then move it all into code.

On the coding side, the project was just a treat– the big sets of images played very will with Foundation and its lovely flex display properties. The SASS is really succinct, coming in at just over 400 lines which can be easily shark down to around 300 if I didn’t enjoy my line breaks so much! You can check that out below.

If you want to see the page in action, just head on over to: https://designerofstuff.com/example-window-landing-page/

  
  
  /*================================================================

Content stylesheet

================================================================*/


/*================================================================

Content Universal Styling

================================================================*/

.box {
  height: 310px;
  width: 210px;
  background-image: url('../images/flip1.jpg');
  background-size:cover;
  background-repeat:no-repeat;
  position: relative;
  overflow: hidden;
  border:5px solid #fff;
  margin:0 auto;
}

.overlay {
  background-image:url('../images/flip2.jpg');
  background-size:cover;
  background-repeat:no-repeat;
  height:300px;
  position: absolute;
  width: 100%;
  left: -270px;
  margin-left: 520px;
  bottom: 0;
  transition: left 400ms linear, margin-left 400ms ease-out;
}

.toggleClass{
  left: 0;
  margin-left: 0;
  transition: left 400ms ease-out;
}

.span-darkgray{
  background-color:$gray;
  color:#fff;
}

.span-lightgray{
  background-color:$lightgray;
}


body{
  font-family: 'Abel', sans-serif;
}

h1,h2,h3,h4,h5,h6{
  font-family: 'Anton', sans-serif;
}

.logo-wrap:before{
  content: " ";
  position: absolute;
  z-index: -20;
  top: 0;
  width: 9999rem;
  right: 74%;
  background: #fff;
  height: 100%;
}

.logo-wrap{

}

.header{
  position:relative;
  z-index:100;

  .bbb{
    width:70%;
    margin:0 auto;
    display:block;
  }

  h2{
    font-size:2.0rem;
    color:#fff;
    text-align:right;

    a{
      color:#fff;
      font-size:1.9rem;
      letter-spacing:0rem;
    }
  }
}

.r1-logo{
  position: relative;
  left: 0;
  -moz-animation-name: dropHeader;
  -moz-animation-iteration-count: 1;
  -moz-animation-timing-function: ease-out;
  -moz-animation-duration: 0.3s;
  -webkit-animation-name: dropHeader;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease-out;
  -webkit-animation-duration: 0.3s;
  animation-name: dropHeader;
  animation-iteration-count: 1;
  animation-timing-function: ease-out;
  animation-duration: 0.3s;
}

h1{
  font-size:2.5rem;
  text-align:center;
  margin-bottom:0;
}

.span-hero{
  background-image:url('../images/hero-bg.jpg');
  background-size:cover;
  background-repeat:no-repeat;
}

.hero{
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,1a2330+100&0.83+0,0+100 */
  background: -moz-linear-gradient(left,  rgba(0,0,0,0.83) 0%, rgba(26,35,48,0) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(left,  rgba(0,0,0,0.83) 0%,rgba(26,35,48,0) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right,  rgba(0,0,0,0.83) 0%,rgba(26,35,48,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d4000000', endColorstr='#001a2330',GradientType=1 ); /* IE6-9 */
  color:#fff;


  ul{
    font-size:1.8rem;
    line-height:130%;

    li{
      margin-bottom:10px;
    }
  }
}

.picbar{
  position:relative;

  .pic-qs{
    position:absolute;
    background-color:rgba(255,255,255,0.8);
    text-align:center;
    width:100%;
    bottom:0;
  }
}

.trust{
  p{
    font-size:2rem;
    text-align:center;
  }

  .trust-list{
    @include justify;
    list-style-type:none;
    
    .tall{
      max-width:120px;
    }

    .wide{
      max-width:200px;
    }
  }
}

.video{
  text-align:center;
  padding: 1rem 0;
}

.gallery{
  padding:1rem 0;
}

.testimonial{

  font-size:1.2rem;

  .test-wrap{
    background-color:$lightgray;
    padding:2rem 1rem;
    border-radius:8px;
    height:100%;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: center;
    align-items: center;
    list-style: none;
    position:relative;
  }

  .test-wrap:after{
content:"";
    position:absolute;
    top:100%;
    left:25px;
    border-width:30px 30px 0 0;
    border-style:solid;
    border-color:$lightgray transparent;
    /* css3 extras */
    -webkit-transform:skewX(-15deg);
       -moz-transform:skewX(-15deg);
        -ms-transform:skewX(-15deg);
         -o-transform:skewX(-15deg);
            transform:skewX(-15deg);
  }
}

/*================================================================

Content Desktop Styling

================================================================*/

@media (min-width:1024px){
  .hero{
    padding-top:3rem;
    padding-bottom:7rem;
  }

  .offset{
    position:relative;
    top:-6rem;
  }

  .gal-pics{

    img{
      width:24.7%;
      margin:0;
      padding:0;
    }
  }

} 


/*================================================================

Content Tablet Styling

================================================================*/
@media screen and (min-width: 40em) and (max-width: 63.9375em) {

  body{
  
  .picbar{

    .pic-qs{

      h3{
        font-size:1rem;
        padding:.5rem 0;
      }
    }
  }




  .tall{
    width:66%;
    margin:0 auto;
    display:block;
    padding-bottom:1rem;
  }


}

  }

/*================================================================

Content Mobile Styling

================================================================*/

@media (max-width:1023px){

.logo-wrap:before{
  content: " ";
  position: absolute;
  z-index: -20;
  top: 0;
  width: 9999rem;
  right: 60%;
  background: #fff;
  height: 100%;
}

.mobile-call{
padding:.5rem 0;
background-color:$lightgray;

  h2{
    margin-bottom:0;
    letter-spacing:.00rem;

    a{
      color:#000;
    }
  }
}

.headline{
  background-color:#fff;

  h1{
    font-size:1.5rem;
    text-align:left;
  }
}

.span-hero{
  background-image:url('../images/hero-bg-mobile.jpg');
  background-repeat:no-repeat;
  padding-top:15rem;

  .hero{
    background-color:rgba(0,0,0,.5);
    padding:.5rem .25rem;
  }

  .mob-qs{
    padding-left:1rem;

    h2{
      font-size:2rem;
      text-shadow:2px 2px 5px rgba(0,0,0,0.7);
    }

    ul{
      letter-spacing:.05rem;
      line-height:110%;
      font-size:1.2rem;

      li{
        margin-bottom:0px;
      }
    }
  }
} 

.picbar{

  .columns{
    padding:0;
  }

  img{
    width:100%;
  }

  .pic-qs{

    h3{
    font-size:.8rem;
    margin-bottom:0;
  }

  .row{
    margin-right:0;
    margin-left:0;
  }
  }
}

.trust-imgs{

  ul{


    li{
      width:47%;
    }
  }
}

.video{
  .vid1{
    margin-bottom:1rem;
  }
} 

.gal-pics{

    img{
      width:100%;
      margin:0;
      padding:0;
      
    }
  }
}

.testimonial{
  padding-top:1rem;

  .large-4{
margin-bottom:3rem;
  }
}

Woman Lake

Posted on July 17, 2017 at 8:27 pm.

Written by admin

A remote Canadian hunting lodge up in Ontario

Womanlakelodgecanada.com has been through 3 face lifts since I took over work on the site way back when.

This round’s goal was to more actively use all the awesome pictures and video footage the hunters and fishermen get when they travel up there.

The place this really shines is in the top area of the home page (better known as the hero region or jumbotron to web nerds). We have 4 slides using images and text I selected with the idea of showing off the wonderful memories made heere and the beastly fish dredged up from the depths of the surrounding lakes.

The biggest technical challenge was getting the video footage used on the first slide to not grind the site to a hault while it loads in which was accomplished by fine-tuning the resolution with a tool called FFmpeg which lets you adjust every little detail of the video format… but it’s used via command line so the usability leaves something to be desired…

U.N. Crisis

Posted on July 17, 2017 at 8:26 pm.

Written by admin

Ever want to know what is discussed in the U.N. when something crazy happens?

The University of North Dakota put together a program to simulate that event shortly after Russia invaded Crimea and tasked me with putting together promotional materials that would reflect the tone.

When I think of an international crisis, I get a sharp sense of urgency, danger, and a lot of hard work ahead. I felt the sharp, contrasting colors brought out the urgency while the grit layer helped give it an impression of the danger many people face.

Tech wise, the piece was clean and simple. The fonts, U.N. logo, and solid colors for the background were all vectors which I then used Photoshop to add a layer of grit to using a hi-res grunge texture and a multiply filter.

Regex Phone Number Swap

Posted on July 17, 2017 at 8:26 pm.

Written by admin

Websites are great and all but scripts can be a blast all on their own!

Here’s a phone flipping script I have been working on that will find every phone number on a page and flip them all to the same one, which is really handy for adwords tracking.

Just read through the code comments to see how the whole thing works, my end goal is to make it take in a url query, grab that number from a stored array and flip all of the numbers to that.

If you want to see it in action, check out: https://jsfiddle.net/uohx1fo3/15/

<?php  

jQuery(document).ready(function () {

//Throw the phone number you want everything to flip to right here
var swapTarget = '123-456-7890';

//This is the bit that recognises a phone number
var regex = /(((\(\d{3}\) ?)|(\d{3}-)|(\d{3}\.))?\d{3}(-|\.)\d{4})/g; 

//Tells the script where to search in the document
var text = jQuery("body:first").not('script').html();

//Makes the text var look for our regex and swap it for our new number 
text = text.replace(regex, swapTarget);

//Turns the text var loose on the DOM to switch out the phone numbers
jQuery("body").html(text);

/*===============================================
We've made it half way and nothing has erupted into flames, take a moment to pat yourself on the back and then check below to make sure you have the right vars set.
===============================================*/

//Format the swap target for an href
//swapTarget.text( swapTarget.text().replace('-', '') );
var swapTarget = '"tel:1' + swapTarget + '"';
console.log(swapTarget);

//Now to handle those pesky href numbers with a different selector...
var regex = /((\"tel:((\d{11})|(\d{10})|(((\(\d{3}\) ?)|(\d{3}-)|(\d{3}\.))?\d{3}(-|\.)\d{4}))\"))/g;

//Makes the text var look for our regex and swap it for our new number 
text = text.replace(regex, swapTarget);

//Fire the main cannons!
jQuery("body").html(text);


});

?>

HVM Map

Posted on July 17, 2017 at 7:35 pm.

Written by admin

Sage Electrochromics opened a new high tech facility 3 times the size of a football field

Tours of the facility are a very common thing but they did not have a map yet so it fell to me, the graphic design/ marketing intern to come up with something.

I started off by digging through the facility blueprints which turned out to be total overkill as they gave details such as where every indivdual cubicle would go and lots of information for plumbing/electrical/ HVAC which would be nice if the goal were to plan some Mission Impossible style heist but less so when you are trying to put something together so visitors know where they are.

Part 2 was to walk the facility personally and sketch it out by hand, this wound up taking 3 trips around the facility in stiff business shoes resulting in my feet looking like they had started a scrap with a belt sander. The other result of my wanderings was a good idea of the layout and spacing of the facility which I then started putting into Illustrator.

The only tricky bit left was to make the whole thing feel up to the standards of an international high tech company. If you look over their other work, you can see they put a high value on simplicity and brightness and I reflected that in my work.

The end result was something everybody was really happy with and is still being used on tours to the best of my knowledge!

Here’s a picture I took of the building:

I know this does not really pertain to the map, but I’m really proud of the photo!

Construction LP

Posted on July 17, 2017 at 7:11 pm.

Written by admin

Midas is not a real company

But I like to imagine they would be quite happy to use this as a landing page on their AdWords campaign.

The goal is to give the impression of quality service without going overboard and coming off too spendy. I think I hit a nice middle ground with lots of neutral tones and a classy set of bathroom photos all in the same color palette.

Functionality wise, we have strong reasons to trust the company above the fold and a solid call to action above the fold as well. As the viewer scrolls down, they get more reasons to trust the company followed by another call to action in the form of a contact form I am quite proud of!

Overall, one of my favorite pieces for blending style and function in a way that leaves me and the client very happy!

If you want to see the page in action, check out: https://designerofstuff.com/example-contractor-landing-page/.

Econ Poster

Posted on July 17, 2017 at 7:10 pm.

Written by admin

Economics turns out to be pretty darn cool

Not something I would have pictured being particularly exciting… useful certainly but not something I would expect to throw myself into full tilt and make a set of posters that I feel would fit right into Wired magazine. I was assigned by the UND business department to make a set of posters around the theme of economics to fill an oddly shaped set of frames, those specs aside I was given free reign.

I started off by digging around for the fundamentals– what is it in a few short words then working outward. Turns out the field is highly specialized and an actual job position as an economist is pretty darn rare which gives the impression there is a glut of economics degree holders with no jobs they are well equipped for but this is not the case. Turns out the econ classes train people really well to handle large data sets such as market research, accountants, and fiinancial analysts.

After finding out these guys deal with big data, my intereest really piqued since abstraction of big data sets looks really cool to me! Seeing a general trend for the poster set, I got to work selecting fonts and coming up with graphic assets that fit the theme.

After assembling a good set of assets came a seemingly endless series of revisions from the staff as well as myself but in the end, there were high-fives all around when the final prints came out.

Here’s the second poster

Want the print sized versions? Check them out down below!

Hi Res Part 1

Hi Res Part 2

Action Roofing

Posted on July 17, 2017 at 7:04 pm.

Written by admin

A clean, sharp, and functional site

http://actionroofing.net/ was just a treat to work on. The goal we were given was to make something professional that shows off the roofing and siding work the company does. We used their existing color palette of red, black, white and gray tones to put together a set of mock ups which took only a couple sets of minor revisions before everybody was happy with the layout.

Coding wise, the site is built off JointsWP– a really clean framework for WordPress themes that has Foundation baked into it right from the get go. The site makes use of the data equalizer feature in Foundation which allows you to generate divs of equal height via JavaScript which makes it more friendly to the older browsers than the newer JS-free flex options.