Case Study: Alise’s Portfolio Website (Learning css, html & js)

6 min readJan 23, 2024

Overview:

The goal of this project is to create a working responsive website with a few subpages that feature key information about me as a designer, relevant work examples, a way to contact you, and project pages.

I started with a set of wireframes. The end product is a responsive, mobile-friendly website containing 4 pages. It was a very successful project!

My role in project:

Creating style guide
Writing website copy
Developing HTML files
Creating CSS styles
Coding JS
User testing & responsive view testing
Fixing errors & checking for bug

Tools/ Methods used:

VSCode
Github
UX Usability Testing
CSS/ JS/ HTML

As a web designer and ux designer, I needed to understand the world of code, as everything I design will eventually be translated to code.

This project enabled me to broaden my skills as a designer and will prove to be a valuable tool when working with clients’ projects whether I am developing the design or handing off my designs to a developer.

Context and Challenge

Background and description:

Creating my Portfolio Website was a way for me to showcase my past work in UX design as well as develop the skills to code using css, html and js.

I started with a set of wireframes for each page, each wireframe had mobile, tablet and desktop layouts. The aim was to match those wireframes with my final product, adding in my style and pizzazz.

The problem:

As a UX/UI and Website designer, I know I need to show my work to future employers and managers. Having the ability to code is a big skill that will enable me to speak to developers in a more concise way, as well as know the parameters of code that will inform my design.

My goal:

To create an online presence that showcases my work so that I connect with professionals for UX design or web design projects. My other goal was to improve my skills by developing an understanding of code using css, js and html.

I set out to design a homepage, about page, contact section and at least 1 project page.

Process and Insights

Identifying my ideal audience:

Given the fact my website is a portfolio aimed to show my past work and connect with future employees, I wrote out guidelines for whom I’m designing for.

It’s always important to keep in mind who a website is for. Probably one of the most important parts of designing a website.

Target audience

→ A) Small business owners looking to re-do or create a website.

→ B) Marketing firms or marketing teams looking for designers to contract for work.

Developing a style guide:

Based on my aesthetics I wanted to make a website that had eye-catching fonts that also were relaxing to the eyes. I chose to use google font because they are open source and work with most web-browsers.

My color palette also was soothing, soft colors and a simple clean background. I chose the colors to be AA accessibility rated.

Designing the Website:

Creating the content

Because we already had wireframes to work with, I started by creating copy for my first 3 pages. This copy was translated into html format that would set me up for success when styling with css. I created div sections so I could add rows and columns where appropriate.

I also gathered all of my images, labeling them properly and sizing to two sizes (1200x and 600x) for faster load times on mobile.

Styling the website

Once the content was in place, I created my css styling implementing not only fonts and colors, but everything from button colors, animations, and rows and columns.

Responsive views

I always want to make sure my website looks good in mobile view! I wanted my site to have a different view in mobile versus tablet or desktop.

I created breakpoints for the 3 common sizes, small- med- large devices, changing the row and column formats for each of these breakpoints.

This ensured that my design would appear correctly on different sized devices.

Snippet of Mobile view (with rexponsive menu) and desktop viewfor website design

Checking for errors & responsiveness:

I designed all elements using best practices for html, css, and js. I ensured that my code was error free and web responsive using linters.

I always check my design for mobile friendliness throughout the design process to ensure mobile users have a wonderful experience.

I also cross tested on several browsers including edge, firefox, safari and chrome.

User testing-

Once the website was fully designed, I conducted 5 user tests.

My participants were pulled from folks I know, and about 75% of them matched my ideal target user. Therefore I got a wide array of insight on preference, likes, dislikes and what they would look for in a portfolio website.

From this data I created a list of future iterations.