Andrew McInnes

WEB DESIGNER

GRAPHIC DESIGNER

FRONT END DESIGNER

UI/UX DESIGNER

×

Check out my portfolio

Skills

web design logo

HTML / CSS / JAVASCRIPT

HTML
CSS
JAVASCRIPT

graphic design logo

SKETCH / ADOBE

SKETCH
ADOBE

php/database logo

PHP / MySQL

PHP
MySQL

prototype logo

UI / UX / PROTOTYPING

UI / UX
PROTOTYPING

Each Project is # tagged with the appropriate skills

About

Hi, my name is Andrew, I'm a Developer Support Specialist for an Australian based e-commerce platform. My day to day includes onboarding developers who wish to built out add-ons or API solutions, to running through our frontend templating language.

When I'm not working with our Developer Partners I'm improving and building out our library of online store 'themes' - built on a combination of Bootstrap, jQuery, and general HTML/CSS/JavaScript. With a passion for Frontend Development work, this extends into my free time where I am always looking for an opportunity to hone my Web Development skills.

Most recently I've started looking into React, a component based JavaScript framework that allows page layouts to be quickly built - assuming you've correctly broken down all your components to be as re-usable as possible.

Continue scrolling for an overview of my current work

PORTFOLIO

Web Design

#React #JavaScript #JSX #CSS in JavaScript

VIEW PAGE

*External Website

REACT SANDBOX

I decided to learn React over other JavaScript frameworks because of it's popularity and continued improvements over the years. Recent additions such as Hooks has greating improved the dynamic components that React and other JavaScript frameworks are known for.

This is still a work in progress but the end goal is to create a responsive and fun experience for any visitors. Collecting data supplied and rendering that in exciting ways. The sandbox also utilises a dark mode toggle which takes the visitors display preference into account on first visit.

CONDOR MIGRATION AGENCY

I have recently finished working on a Wordpress site for a local Migration Agency. The company went through a rebranding and wanted a fresh new website to reflect this. Building the site on Wordpress had its advantages. I was quickly able to add content to the site, then decide on a theme that worked well with the clients needs. A focus on testimonials with an impression of a skilled and competent team was to be the focus, as well as being easily contactable.

Using Wordpress I was able to add features through the use of plug ins, even add or edit custom HTML & CSS through the use of a child theme that I created and linked to the main parent theme.

#Wordpress #HTML #CSS #Themes #Plugins

VIEW PAGE
*External Website - Will not link back to Portfolio

wordpress graphic
bluesquare logo

BLUESQUARE STORE

After university I have kept busy creating websites and graphics for fun, while doing some casual work maintaining websites for people.

I have created a few sites showing my work, the first is a mock store front using PHP and MySQL to grab items from a file, load them to a database then grab items depending on the users search queries. All the calls to the server are done with AJAX so the page doesn't have to reload to show the search results. The website is fully functional up to the checkout process. I'm still working on the shopping cart, at the moment you can add items or drop the entire cart. From there dropping individual items, adding quantities and a mock payment screen are planned

This site is custom built by me.

#HTML #CSS #JavaScript #PHP #MySQL

VIEW PAGE Being re-written to use API and JavaScript instead of PHP.

HOLIDAYS+

The second website I have made is a mock travel agency, built on Bootstrap 4. Using a framework such as Bootstrap or Material Design can greatly improve website creation. One draw back though is that using the default CSS means your website will look like a copy of any other website built off the framework. Therefor it can always benefit from some custom CSS styling as well, to make it stand out.

The travel website uses a number of bootstrap components such as the carousel and card grids to easily position and display content.

#Bootstrap4 #HTML #CSS

VIEW PAGE

holidaysplus website
graphics Portfolio

DESIGN PORTFOLIO

This website showcases some of my graphic design work from a course at university. First I made graphical representations of facts from the Harper's Magazine Index. These facts would include ridiculous numbers that are hard for the brain to visualise, by simplifying the number and comparing it to something most people are familiar with makes the fact far easier to understand.

Next an Infographic of a complex process. Designed to be printed out, this Infographic showcases different sci-fi ships and how they are able to fly through space faster than lightspeed. Finally I created a magazine showcasing all the graphics that were created for the course, as well as some of my inspirations and interests.

This site uses Bootstrap 4 as the building blocks as well as some of my own custom CSS and Javascript.

#HTML #CSS #JavaScript #Bootstrap #JQuery #Graphics #Illustrator #Print #InDesign

VIEW PAGE

SANDBOX

Another Design Portfolio - currently being updated

VIEW PAGE
sketch logo

Using the Sketch App is great for creating mock designs and prototyping interfaces, with a wide array of plugins, if you need something done, Sketch can handle it.

Mock up Travel Website, all assets created in Sketch.

#Sketch #Prototyping #Interface #Graphics #UI/UX

sketch graphic

University Projects

Floor Based Navigation System (Final Year Project) - 2016

For our final year project we were tasked with creating a system that took input from a physical interaction, such as touch or motion. Our team decided to solve the issue of navigating around an inclosed space such as a shopping centre or town square.

Everyone has seen those kiosks with the touch screens and the map, search a store or place and get instructions which you either have to remember or take a picture of, what if the system could guide you the rest of the way?

This was the premise behind our project, a floor based information display that a user could walk onto, select their destination by tapping their foot on it, and be guided to their location through a physical guide such as LED light tracks or through their phone by scanning a QR code.

As well as planning and testing, my main responsibility for this project was creating the tracking software that would path find between the points of interest we had chosen.

#Interface #UI/UX #Prototyping #User Testing #Software

Augmented Reality Obstacle Course/Card Game - 2015

For this project we were required to create an Augmented Reality Experience, meaning when you launched the application and viewed your surroundings through the phone camera, 3D objects will be overlaid onto the video for you to interact with.

This was split into two parts, initial concept - were our team came up with the initial experience and started to implement basic functionality. My first project was a card game that would display a 3D model of the card character on screen, when the camera picked up the physical card.

The second part was completing a project another team had already started. For this part our team was to complete an Augmented Reality Obstacle Course, were users would have a physical path to follow while solving or avoiding obstacles on their phone camera.

#Prototyping #User Testing #Software

Online Roleplaying Game - 2014

One of the first major projects I was part of, the whole class (~100 students) was tasked with creating an online computer game. We were split into teams to work on seperate parts of the application, all the code was managed on GitHub, so each team would fork their own version, work on their part, then integrate back into the main code base. Ironing out bugs with other teams and trying not to break everything.

Our Team was responsible for creating a player safehouse, my part was creating the graphical assets and sprites that would be displayed on screen when the player entered the house.

#Graphics #Testing #Software

Contact

Currently unavailable