My first freelance project is finished so I thought it would be fun to write about my project process. This website was for Mapps Coffee, a Minneapolis coffee shop located in the University of Minnesota’s bustling West Bank neighborhood. This was a fun and memorable milestone in my web development career because it is my first published freelance piece.
I currently work as a Front end developer for my 9 – 5 gig so I am quite picky about my freelance projects. They have to be a good fit for me because they cut into my personal time. This one in particular was very exciting because I am quite the coffee connoisseur and am very picky about the beans I grind and the way I brew. Working on the Mapps Coffee site was truly a joy, from client meetings to project concept and design, from the creation of its raw code and custom WordPress theme development, all the way through to its final deployment. I can’t take all of the credit though, as Umut and Sinan, (the managing team at Mapps Coffee) were very easy going and fun to work with.
The purpose of this post is to share the steps of my personal process and workflow in hopes of generating some conversation about how this may be similar or different to other web developers’ project process. I have been a web developer/designer for about nine months (at the time of this post), so engagement with the broader web community is a very good thing for me at this stage. Mapps Coffee came to me requesting a responsive website to serve the needs of their clients who were mainly University, tech savvy mobile users. The main concerns were to be able to blog about events at the Coffee shop, showcase their ever changing menu, and have a place for people to find their hours, address and contact information.
My steps, in order, are as follows:
- Research & Ideation
- Design atmosphere
- Layout Sketch/Wireframe
- Page Structure
- Browser Design
Without getting too in depth, I will summarize these steps in brief.
Research & Ideation
Research is fairly self explanatory and the process is as follows:
- Sitting down with the client to discuss what is needed and why
- Observing and studying the day to day clients at Mapps Coffee
- Creating personas around the average customer of Mapps Coffee
- Research and learn about similar businesses and do a competetive analysis
- Analyzing the findings and start building
The atmosphere (first introduced to me by Andy Clarke here) is bringing together the websites’ colors, shapes, and some visuals such as icons and typography combinations, usually compiled and presented in a Photoshop document. Between this and the process of the previous step, the client is encouraged to offer input, ideas and changes before we press on into the next step of creating a generalized site layout. I have also recently read very positive things about style tiles which seem like a very efficient way to approach this step of the process.
The layout at this stage is a first round, rough draft design that brings all of the needed content and concepts together into a formulated design. This layout is penciled out and presented to the client on paper. This layout is built on the bare bones content of the website and takes into account all assumed interaction and style of the future development. By focusing on the content first, I am contributing to the final build having faster load times because only pertinent information is presented to the user.
Before styling anything I build the basic theme structure (HTML) in my code editor. This can also serve as a functional prototype for the client to interact with. I start with the
head of the document and work my way down the page as I look at the layout that I previously sketched out. I also make all of my HTML into modular .php file chunks (includes) such as
head, header, sidebar, footer etc. This makes it much easier to find and attach to each page individually and they only have to be written out once.
The site’s styling is always started on top of my custom project framework base which is built with SASS and Compass. I look at the Photoshop file and my notes from the atmosphere stage of the project and determine the global SASS variables and mixins for things such as colors, padding, margin, and CSS3 interactivity, (transitions, animations etc.). Update: After the creation of this particular project, I have now started to implement the use of SMACSS and BEM much more after learning about it from Harry Roberts in his explanation of the Inuit css framework. This keeps my overall projects much more modular, understandable and easier to pass around to other developers.
Once the main chunk of the site is done, I bring everything into my blank WordPress theme. This includes installing WordPress, setting up the database, and integrating and re-structuring the code within the WordPress php framework; all while making the needed sections and functionality for the client to edit in the admin interface. This stage of the development and the following testing are all done in my local server environment.
I test as much as I am able to on my (currently limited amount of) physical devices, and do the rest virtually via browserstack.com. At this time in the project, I also write my fallback stylesheets for legacy browsers; for this site in particular I only have an alternate stylesheet for IE-8. I then re-test everything and perform the final QA once the site is deployed to the live server environment.
The site goes live after transferring the database and theme from PhpmyAdmin and the WordPress Import Plugin. I make all of the needed changes in the WordPress Admin and we are now done. I finish it all up by setting a very secure Password and Username and then I go into the .htaccess file (I read, learned, and implemented much from the htaccess book by Jeff Starr and Digging into WordPress book by Chris Coyier and Jeff Starr) to code some very simple security measures.
So, in a nutshell, this was the project process for my client at Mapps Coffee. I hope you enjoyed the summarized process, feel free to let me know your thoughts and input. Until next time…Tags: Clients, CSS, HTML, Mobile/Multi-Device, Project Process, Responsive Design, WordPress