Nathan Shuck Web & Graphic Design

WEB

DESIGN
+
DEVELOPMENT

Artist Statement

This website is the first fully fledged site I made and not only represents what I knew about web design when I made it, but also serves to illustrate how much I’ve grown since then. The primary languages I used for this one are HTML and CSS. This project was when I first started exploring CSS customization, effects and pseudo class selectors. For example, the article images will change from greyscale to full color when the user hovers over them. The diamond image containers were made by rotating them 45 degrees, and setting the background images with CSS, then rotating those in the opposite direction so they would appear normal.

Artist Statement

For this website, the technologies I used were HTML5, CSS3, Photoshop, Font Awesome and CSS Reset. I first used Photoshop to crop and format my images for web to reduce the file size and load times. For some images, I created multiple sizes for different screen widths, for the sake of responsiveness. I used HTML5 to layout the overall content structure for the site, as well as providing the actual content itself. I used tags specific to HTML5 to make my site more semantic and accessible to people who may be using some form of assistive technology (i.e. screen readers etc.). With CSS, I customized the layout and design of my site. Using media query breakpoints, I implemented a "mobile first" responsiveness. Additionally, I used a combination of pure HTML and CSS to create the login and register pop-up modals on every page. I was very careful regarding the order I linked to each external CSS file, including CSS Reset and Font Awesome. I did this so that styles are applied as the screen is resized, which prevents repetitive code. I also implemented several rules such as box sizing resets and support for older versions of internet explorer so my media queries will still be recognized.

Artist Statement

W.E.S.T., the Wise Equine Sanctuary of Texas website, was created in WordPress. The theme, Maisha Lite, was chosen because the team felt that it would best display the purpose of the website: supporting W.E.S.T., adopting out horses and volunteering. For the Homeless Horses website: Amanda created the About, Adopt, Care, Contact, Home and Support pages. While Nathan and Elizabeth created the Our Horses, What You Need and Donate Page. Anthony created copy for the care page, with Amanda, Nathan and Elizabeth’s help, and created the form for the contact page, along with finding images for the featured images as well. Nathan created and worked on the Our Horses page, created the gallery all the horses and their information is held in. He also filled out the What You Need page. While Anthony’s care page has a broader overview, the What You Need page is more specific on what you will need. Elizabeth created the Donate page and the links to an Amazon’s wish list and PayPal account. She also finalized the copy for the support page, while the team came to a consensus on the color scheme, along with copying over the text from the existing website and the about page. Amanda also went out to W.E.S.T. to take photos. She and Nathan worked on the child theme. Amanda provided hosting for the site.
Image Attribution

Artist Statement

I created this fully featured website with a combination of techniques and technologies such as HTML, CSS, JavaScript, jQuery, Adobe Photoshop, Illustrator, and Font Awesome styles. For the space background, as well as the sun and planets, I hand illustrated everything, scanned my line art into photoshop and colored them digitally with watercolor photoshop brushes I downloaded. I created multiple sizes for everything, so the images and assets will change relative to the device screen width. For the parallax effect on the stars I used JavaScript to select multiple layers and adjusted their scroll speeds to be progressively slower relative to the normal speed of the window. I also used CSS in tandem with jQuery for the slide out navigation menu, the push menu for the moon pages and the accordion sections on the “profile” pages. I used CSS and jQuery to show a modal when the page loads so the user will receive a brief introduction to the site and how to navigate. On each profile, I have also included a link to N.A.S.A.’s main site, which is where I sourced my information about the solar system.
PROCESS BOOK

Artist Statement

This website is an updated version of what the client provided to me. I redid the HTML, styled it with CSS and restructured the JavaScript calculations to be simpler and more readable. I also made the new version responsive so users would not be restricted by what device they are using to browse.
Image Attribution

Artist Statement

This website is an updated version of what the client provided to me. I redid the HTML, styled it with CSS and restructured the JavaScript calculations to be simpler and more readable. I also made the new version responsive so users would not be restricted by what device they are using to browse.

GRAPHIC

DESIGN
+
ILLUSTRATION

MOTION

ANIMATION
+
MOTION GRAPHICS

ABOUT

My name is Nathan Shuck, and I am a front-end web designer, as well as a graphic designer and illustrator. My background is originally in traditional art, such as graphite, charcoal, conte, and ink. Gradually, I moved towards digital mediums and quickly embraced digital painting and illustration. In my spare time, I continue to hone not only my web based skills, but my traditional skills as well. Web design and front-end development are my primary passions, but i'm always on the search for new skills and opportunities. I am a strong believer in life long learning and never settling.

Resume

Skills:

HTML5, CSS3, JavaScript, jQuery, Bootstrap 3, light PHP, light MySQL, Adobe Illustrator, Adobe InDesign, Adobe Photoshop, Adobe After Effects, Repsonsive Web Design, Mobile Application Design, UI/UX, Wireframing, Design Comprehensives, Typography, Layout, Illustration, Motion Graphics.

Experience:

  • Vision Web Partners

    7/2015 - 3/2016: Front End Designer / Developer
  • Coded client provided wireframes into working HTML and CSS responsive web screens. Created functionality for web screens with JavaScript and jQuery, and implemented the Google Maps API for geolocation and plotting coordinates to a web page.

  • Bell Communication Design

    7/2016 - 12/2016: Freelance Front End Designer / Developer
  • Updated old code and redesigned client website using HTML, CSS, JavaScript, and jQuery. Added responsiveness to the site with CSS media queries.

  • The Fieldhouse Gym

    6/2016 - Present: Freelance Graphic Designer
  • Generated graphics for t-shirts with Illustrator, as well as mockups in Photoshop for the online store. Created two separate logos, one of which was drawn onto the gym’s bay door entrance.

  • Blue Lacy Productions

    9/2016 - 10/2016: Freelance Graphic Designer
  • Created logo for startup film production studio based on client sketch as well as personal sketches. Created an alternate logo in addition to the concept provided by the client. Logos were created in Illustrator and placed into Photoshop mockups, including business cards and letterheads.

Education:

  • Art Institute of Dallas
    Bachelor of Fine Arts in Graphic and Web Design - Concentration in Web Design
    December 2016