stewartillustrations

matt stewart illustrations logo

Web Design & Development

web design & development

Portfolio Tabs

Portfolio Tabs

Featured Work

I have a completed programs in digital graphic design from Mount Royal University and a Web Developer program from SAIT. These programs gave me a foundation in graphic design, the Adobe suite of programs and other design software programs, and front-end web development. After graduating I have worked contract positions at companies in Calgary and have taken on freelance work, where I have applied my skills and learnt many new ones. I also continue my education outside of the office and school, most recently with diving into courses on SEO and bettering my back-end web development skills with improving my knowledge of different coding languages, like Python, Javascript, PHP, and more. 

Why I Use WordPress

Many of the websites I’ve worked on, including this one, have been created on WordPress. I tend to use WordPress because it offers a quick and easy interface to update and expand the content of a site, not to mention it is free and has a ton of customizability. It is also perfect for clients who need frequent website updates, are not code savvy, and have a small budget for their web development needs. For myself, I like WordPress because I have the ability to fully modify a website in its functionality and style both through technical (using code) methods or by using a template that has fun features baked into it. I can also easily and quickly go into a page and alter its contents or build a new one, which is especially handy when a website has an active blog section like this one does. WordPress is also constantly evolving, allowing for new features to be added to an existing website and the tradeoff is that there is always something new to be learned but I also find that as a positive!

Charity Website Build

This is a simple website that I built for the AGAT Foundation Charity Classic, but it had a lot of text and imagery and it had to have a dynamic PDF form for enrollment embedded in it. A lot of the imagery is stock photos or photos taken at previous events, and some of them like the home page banner image, were altered in Photoshop; I thought it would be neat to paste the event logo onto the golf ball that is on the home page. On the About page there are three golden geese above the body text, and to make it a bit more eye-appealing I turned them into animated gifs so each bird has their wings flapping.

For the dynamic forms, I created the documents in Adobe where a user fills them out and when they hit ‘done’ the information is then emailed out to people working the event. I also included a few more forms throughout the website that addressed other issues /ideas and built a large photo gallery that had tabs so the user could select which event year they wanted to explore.

Web Design Process

I start with a sketch for every website I work on, whether it’s with a team at a company like AGAT Labs or it’s for myself like this website. This sketch is a mix of doodled boxes, diagrams, and bullet points. I answer the W5 (who, what, where, why, when, and how) to build content which gives to a site’s structure. I work out what the purpose of the website will be with this information, for example with my website here it is mainly informational that leads to engagement and sales is secondary. 

From my notes I build a wireframe. The wireframe is like a stick drawing with blocks that have a title in them. It is the structure of a website’s pages and illustrates how each one will connect. With this I focus on individual pages starting with the home page. I will look to what a company has done before, their branding guide, and look to what their competitors have done. The home page is the first page I design, which consists of  just shapes and blocks of text that organize the page for it’s content, and sometimes pair this with a mood board to help identify the style and feeling. A mobile design is also created at the same time as the desktop version. For my personal website here I didn’t exactly follow these steps as I was doing it just for myself. Instead, here it’s been a bit ad hoc where I change things up every so often to improve flow, information, style, and content, and honestly I haven’t quite landed on a final design for this website.

Page Mockups

Above is a carousel of hero images designs I created. The idea is that they utilize imagery of happy people cooking, often in a team environment. The company colour of orange was used in a tab design with softened corners and at 85% opacity so the image can still be somewhat seen behind the graphic. Two of the three images also have a search bar included. Three images were created to also allow for choice when deciding on what hero image to use.

The team bonding image follows the same style as the hero images but would be used as a section to a page. Like the hero images, this was created in InDesign which was appropriate as I was combining stock images and text as opposed to creating a lot of unique objects or manipulating imagery, which I would’ve used Illustrator or Photoshop for instead.

Company Website Build

For this website, I took the company’s old website and added more functionality to it and gave it a better flow. Their previous website was created on Joomla and hadn’t been updated in almost a decade. Much of the previous website was broken including images that had disappeared from the pages. I immediately begin with a revamped menu bar that brought a call to action to the top, with all the contact information, a search bar, and links to their social media accounts. I then created a full screen image carousel  to feature some of their products. The gallery, resources, connect, and products pages were all fairly standard stuff and filled with content their sales staff had. WordPress proved to be a great option for the website as now the sales staff could easily log into the website and update existing or add new products to the website themselves, which is something I taught the staff how to do and created author level accounts for each sales staff member.

The About page was something new I introduced to their website, even though it’s not a new thing to websites. I suggested bringing more of the story of the company and the people that work there to a higher level on the website, and in turn some of their marketing initiatives. That people focused story made their products stand a little further apart from their competitors as they had a three-generation family story to tell. 

More Web Develpment & Design Examples