Select Page

John Matthew PDX

Design Work, Recent Work, Responsive, Website Redesign

Matthew John PDX

Website Design | Graphic Design | Wire Frames | Responsive Design

Avocational Design completed a responsive website for Matthew Wagner, Matthew John PDX, in 2017. The Matthew John PDX website needed to be responsive, have a smooth navigation, have an easy to use contact form, and be easy to add blog posts. The website needed to reflect a feeling of tranquility and professionalism to reflect the energy coaching that Matthew conducts. Lastly, the site needed to allow for expansion of its functions ie event’s calendar, newsletters, and online payment.

Matthew John PDX

Design Process

Take a look at some of the process.

Wire Frames

The key requirements of this site are making sure to keep the content easily navigable while conveying a cohesive message of tranquility for the site’s users. After discussing what the business owner was looking for, looking into site work research he had completed previously, and doing individual research into this site type- it became apparent that the site needed a single page layout with anchor links. After determining some site constraints, the design of the sitemap had to focus on key parts of Matthew’s practice (About, Services, Contact, and Blog). The wire frames to the left are based on the site layout above.

Visual Design

The visual design for this site needed to convey a sense of tranquility and simplicity, so the site’s visual elements incorporate a monochromatic palette and large inspirational images with soft call to actions and quotes. Matthew provided the small simple round graphics and images of his himself and excursions to the Andes. As you can see the site is still in production and is following the below visual design layouts that have been approved by the client closely.

Visual Design

The visual design for this site needed to convey a sense of tranquility and simplicity, so the site’s visual elements incorporate a monochromatic palette and large inspirational images with soft call to actions and quotes. Matthew provided the small simple round graphics and images of his himself and excursions to the Andes. As you can see the site is still in production and is following the below visual design layouts that have been approved by the client closely.

Contact

7 + 6 =

Center Stage Clothiers

Design Work, Recent Work, Responsive, Website Redesign

Center Stage Clothiers

Website Design | Graphic Design | Wire Frames | Responsive Design | Photography

Center Stage Clothiers was in need of a multi-paged website that conveyed its classic Hollywood pizzazz while connecting its fantastic costume collection to the production companies, actors, and fabulous people that needed it the most. It also needed to be able to layout a large amount of information for renting costumes and rent the store space for private events.

Go to Website

Web Design

Check out some of Center Stage’s Web Design.

Design Ideation

The business owner wanted a multi-page website layout to display all the different faucets of her PNW costume and event business, Center Stage Clothiers. She wanted to capture the glitz and glam of old Hollywood in her new company’s color scheme and brand elements and use the amazing logo that her husband and local artist and sign-painter, Jim Kirkpatrick, created for her.

Website Layout & Creation

The site needed to have a lot planning due to the amount of actions required from it. It need to be able to show off the gorgeous costume and accessory collection, schedule/show upcoming events, make it easy to understand the rental process, and contact the business with rental questions from schools, studios, individuals, etc.

Contact

15 + 4 =

Rose City Yarn Crawl

Design Work, Recent Work, Responsive, Website Redesign

Rose City Yarn Crawl

Website Redesign | Graphic Design | Wire Frames | Responsive Design

The Rose City Yarn Crawl has been a local Portland experience for almost a decade. It is a vibrant celebration by and for local knitting and crocheting enthusiasts. The RCYC’s brand is quirky, enthusiastc, and very much patterned around a tight-knit community for Portland’s fiber enthusiasts. As a result, their website design needed a quick loading UI for both its admin and users to help navigate the RCYC’s sites and events. This website design mixes a clean and open-feeling environment with squiggle lines of bright blues in order to capture the playful nature of the local knitting stores and bubbly busy owners involved in the events. The design of the site is neat and places importance more on the patterns being sold at each location, the events at each location and how to participate in the Rose City Yarn Crawl. In a collaborative effort with Sirius Media LLC, Avocational Design helped design wire frames, visual design proofs, and site maps that lead to a website that reflects the unwavering enthusiasm of the Rose City’s crafty knitting experience that is Rose City Yarn Crawl.
Check Out Rose City Yarn Crawl

Design Process

Take a look at some of the process.

Design Ideation

While brainstorming the informational architecture of the site, it was important to consider the flow of the user’s experience. Luckily, we had been able to meet with multiple members of the Rose City Yarn Crawl board and local knitters that had used the site in the past- we focused on the user’s journey from actual people that used the site. The image above is a glance at one of the iterations of the simple site-map layouts.

Wireframes

Some key project requirements were that site front-end users (people using the site for information and purchasing products) and site content-contributors (Rose City Yarn Crawl committee/board members) could use the site on multiple platforms and be able to quickly look up site content. The wireframes were created to demonstrate how the site map would flow for both kinds of users. The system was designed to flow from one venue and event to the next, so that each venue would be equally represented and events and patterns for purchase at each venue would be easy to find.

Visual Design

The Rose City Yarn Crawl provided us with their logo, a large library of professional knit and crochet pattern images, and inspirational website examples for us to gain design cues from. We worked with the committee to come up with the rest of the design elements. We considered how each color, transition, type, etc would contribute or detract from the UI of the site, the design preferences of the committee, and the site’s ease of use.

We went through multiple rounds of visual design development before arriving at the final design choice. The ultimate goal was to make sure that the site was responsive, easy to move through, and consistent in its design. We came up with a site that features event calendars to easily add and share events, interactive maps, slideshows showcasing knitting and crocheting images,  incorporated ecommerce, and an interactive patterns page.

Visual Design

The Rose City Yarn Crawl provided us with their logo, a large library of professional knit and crochet pattern images, and inspirational website examples for us to gain design cues from. We worked with the committee to come up with the rest of the design elements. We considered how each color, transition, type, etc would contribute or detract from the UI of the site, the design preferences of the committee, and the site’s ease of use.

We went through multiple rounds of visual design development before arriving at the final design choice. The ultimate goal was to make sure that the site was responsive, easy to move through, and consistent in its design. We came up with a site that features event calendars to easily add and share events, interactive maps, slideshows showcasing knitting and crocheting images,  incorporated ecommerce, and an interactive patterns page.

Contact

12 + 12 =

CHIFOO 2017 Graphics & Brochure

Design Work, Portfolio, Recent Work

CHIFOO 2017

Print Design | Graphic Design | Website Graphics | Illustrator Images | Brochure

Avocational Design created the graphics for CHIFOO’s 2017 Speaker Series, “Thriving in Chaos”.

The designs for the layout, accompanying images, color scheme, the brochure and concept were modeled after the speaker series was compiled by CHIFOO’s Program Chair. We also completed the accompanying web content, images and social media copy for CHIFOO’s 2017 Speaker Series.

Check Out CHIFOO

Graphic Design

Take a look at some of the speaker series images.

Website and Print Graphics

SVG images were created for the 2017 speaker series based upon images sent in from each speaker and created with Adobe Illustrator. All coloring for the images was pulled from the CHIFOO brand identity elements. All images needed to work for both the series brochure and the website.

Say Hello

4 + 1 =

CHIFOO 2016 Graphics & Brochure

Design Work, Portfolio, Recent Work

CHIFOO 2016

Print Design | Graphic Design | Website Graphics | Illustrator Images

Avocational Design created the graphics for CHIFOO’s 2016 Speaker Series, “Bounded Irrationality: Supporting Users and Creating Communities”.

The designs for the layout, accompanying images, color scheme, the brochure and concept were modeled after the speaker series was compiled by CHIFOO’s Program Chair. We also completed the accompanying web content, images and social media copy for CHIFOO’s 2016 Speaker Series.

Check Out CHIFOO

Graphic Design

Take a look at some of the speaker series images.

Website and Print Graphics

SVG images were created for the 2017 speaker series based upon images sent in from each speaker and created with Adobe Illustrator. All coloring for the images was pulled from the CHIFOO brand identity elements. All images needed to work for both the series brochure and the website.

Say Hello

5 + 2 =