Table of Contents
Have you ever wanted to have professional website? Nowadays, you don’t have to be CEO of big company. Yet, you can build website of exceptional quality that will present you in the best light. In this article, you will find the first three steps to learn how to build your own professional website. We will start with creating solid brand strategy. Then, we will discuss how to create exceptional design. Finally, we will talk about the best way to start web development.
Steps no.4-7 are in part 2.
Step no.1: Start with your brand
When it comes to building professional website you should start with branding. And, the first task in branding is to create a detailed branding strategy. Too often people want to move faster than is advisable. They want to create and publish their professional website before they know website’s purpose. The problem is that when you don’t know the purpose, you can’t set any goals for your website. You also can’t choose any metric that will help you measure if your strategy works.
In other words, you should never start creating your website before you have a clear idea of its purpose. When you know its purpose, the next step is to decide on what’s your target audience. After you discover your ideal customer, you can move to establishing visual direction of your brand. You will set a tone of its voice and emotions you want to evoke. Let’s take a more detailed look at how to research and outline your brand.
Four steps to holistic brand
The first thing you have to do is identifying your target markert. The question that will help do that is: Who is your ideal customer? Which demographic group she belongs to? What she like to do? How she sees himself? What is her income level? Next, what are her values? What are her motivations and needs? What are the pains she has to deal with? How will your website influence her life? Asking all these and other questions will help you create persona of your customer.
Your second step is researching your competitors. Take a look at what your competition is currently doing. Find out what are their strengths and weaknesses. Then, find out where your brand is different. Think about how you can create a solid starting position for yourself. What is your biggest advantage? Why should anyone want to hire you or do business with you? What is the main value your customers can get from you or your business?
The third step is defining your brand identity. Imagine someone on the street approached you and asked you about your brand. How would you describe your brand in just three or four words? What words would you use? Imagine that you would have a little bit more time and space. How would you describe the vision and mission behind your brand? What is the thing that motivates to do business? Think about your brand as a real person with personality. What would be her traits, communication style, favorite colors or style in general?
The last step is to prepare your branding material. At this phase, you will get more practical. You will prepare the materials you will use on your professional website and other channels or platforms. These material should include brand assets such as logo, slogans, vision, mission statement, images and more. These material has to correspond to your brand identity and serve your branding strategy. Also, branding material has to be consistent.
Think ahead, a lot
When you think about your brand make sure to think ahead. I don’t mean thinking in the terms of months. In the case of branding, you have to think in the terms of years. Building strong brand takes a lot of time and effort. You don’t want to rush it now only to find out that you don’t like the result. Rebranding is a very hard process and no one will ensure that it will be successful. Therefore, think twice and plan properly before you take.
Step no.2: Create exceptional design
When you decide to build professional website, you should start with research. Exceptional web design can take many forms and shapes. Different website are using different design patterns and layouts. I would suggest that you gather a number of websites you really like you can use as your inspiration. In other words, you should start with creating a mood board. Your mood board can contain examples of both, mockups and also wireframes.
Create some simple mood boards
There is also no rule saying how detailed mood board should be. Meaning, you can collect examples of navigation design you like. You can also collect shots of parts of websites you find interesting. You can also record interaction patterns such as parallax scrolling effects and animations. Whatever you want. Next, take a look at websites that have different amount of content. Some websites are long, some are very short. Also, some website are composed of lot of pages. On the side of the spectrum are one-page websites and landing pages.
It’s important that you are familiar with what’s possible. The best way to create exceptional design for professional website is researching what other people are doing. This is probably the best way to get material for creativity and to set it in motion.
Find out what you don’t like
Another benefit of doing starting with research is that t will help you realize what you don’t like. For example, you may find out that simple website are not what you are looking for. Or, you may realize that website that features one central image with a couple links is not what do you want. You may also prefer a website that offers many images on one page. Whatever it is, you will never know it until you do the research. A good place to start can be galleries such as Behance and Dribbble. Remember that you don’t have to look for exactly what you want. Just explore.
Start with basic structure for your website
Another step to design professional website is creating basic structure or architecture for it. You can think about it as a skeleton for your website. Later on, you will cover this skeleton with content and visuals. My suggestion is to brainstorm couple different concepts. Don’t aim to find structure that will help you build professional website on the first try. This is often sure way to fail. Instead, focus on iteration. I found that the best solution is often result of many trials and errors.
This is true for almost every type of creative work. It doesn’t matter whether it is coding, designing, painting or writing. You always start with blank canvas and you have often no idea about where or how to start. Then, you decide to take the first smallest step and try out your first idea. If you fail, you try something different. You repeat this loop or process again and again. Sooner or later, this continuous iteration will take you to the result you really like.
How to create structure for professional website
Back to the structure of your website. You need to consider a number of things. First, how many pages will your website contain? Do you want to build simple one-page website? Do you want something more complex? Second, what is the desired user flow? In other words, how do you want users navigate through your website? Where do you want to get the users of your website? Also, what are the most common entry points? How people land on your website?
You have to think about both, the beginning and the final destination. Third, how do you want to structure the navigation of your website? Simple navigation is easier to understand and to use. However, if you want to build complex website, simple navigation may not be an option. Decide what is more important. Still, no one defines how navigation on professional website should look like. Choose the form and shape that fits your needs.
Let me give you a couple tips for navigation design. First, be concise. Every link in navigation should use one to five words at max. Don’t use full sentences. For example, “About”, “Portfolio”, “Our Work”, “News”, “Blog” and “Contact Us”. Second, use common language. It is easy to fall in love with weird or unique words. Many of us are geeks with quite rich vocabulary. Yet, we have to remember that professional website must be able to speak with other people. Not everyone has the same vocabulary as we have. For this reason, use only words that make sense internationally.
Third, allow the site to grow. Remember that your navigation may grow in the future. When you want to add new navigation items, you shouldn’t need redesign it every time. Make sure your navigation flexible enough to hold new links. Fourth, when you design navigation for your website, make an effort to avoid drop down menus. Why?
Nowadays, we abuse drop down menus. Many web designers and developers got used to these design elements. They like to take advantage of them. Drop down menus allow us to give every new thing its own page. Why would you place more sections of your website on one page? You can create separate page for each section and use drop down menu. There is just one problem. Drop down menus are annoying. Nielsen Norman Group conducted study on this subject. It showed that we move our eyes much faster than we move the mouse.
What this means for us? When we move the mouse to a menu item, we’ve already decided to click. Yet, then the drop down gives us more options. This is a moment creates friction in our minds. Another problem with drop down menus is that they encourage users to skip important top-level pages. How can you see if this is true in case of your website? If you already have professional website, take a look at your website analytics. You will probably see lower visits on top-level pages. Users may not even think that the link is clickable.
There is one exception for using drop down menus – mega menus. What are mega menus? They are large pane-like menus. Mega menus have potential benefits. You can use images in your navigation. Or, you can group links together to create sub-categories. Grouping links can help you create a better structure for your navigation. This can result in better usability. According to some studies, mega menus perform quite well. You can use them to provide users with a sneak peek of another page without requiring them to click and wait.
Test your assumptions
After you created a couple of concepts and chose your favorite one, don’t rush into code. Instead, you should take your concept and test it. I like to say that everything that was not validated through testing is only an assumption. The same is true for design. You may think that you found the best structure for your website’s navigation. However, this is you subjective opinion. Are you the only person who will be using your website? Probably not. You are building professional website because you want to promote your product, business or yourself.
This means that you want to build a website that will be used by other people. For this reason, your subjective opinion is not enough. You need to remain objective. This means that you need to know if other people can work with your navigation. The same applies to structure of your website. You need to test the structure and user flow to see if it’s working. Otherwise, user may not follow the path you want them to follow. As a result, they will not get where do you want. Take paper prototype of your structure and test it before you build it!
What if you already have concept in mind?
Let’s say that you already have an idea or concept for the structure of your website. Should you still spend some time doing this brainstorming? My answer is “yes”. Even if you have specific concept, you should do a little brainstorming. There is always some chance that brainstorming will inspire you. As a result, you may decide to completely change your mind. This is something that happens relatively often to me. Write down your idea and then have a short brainstorming session.
Step no.3: Build it mobile first
Let’s assume that you have clear branding strategy. You also have a structure. Now, it’s time to start building your professional website. The usual and ancient approach to building a website is to start with desktop and go down. More modern and better approach is to build your professional website mobile first. This means that you start development with mobile screens. Then, you move to tablets and desktops. Mobile first approach uses mainly min-width or min-height media queries.
Why build mobile first?
One of the benefits of mobile first web development is that you can build faster. When you develop for mobile you have to deal with a lot of constraints. These constraints are on both sides, performance and the landscape. Users on mobile devices have much less space. These users are also frequently on a lower connection speed or limited data plan. This means that you have to focus on creating a fast and consistent mobile experience.
When you focus on performance, you are more cautious about every piece of asset you use. You optimize and compress everything. You also use only sizes that make sense. Imagine loading 4500×2800 image on smartphone. This is just a waste of bandwidth your users are paying for. It is also often cause very high loading time. How long do you want to force users to wait? In the world of Internet, people are not so patient. Remember that loading speed is a killer feature.
Another less visible benefit of mobile approach. It pushes you away from the idea of removing or hiding content. When you build website desktop first, the easiest “solution” is to squeeze as much as you can and remove you can’t. As a result, experience on mobile is often much worse than on tablet desktop. What’s worse, many designers still have a bad habit of designing only for desktop. This means that the rest of work is left to developers.
The problem is that developers are not the ones whose job is to design the website. When you hire a web designer, you pay him a decent amount of money to do some work. Yet, many web designers half-ass their work by doing only one-third of it. So, let’s make developers’ lives easier by doing all parts of design work.
Build mobile first with progressive enhancement
There is also the question of how much JavaScript is safe to use. You don’t have to search on Google for professional website owned by large companies with huge budgets. Today, even websites built for a couple of dollars can contain more JavaScript code than HTML. And, no I’m not talking about websites built on Angular.js or React.js. When it comes to amount of JavaScript, there is no one-size-fits-all answer. It will all depend on desired functionality of your website.
In other words, if you want to use any of these JavaScript frameworks, go ahead. If you want to build your whole website in plain JavaScript, go ahead. You can do that. There is only one thing I want to suggest. Enhance your mobile first development process with progressive enhancement. Progressive enhancement is about starting with functionality that all browsers and devices support. Then, you can add more layers by implementing more advanced functionality.
This more advanced functionality will be available only to user with more modern browsers and devices. Still, the basic functionality is not impacted by this additional layer. The lowest layer of your website will still work and users can use it. What are these layers we are talking about? The first layer is HTML. The second layer is CSS. The third layer is JavaScript. This means that you start with simple and valid HTML. Then, you add some styling with external CSS. Finally, you make everything dynamic with the power of JavaScript. It’s not about what to remove, but what to add.
Progressive enhancement with JavaScript?
If you decide to build your professional website mostly with JavaScript, this approach will not work. In that case, the lowest layer should contain the basic functionality. What is the absolutely must-have function or feature your website has to have? Use this is the foundation of your website and build on that. In other words, the second layer will contain more advanced functionality and features. The same is true for the third layer.
Good metric for progressive enhancement when you build professional website with JavaScript is speed. It is high likely that every new layer and feature will have negative impact on performance. The more JavaScript will you use the slower your website will be. In other words, the lowest layer should run smoothly on all browsers and low-budget devices. The second layer can require a little bit better devices and more resources to run smoothly. The third layer? Well, I think that you’ve got the idea.
The last thing I want to mention is what to do with users who disabled JavaScript on their device. I found some statistics from year2014. The results? Less than two percents of mobile users either block JavaScript or their devices don’t support it. How significant is this number for you? Also, keep in mind that these numbers are from 2014. This is in the world of Internet almost like a 2004. If we consider how many mobile devices are sold every year, this number is probably not valid.
Closing thoughts on creating professional website
This is all for the first part. Today, we discussed that building professional website has to start with building start with creating holistic brand. Then, we talked about what it takes to create exceptional design. Now you know what are moodboards and why to use them. You also know that every website has to start with basic structure. We also discussed why you shouldn’t use drop down menus and that you have to test your assumptions.
The last topic you’ve learned about was how to build your website mobile first. We discussed why this is a better approach than desktop first. We also discussed how to use mobile first approach with progressive enhancement. And, that you can use progressive enhancement even for website built solely with JavaScript. What will be the subject of the second part? We will explore topics such as perfect usability, search engines, engagement and much more!
If you liked this article, please subscribe so you don't miss any future post.
If you'd like to support me and this blog, you can become a patron, or you can buy me a coffee 🙂
Become a Patron
