Web Designing process and mock-ups by Adflair Media Solutions
This all starts from gathering the adequate information about Company, Target Audience, Products and Services. These information some and all essential define success of a website designing & development from scratch. It helps to understand your project better and plan future tasks carefully. To design a website mockup you need to precisely define and describe its tasks, goals and target audience, choosing the right content.
- Brief description of your project. Overall review of the project, presentation of your company and the value it brings the audience.
- Purpose of your website. You should answer the question, why you need this website. Despite its apparent simplicity, it is a key to the success of your project. A website is usually aimed at providing information, promoting services, supporting clients, selling goods.
- Target audience. Who will use this website? What group of people will help you to achieve your goals? It is very useful to imagine “perfect users” who will visit your website. Think about their age, gender and interests, Education – this help us to define the best design style for your project.
User Experience (UX) Development
When designers receive the task to create a website mockup the first thing they do is analyzing the project and related information.
- Analysis of the subject. It is necessary to study and analyze the subject, delve into nuances, clarify missing points. It will help to create your own concept in the future.
- Competitor analysis. To complete the defined business tasks your website should surpass competitors’ sites. It is required to make an overview of them, taking into consideration visual branding, navigation, calls to action and key features. Having determined what is good and how to eliminate that what is bad, you have a real chance to come up with a more successful solution.
- Requirement analysis. This step presupposes identifying business, technical, social and aesthetic requirements to the project and its usability.
- Inspiration from other designers. There are a lot of websites that collect best practices of web design. They can inspire new ideas and interesting solutions.
Careful planning at the beginning of design process is the key to successful results. It also gives an opportunity to accurately calculate and reduce the price. The secret is: every hour spent on planning saves three-four hours at the development stage on the average.
Planning consists of the following parts:
- Website functionality. General description of function blocks (search, catalogue, news feed, etc.)
- Website structure. This is a list of all main sections and subsections of a website that have to be designed and drawn.
- Page structure. This is a list of blocks that should be on pages specifying their format.
- Specifications. This document summaries collected information. Being short and not too technical, it serves as a basis throughout a project. As a rule, it is regularly supplemented in the process of work.
When planning everything, you should always remember about the end-user. A good user interface (UI) ensures an easy-to-navigate website.
Sketching and brainstorming ideas
Sketches are a great way to start the design of any complexity. With a pencil and paper you are able to easily move from one idea to another. The key to making good sketches is to reject all visual elements and to focus on generating the best ideas for the future website. There should be no text and images too. They are usually replaced with lines and blocks.
Wireframes are a simple visual presentation of a website. They display page structure without the use of colors and any graphics (in most cases). This allows designers and developers to introduce offered features, graphic elements, structure and content of a website with the help of simple layouts.
Wireframes are not interactive and do not display a lot of details. They have simple design that lays the foundation for a project. They have to show how a website will work, but not how it will look. In some rare cases wireframes can closely coincide with the design of an actual web page, but they should not determine the final design (UI).
Wireframes play a crucial role in ensuring a more realistic experience with a product. They represent the visual hierarchy of pages, shapes and interactions of elements, determine what content deserves the greatest attention and how much space it can occupy on a page. Wireframes can be used in a definite sequence of screens to show how a particular task can be performed. They emphasize how easy and intuitive a product will be.
All elements in wireframes are usually displayed and arranged to introduce the following:
- Structure. The availability of all necessary elements and the way they are put together.
- Hierarchy. Displaying blocks in the current location, size, and their proportionality.
- Functionality. Demonstration of the cross-work of website elements.
- Behavior. The interaction of all blocks with users.
- Content. Displaying maximally realistic content on pages makes it possible to predict the size of blocks, and position them more accurately.
- Breakpoints. Breakpoints for responsive design are getting more and more frequent at this stage. These are information split points and display options on different devices: desktops, tablets and mobile phones.
Wire frame prototyping
Clients should understand how their website will work. Prototyping can be extremely useful in this situation. Prototypes make it easier to describe the performance of a website. They allow all interested parties to focus on features and user interactivity only.
The prototype is a more detailed interactive representation of a final product, based on wireframes. Prototyping allows reviewing a project before spending time and money on technical development.
And then finally design is get converted into a webpage by using HTML5 and CSS3, CSS5, JScript, Animations.