UI Design

The Making of a Job Board Site Design

By April 12, 2016 One Comment
results page

One of the UI designers that I’ve learned a great deal from is Mackenzie Child. His YouTube tutorials have helped me a great deal in developing my own web design skills (he also has great Ruby on Rails beginner tutorials).

I was inspired by his recent Design + Front End Challenges to create this job board site design. But whereas Mackenzie only designs and codes the front end of the job results, I wanted to expand on the project and give it more potential functionality. My version of the job board site includes a basic search form, along with an option to expand the job search with more advanced search fields. On the results page, I also included a filter box similar to what Dice.com uses. And to the right of that page, I added space for a vertical ad banner.

Planning Phase

I began the project by writing down the site’s purpose in my little notepad. I find it easier to begin a project by writing it on pen and paper first. Less distractions that way.

job-board-features1First, I wrote outlines to give me an idea of the general purpose of the website, and where I’d be getting inspiration for it’s design. I then wrote outlines for the features that the site would have. This included things like links, buttons, and form fields. Drawing a simple diagram helping me to understand how links would route, if I ever decided to expand on the project by creating a back end to it.

job-board-features2

After outlining the purpose and features of the site, I began sketching out a wireframe using a notebook. I find it easier to begin a project by writing it on pen and paper first. This gives me more liberty to try out different ideas without being constrained or distracted by any software tools. I don’t have to worry about how to make an arrow shape or figuring how to rearrange a square with text inside of it, or any other details that I can add in the next phase.

wireframe of job board site

UI Design Phase

Once I had a general layout for the site, I began designing it in Bohemian Coding’s Sketch. Sketch is a great alternative to Adobe Photoshop made specifically for UI/UX design. This is where I could now add colors and make a more accurate representation of the site. My UI design includes details like page width, shapes of elements (like button and fields), shading on some of those elements, etc which I then used in coding the front end mock-up.

jobverse home page

Front End Phase

As fun as the UI phase of the project was, it was now time for me to get down with the front end coding of the website. The the front end is made up of two HTML pages (index.html and results.html) I used HTML5 and SCSS, with just a dash of JavaScript to code these static pages.

I first coded all the HTML elements that the pages would need without any styling. Adding the CSS styles only after HTML structure was built. This might have caused me to go a little crazy with adding class and id attributes to almost every HTML tag. But I figured it’d be better to have too many classes instead of now enough. I wanted to do as little changing of the HTML structure as possible, and have my styles work with whatever structure I made for the HTML. And for the slider, I using a really simple JavaScript plugin called noUiSlider.

This static site has a few snippets of JavaScript code. For the slider, I using a really simple JavaScript plugin called noUiSlider. And when the Advanced Search button is clicked, jQuery code triggers to relieve addition fields on the page. These are the advanced fields that the visitor to the site would use to fine tune his/her job search.

advanced search

I used Gulp to streamline my workflow. Gulp took care of things like automatically refreshing the pages after CSS changes, compiling all SCSS files into one CSS file, and making the outputted CSS compatible with the previous 4 versions of the most common web browsers.

The results.html pages is wider than the homepage, to allow sidebars for filtering results and an ad banner. Elements like the job tiles, buttons, and form fields and subtle shadow effects that become my obvious when hovered over. This gives the site a slight material design inspired feel.

Conclusion

I studied the features that other job board sites like Dice and Indeed included and incorporated some of those features in my design. But to add a little flair to the site, I did away with the regular white background with black text color scheme. I think this more colorful scheme makes a site more engaging without being a distraction from the actual purpose of the site.

One Comment

  • simcity buildit says:

    Wow, this article is good, my younger sister is analyzing such things, therefore I am going to inform her.

Leave a Reply