As a UX designer in 2020, I wanted to deepen my knowledge with front-end development skills. At the time, I also needed a new website portfolio showcasing my design work. This project married those two goals over six weeks. I built my website with HTML, CSS, and JavaScript, backing up and doing version control on GitHub. My site went through user testing followed by a new iteration.
Key Takeaways:
I wanted to learn more about front-end development so that I could communicate easily with developers and design with their workflow in mind. My first development project was my own UX Design portfolio website.
Duration: 6 weeks
Roles: Front-end development, UI design, UX design, Testing
As an emerging UX designer, I needed a website to display my work and represent me professionally. At the start, I only had case studies on Behance.
Since I was my own client, I had to write all the copy and create the images. I made a google doc with all the text for each webpage. I exported and compressed all my images at 600px & 1200px to deliver appropriate sizes for device breakpoints, facilitating fastest load times.
My course supplied me with basic wireframes for each webpage. I began structuring my HTML pages with the mobile wireframe in mind, wrapping sections in <div> tags so I could adjust the layout for larger screen sizes later.
Once my HTML pages were created, I set-up my first GitHub repo. This provided version control, a website backup, and also taught me about the developer’s workflow.
I started with a normalizing CDN at the head of my pages, creating consistent default styles for all browsers. Then, I wrote my foundational type styles.
Then, I began styling interactions (anchors, buttons ...), as well as the layout (containers, wrappers...).
I used media queries to create medium and large device breakpoints with different layouts and font-sizes. Content was divided into columns on larger devices using a mix of css flexbox and width/float.
Then, I added CSS transitions and animations to my buttons and an svg to challenge my creativity and add personality.
/*Snippet of CSS file*/
* {
box-sizing: border-box;
}
body {
background-color: #fff;
font-family: 'Roboto', sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.5;
color: #332509;
}
h1, h2, h3, h4, h5 { line-height: 1.4;
Takeaways
I first added interactivity to my mobile navigation, having it collapse into a typical hamburger menu. I also added a scroll-to-top button that would appear after scrolling 20px down on all devices.
//Snippet of JS file function menuToggle () { var x = document.getElementById('myNavtoggle'); if (x.className === 'navtoggle') { x.className += ' responsive'; } else { x.className = 'navtoggle'; } }
Applying my UX skills, I put my website through user testing.
Age: Ideally 25-45
Technical Experience: moderate to high (defined in documentation)
Job: Works either in a tech based company; any type of design company, agency, or team; or as a recruiter/hiring manager.
I recruited 6 participants from my personal network that fit my target user criteria.
3 starting situations
7 total scenario tasks
I implemented all listed requirements, as well as additional requirements that came out of testing and were earmarked for a later iteration.
Before
After
After testing and reiterating, my website was worthy of launching. The UI is soft and minimal. Animations are smooth and slick. The color scheme is professional and unique with a dark gold, off-black, and white. My case studies tell a story and display my process and methods clearly.
I’m always amazed with how many great insights I get when testing a product. I did not expect the errors or the feedback that I received in testing, but was so grateful to have received them. My website improved greatly after testing.
I’m inspired to learn more about advanced CSS, SCSS, and dive deeper into JavaScript!
Interested in my work? Let's talk! I'm based in Portland, OR, and work remotely as well. Email is my preferred method to start a conversation.
Email Me
