I worked with MKM Serwis in 2015 to create a new brand for the company. This time the management wanted to deploy a new website that is mobile-friendly, optimised for Search engines and has a modern feel and look. To completed this challenge I teamed up with amazing copywriting team from Zmień Zdanie. So far this is by far the best project I worked on.
Every good project should start with clarification of client needs. That’s where the brief comes in. This simple tool is essential for every project that I’m a part of. After creating a brief I know what colors to use, what the company does, what are the services and products it offers and what is the point of the website.
# Brief Template ## 1 Introduction *Deadline, contact information for person responsible for the project on client side.* ## 2 Enterprise description *What services are provided by the client? What kind of products it offers? What is the business’ mission and values?* ## 3 Users *For whom the webpage is developed? Describe user’s segments that will visit this webpage.* ## 4 Website’s goals *Describe main goals Of the website and users actions critical to achieve them.* ## 5 Website's structure *Point out sites and sub-menus for main menu as well as all the websites that have to be created.* ## 6 Additional information *Choose additinal services and informations* - [ ] Static website - [ ] Website which uses CMS - [ ] One language website - [ ] Multilanguage website - [ ] Hosting needed - [ ] Domain needed - [ ] CMS Training - [ ] Technical Support - [ ] Newsletter implementation - [ ] Mail accounts creation - [ ] Copywriting - [ ] Search Engine Optimization Services # Visual Guide ## COLORS *Describe what kind Of colors palette you would like to use. Or add colors right away.* ## FONTS *Describe what kind of font you'd like to use or paste a link to the font Of your choosing.* ## SIMILAR WEBSITES *Paste a link to concurence website and describe what you like about them and what you don't like.* ## INSPIRATION *Describe additinal visual elements that you like, based on other websites. Provide a link and describe a websites - what you like and what you don't like*
As you can see in the brief, there’s really a lot of information that I can gather. Starting with general informations and ending with design specific questions that enable me to create a webpage that my client will love.
The brief is completed. Now I have a complete set of information needed to complete the project. It’s time to start the design process.
Along with that I send a brief copy to the copywriting team that I collaborated with on that project so they could brainstorm ideas about the content they needed to craft.
I always start designing with pen and paper to create a simple wireframe for the webpage.
Personally I think that using any dedicated software to create wireframes is a slight waste of time. The simplicity of a pen allows me to think and work faster on different concepts. Saying that I sometimes use a brilliant app from Adobe called Comp (believe me, I see the hypocrisy in that 🙂 ).
Wireframes created? Great. Let’s move on to so-called high fidelity prototype (Photoshop project) of a webpage. When creating high fidelity prototypes I usually have to go through a few cycles of iteration.
Here’s the first pic I send to the copywriting team:
It’s quite different from the final product. The idea stayed the same, but it was revised due to issues like SEO and client’s preferences. The thing I try to avoid at all cost is creating prototypes with every single detail in them. What I mean by that is creating every single webpage that will be shipped in the final product, like a separate project for every service.
Instead of that I create what I like to call „Views” (inspired by MVC Frameworks). Thanks to that I can create only 1 view for each template of a web page like Single Service, Services, Main Page, Gallery, Sample page and so on.
That saves a tremendous amount of time, enabling me to finish a page faster and more efficiently.
The fun part – coding
With bits and pieces figured out I can start creating a working webpage. When the design is agreed on the copywriting team can create content and I can peacefully work on the implementation of design.
I don’t jump straight to coding a new WordPress template. Rather than that I first create a markup of a webpage in HTML and CSS.
I can send it to the client for the last improvements and changes that he or she wants (like changing footer and nav bar in this project).
I also never code every single webpage that will be found in final project – again all I do is code „Views”.
With views completed and all the code prepared for WordPress implementation it’s time to use some PHP. First of I start with WordPress starting theme called Underscores. It saves a lot of time and permits me to deal with the most important issues.
For development I use MAMP to create local server and develop independently on my machine.
Thanks to that I don’t have to be concerned with anything and I can prepare everything for deployment on client’s server. For ease of work I use GitLab with free private repositories (it’s great). Having a repo initiated in MAMP folder it’s easy to make changes and push them to a remote.
46 commits later – the webpage is ready to be deployed (yay!).
The deployment with WordPress can be a bit frustrating at times. On my local server I always create a 100% working web page with all the content, installed plugins and everything other that client needs for the success of a new webpage.
For deploying on client server I use an amazing plugin called All-in-One WP Migration. This plugin recreates my local build on clients server with just one click.
After that all that’s left is running a QA for a last time on a live organism, shaking our client’s hand and moving on to the next challenge.
Every new project is an opportunity to learn. Right now I’m looking for a project that involves a lot of animations. If you have such a project — contact me. Let’s collaborate!
As always if you have any questions/suggestions – comment below or message me on Twitter – @mrkaluzny.