I'm Brian Kidd

Web and Multimedia Developer

Web Design and Development • UX Design • Web Content Writing and Editing • Audio and Video Production

About Me

Brian Kidd

Hello, my name is Brian Kidd and I am a Web and Multimedia Developer. But what exactly does that mean?

Put succinctly, it means that I specialize in Web Design and Development, UX Design, Web Content Writing and Editing, and Audio and Video Production.

As a writer, it means that I love to write and edit web content. I earned my first degree in Journalism from the University of Washington and was awarded The Excellence in Journalism from The Department of Communication. However, with regards to my career, writing is not the entire picture but a very important part of it.

Brian Kidd

As a musician and videographer it means I have an affection for audio and video production. Since owning my first Tascam 424 four track music recorder and also my first camcorder as a kid, I have been writing, recording and producing music and video content. Currently, I play and produce music in an electronic music act called Kylmyys and besides live performances we independently produce music for TV, film and radio and create music videos. However, like writing, audio and video production is not the entire picture, but a very important part of it.

Although I have a great affinity for the aforementioned fields, it was my introduction to the Web, and the many multimedia possibilities that it offered, that piqued my interest in Web Design and Development. To create beautiful websites, some with pictures, music, videos, articles et-cetera, seemed like an impossible feat at first, especially since I had not written one line of code until I was well into my 20s. However, I bought an O'Reilly book about HTML, signed up for a Tripod account (yes I wrote 'Tripod') and as most noob programmers do, I typed in the phrase "Hello World!" into the text editor. Once I saw those words live for anyone online in the entire world to see, my eyes widened as I knew this would be the beginning of a lifelong dedication to contributing quality content to the Web, with both passion and precision.

After receiving a degree in Web Application Programming and several programming certs, the picture of my career path is complete. Currently my concentrations are on Front End Design and Development along with UX Design. Please See my CV below for more information.

Download CV
Contact Me

0%=Beginner; 100%=Expert.

Front End Web Development

UX/UI Design

JavaScript

Web Content Writing and Editing

Passions

Building the 'House'

HTML5

The essential markup language to build any website. An analogy I use for HTML is that the language is a tool to frame a website like you might frame a house. The HTML itself is like the actual frame of the house in that a house has rooms containing different things (e.g. furniture and appliances) and a website has different sections created by HTML (e.g. header, body, footer) that contain different things such as images, text, and forms.

CSS3

I love using CSS3 to style websites and make them responsive on all devices. An analogy I use for CSS is that it can be used to style the different sections of a website like you might style the different rooms of a house. For example, rooms, like sections might vary in size. Moreover, a room might have different pictures or paintings on the wall that are different sizes with possibly different frames and colors, much like the images of a section might have different sizes, colors, and borders.

png logo


JavScript/Node.js

JavaScript adds dynamic features to a website and allows for user interaction. It can even be used server-side with the asynchronous language Node.js. JavaScript allows the user to interact with the website like the switches, gadgets, and appliances in a home. For a simple example, when a visitor pushes the doorbell of a house and the occupant asks "Who is it?" and the person replies with her or her name. This is like if a JavaScript eventListener is added to an HTML element, and after the user clicks on that element, a prompt box appears asking for the user's name.

png logo


PHP

PHP is used to communicate with databases and retrieve data to be displayed on a website. HTML, CSS, JavaScript, and PHP are what I consider the Fab Four of what every Front End Developer should know. This is because PHP is like electricity or even data that is delivered to a home. For example, you might sign in to your YouTube account to watch videos, much like you might sign into your NetFlix account on your TV to stream videos as well.

UX Design/Web Content Writing & Editing

I love the psychological aspects of UX Design in that it emphasizes what the user experiences while navigating through a website and how these experiences make the user feel and behave. A UX designer could be compared to the architect or interior designer of a house. Although UX Design is a separate field from Front End Development, I believe that communicating effectively with UX Designers is an important part of being an excellent Front End Developer.

Audio/Video Production

I have been involved in numerous film scoring productions and have skills in audio engineering, videography, and film editing. This work—including music licensing for TV, film, and radio—I do primarily independently. For more information please email me at kylmyys@kylmyys.com

My Latest Projects

march madness predictor

NCAA Basketball March Madness Game Predictor

As a huge basketball fan, I am very competitive when it comes to my NCAA Basketball March Madness bracket challenges. Each year I fill a Google spread sheet with important statistical data of each team that participates in the tournament. This spreadsheet is hosted by a service called SheetDB that cteates a JSON API endpoint for all my data. I programmed the site with JavaScript implementing both a popular basketball game predictor formula along with my own statistical comparisons. I designed the UI of this app using Figma.
Currently, this app is still being developed, but the user can enter in any two teams that participated in the 2024 Tournament and get a score prediction. The user can also see all the available stats of each team, which are updated before every tournment by filling in the Google Sheet. Since the API endpoint is connected to a living spreadsheet, it is very easy for me to add new stats like injuries and All Americans on the roster and then update the JavaScript and markup to show the new data. I hid the API key by using Node.js and an Express proxy server.
The home page is finished, and the other pages will be completed by the 2025 tournament. Check it out on desktop, tablet, or mobile.

Figma, JavaScript, Node.js, Express.js, HTML, CSS

Live Demo Github Figma
responsive user interface

Restaurant Review Page using Yelp Fusion Api

I adjusted the review section for this mom and pop diner. Now the reviews are loaded from the Yelp Fusion API using an Express Proxy Server. The reason I had to use an Express proxy in Node, is because the Yelp Api does not allow Cross Origin Resource Sharing(CORS) requests with the Access-Allow-Control-Origin header for authorization. By using a proxy server, I was able to circumvent the CORS restriction. Notice, the Yelp API only shows previews of the top three reviews, so I also linked to the entire review on Yelp.

JavaScript, Node.js, Express.js, HTML, CSS

Live Demo Github
react-movie-app

React Movie App

The React front end allows users to create accounts, login, and add movie info that is stored in a MongoDB database.

React, NodeJS, JSX, JavaScript

GitHub-front-end GitHub-back-end Live Demo
responsive user interface

Responsive User Interface Prototype

A client wanted me to code a template for the UI of their website. Using their design created in Figma, I was able to crete the UI using HTML5, CSS, employing the BEM methodology for CSS selectors, and JavaScript

Figma, HTML5, CSS3, JavaScript

Live Demo Github Reel
react gallery

React Gallery App

This image gallery app was created using React. Using React Router, routes are set up for three default topic pages and a search page. Images are displayed from the Flickr API using Axios to fetch data. The project was created as part of the Treehouse Full Stack JavaScript Techdegree

GitHub Live Demo
phrase hunter

Game Show App

As part of the Treehouse Full Stack JavaScript Techdegree, I used JavaScript objects and methods to program a game called Phrase Hunter. The object of the game is to guess the letters of the phrase before getting five wrong. I added a keyUp event listener so that the user can use the keyboard, and not just the mouse cursor, to enter guesses.

ECMAScript 6 (ECMAScript 2015), HTML5, CSS3

GitHub Live Demo
php login system

PHP Login System

Using PHP, I programmed a login system that allows the user to create a username and password and then sign into the application. I also used prepared statements with MySQLi to prevent data injections along with bound parameters for optimal performance, minimizing bandwidth usage.

PHP, HTML5, CSS3, Procedural MySQLi

GitHub Live Demo
life seed acupuncture

Life Seed Acupuncture Website

My wife is a licensed acupuncturist and wanted an aesthetically pleasing and responsive site that would be an improvement on the website she built using Weebly. I built this website in 2017 using Mobirise because I wanted experience using a native website builder and liked the simple yet elegant designs in their template library. By modifying the original template I was able to create a website that suited my wife's needs. She has since decided to use Squarespace because she doesn't want to have to keep asking me to make changes to the website when she needs them. She would rather just make them herself. Married life...

GitHub Live Demo
SQL Library Manager

SQL Library Manager

This web app is for a fictional library to help them manage their collection of books. It includes pages to list, add, update, and delete books using JavaScript, Node.js, Express, Pug, and the SQL ORM Sequelize. This project was created for the purpose of the Treehouse Full Stack JavaScript Techdegree.

GitHub Live Demo
high fidelity mockup

High Fidelity Mockup for a Food Charity

The client asked me to rework the medium fidelity mockup I submitted to them and create a high fidelity color mockup. As part of my process I created a triadic color palette that includes earthtones from which I picked three—see deliverables. The charity sent me the basic requirements for the the layout. The founder of the charity was comfortable with me not only making the design but also composing the prose for the design. She requested that the design conveys the urgency of fighting world hunger but also to make sure that the fun aspects of the charity are depicted as well.

One of the biggest things I learned when designing this site is that oftentimes a little color goes a long way, especially with colors that are further apart on the color wheel. The blue and the green go together very well even when used liberally. On the other hand, the orange-red color, although part of the triadic color scheme, worked best when used sparingly for inner borders and buttons. I discovered that I really like the triadic color scheme in that it is an effective way of finding colors that work when used both liberally and sparingly.

Deliverables Mockup
weather app proto

Medium Fidelity Wireframe/Mockup

A medium-fidelity wireframe/mockup for an organization that fights world hunger. The organization wanted the personality traits of Honesty, Compassion, Respect, and Service to Others to really shine through for their website. Also, they wanted the design to have Inspirational, Descriptive, and Transparent UX Content as well.

To illustrate why fighting world hunger is important, I used both global and national hunger statistics to create a sense of urgency and also a call-to-action for the site visitor to donate. I also included transparent, inspirational, and descriptive UX Design content in the mockup. The client liked the mockup and hired me to create a high-fidelity color mockup.

Deliverables Mockup
music for programmers

Music for Programmers

Music release from Kylmyys

Live Demo
milton news and brief

Company News Letter

Last Edition of Internal News Letter for Federal Home Loan Bank of Seattle

Live Demo
medium fidelity blog mockup

Med Fidelity Blog Wireframe

A baking supply company asked me to create two iterations of a blog design: one that emphasizes their baking supplies and the other that emphasizes tech-savvy elderly women, their biggest client. I solved the first problem by featuring the baking supplies used for a particular recipe in the blog design. The second problem, I decided to feature top elderly female chefs who had contributed recipes to the blog.

By creating the two iterations for the client, I learned how to tie in different aspects of a company in a design to emphasize its different offerings. Ideally, this would change user behavior in that for the first design iteration, the visitor would become more aware of the baking supplies the company offers and would potentially purchase some of those goods and in the second iteration, the site might attract its biggest in-store customer, tech-savvy elderly women.

Deliverables Wireframe
weather app proto

Weather App Prototype

The client asked me to create a prototype for a weather app. They requested that the deliverable should be a high-fidelity prototype that includes the current weather along with the forecast of upcoming days. When a specific day is selected, a new screen will appear with the weather specifics for that day including the low and high temperatures and chance of precipitation.

This was my first time creating an interactive prototype in Figma and I thoroughly enjoyed the process of designing the app and then making it interactive with the prototype. I also discovered that Font Awesome is a great resource for free UX Design icons. Also, I learned users can intuitively decipher images much faster than words. For instance, instead of using an H or L for low and high temperatures, by simply changing the color of the number to red and blue, the same information is conveyed in a more aesthetically pleasing manner.

Design Prototype Sketches
pet adoption wireframe

Signup Form Wireframe

Sometimes with high-end UX Design tools, it is easy to get too detailed when creating wireframes. A pet adoption agency hired me to create a super simple wireframe for the desktop, tablet, and mobile views of a pet adoption form. After determining the stakeholders, audience, and goal of the form, I created a wireframe of the form using Balsamiq, which is a tool that really lends itself specifically to creating effective wireframes.

I had some preconceived ideas about how I was going to create a wireframe for the adoption form. However, I found it was much better to consider the needs stakeholders, audience, and goals of the form before I began drafting the wireframe.

Deliverables
hiking app prototype

Medium Fidelity Wireframe/Mockup

The client hired me to create a user flow for a hiking application. The goals for the business are to create healthier communities and more active individuals by giving people an easy way to schedule a hike, increase the number of hikes users go on, and increase the number of app downloads. Using the card sort located in the Deliverables, I was able to create an effective workflow of two different user personas.

During the process of creating the user flow, I was able to empathize more with the two personas and visualize the specific needs each user might have. For instance, one persona wants to be able to schedule hikes with his busy friends and the other persona wants to be able to meet new people while hiking. I included both capabilities in the user flow and subsequently the wireframe itself.

Deliverables Wireframe
blog wireframe

Blog Wireframe

A baking supply company asked me to create a low-fidelity wireframe that emphasizes recipes and the supplies they sell. The company came up with the basic requirements for the layout, which seemed limiting to me because I could only design how the blog would look above the fold and the header section is small, making it difficult to incorporate a traditional desktop nav—I opted for a hamburger nav.

The company liked the wireframe I created but looking at it now, I would probably write the word MENU over the hamburger nav to make it clearer what those three lines mean and I might even consider a more traditional desktop nav. I understand that sliders and carousels are often lowly regarded because of clickability rates, but in the context of a baking blog, I feel that they can be effective. I would consider using an expandable list to replace the sliders in the future. In order to get users to buy the company's baking supplies, I made sure to include advertisements in the aside portion of the design.

Deliverables Wireframe
grocery store app

Research for a Grocery Store App

The client needed me to conduct interviews with grocery shoppers to determine their main pain points and develop a proposal for a grocery app based on those pain points. Participants were found using social media with a notice solciting primary shoppers of households to take part in a shopping study that is being conducted in order determine what features of a grocery store app might make grocery shopping easier and more enjoyable.

What was really revealing to me during this project was that it is best to let the subject lead the interview and that the best responses you get are often from broad rather than specific questions. Of course, you do not want to ask too broad of questions, but questions that make the user share unique, personal details about what you are asking. I used some of the participants' statements to create an affinity diagram as pictured here. I used the statements to create categories and then I placed the relevant statements under each category.

Deliverables
grocery store app

Grocery Store App Usability Test

Based on my research, the client created a prototype of their grocery store app and hired me to conduct usability tests to determine if the user could complete a simple task. The participant was asked to choose bananas, place the bananas in the cart, and then view the cart at checkout. I had all the participants speak aloud as they attempted to complete the task and was able to make recommendations for improving the prototype based on participants' feedback.

This project showed me the importance of usability testing in that no matter how well you think you can empathize with different user personalities, it is extremely difficult to predict what pain points the user might run into. For instance, when participant 3 pointed out that the number of bananas is not shown on the second screen, I was impressed and surprised by her observation. I included her input in my deliverables to the client.

Deliverables Prototype Created by Client
design critique

UX Design Critiques

UX Design Critique of two websites, including color critiques and empathy maps

A company called Shirts 4 Mike hired me to critique their website using UX Design principles. In addition to determining the site's goal and target user, I broke the site down into the UX design principles of color, shapes, grouping, and balance and organization. I also created an empathy map of what a potential site visitor does, thinks, says, and feels in order to determine the effectiveness of the website and offer suggestions to improve it.

The most important thing I learned while critiquing the site was that the pictures and images of a website can be equally as important as the word content. In this case, I suggested that the client create an About tab to describe in more concise language what Shirts 4 Mike actually is.

Deliverables
steves cafe

Steve's Cafe

When I started attending Cascadia College in 2013, I took part in a group project to build a simple website for a local business. Steve's Cafe was a Mom and Pop diner on Main Street in Bothell, WA. Originally, my group used a template from CSS3 Templates to build the website. The owner liked the website, but I decided that it did not look very good on mobile or monitors with larger screen resolutions like 1920 X 1080. So as part of an internship project the following year, I incorporated some of the code from the template and used the HTML 5 Boilerplate Framework to rework the website to make it responsive. I also added a simple reviews form and used JavaScript and jQuery to make a clickable reviews section.

HTML5, CSS3, JavaScript, jQuery

GitHub Live Demo
online developer plus

Online Developer Plus - Website to Attract Investors

A pair of Microsoft alumni founded an online programming school and hired me to create a website so they could pitch their company to investors. Using some of the content from their previous website that was not attracting investors, I decided that due to time constraints, I would use a template that I created for a similar business, which uses the Bootstrap Framework for responsive design. The client was very pleased with the result and what was originally used as a website to attract investors slowly morphed into a website to attract students. However, the website eventually attracted an investment group and the programming school (ondevplus.com) is starting to enroll students. My website helped the company attract a strong investor.

HTML5, CSS3, JavaScript, jQuery, PHP, AJAX

GitHub Live Demo
express portfolio

Personal Portfolio Using Express Framework

Another Treehouse Full Stack JavaScript Techdegree project, this was my first time using Node.js to work with JavaScript on the server side. Within the Express.js Framework, I built a portfolio that includes some of my Techdegree projects. This site is hosted on heroku.com

HTML5, CSS3, JavaScript, JSON, Express.js, Node.js, Pug

GitHub Live Demo
brian's favorite guitarists

CSS Flexbox and Grid Site

I created this website to illustrate my knowledge of CSS Flexbox, CSS Grid, and Vanilla JavaScript to manipulate the DOM. Most of the JavaScript was used for the subnavigation and also the 'read more' buttons.

HTML5, CSS3, Flexbox, Grid, JavaScript

GitHub Live Demo

What Clients and Managers Say

Latest Blogs

Job Search

An Unexpected (Career) Journey

It was the spring of 2013 and I found myself jobless since my contract working for a mobile services startup through a staffing angency had expired. Just about 12 months prior to this my contract working for Google as a data analyst in their maps department ran out. I was becoming very tired of the revolving door ...

Job Search

Laid off? Use a Cover Letter to Put Things into Perspective

I was recently laid off from my Front End Web Development job due to COVID-19 and this is a sample cover letter I composed to a prospective employer...

Health

I CRACKED MY BETTER HEALTH CODE

I’m no doctor, but recently with the help of my own research and a naturopathic doctor, I have been able to demystify my health issues, which seemed to increase in my 30s and now in my early 40s...

multimedia developing
Multimedia Development

Multimedia Development

This week was a week of finding patience in refining my crafts. I decided to give Mobirise a chance as a way to build lightweight websites on the fly. These websites are supposed to be mobile-friendly, and they are, for the most part. That is if you stay within the...

music licensing
Music Licensing

Producing Music for Licensing

By trade, I am a Web Developer. However, I am also a musician and own a company called Kylmyys Media. According to some, including Jesse at MusicMakesCash, there is an abundance of money to be made by licensing your music for television, radio, movies and commercials...

Get in touch

(206) 683-7451

Juanita Dr. NE
Kenmore, WA 98028

brian.kidd.one@gmail.com