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.
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.
First, 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.
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.
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.
Front End Phase
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.
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.