Use Of Web Framework When Building A Website

Design of the frame is a very important step in the design of the site. The first framework allows us to define a hierarchy of information, because it will be easier to plan the layout so that the user immediately drew attention to the information you need. If you still do not use frames, it's time to learn.


Frame - this is an architectural project, you should see all the two-dimensional black and white before starting to build houses. Similarly, for the design, you can not start to build layers of pixels in Photoshop, not knowing what the structure of the project.

Frameworks are important because they allow the developer to plan the location and interaction of elements of the interface, without the distraction of color, font selection, etc. If the user can not understand nachnachenie elements on black-and-white frame, it does not matter what color you eventually want to use.

As the foundation of the building, it must be fundamentally strong, before deciding whether to paint his way with paint.
Step 1: Inspiration

Before we dive into the details, check out the site I ♥ wirefames . Here you can get a visual idea of how other designers create wireframes for the site.



You can also use a great app Wirify , which will allow you to see the framed version of any site.




If you are constantly watching the work of other designers, or look at the skeletons of other sites, you will gradually realize the appointment of frames and how they help organize the information on the screen.
Step 2: Planning Process

Designers approach the creation of a skeleton site in different ways. You have to choose the most convenient way. Some people are very well-painted designs and prefer not to use any tools other than a pencil and notepad to create a framework. Other designers think through the frames until the details,someone creates their own skeletons, one uses the special services and tools for this purpose.
Step 3: Select the tool

Axure - one of the first professional tool for creating frames sites. Until recently it was only available for Windows.



Frameworks Balsamiq resemble sketches, so we see immediately that frames are not a finished product.Balsamiq has a huge library of reusable components that can be dragged and use them to easily create their own frames.



Pencil Project



Moqups - an amazing application for creating wireframes. Currently the project is under construction




Sketchy Illustrator wireframes - ready-made designs to create a skeleton site




Evernote - a set of frames for the site in a format psd / is dark and light version of the




Webpage Wireframe Stencil - a set of elements to create a site in frames format. ai and. eps






Adobe CS

For those already familiar with Photoshop, Fireworks, Illustrator and Indesign will not be difficult to establish a framework for the very site. All these programs have their strengths and weaknesses.

Many designers prefer to use for this purpose is Illustrator, since it allows you to export files in the PSD with editable layers, as well as to easily transform and move objects.
Step 4: Using the grid

* The fact that such a network and what they eat can read in this article

To show how you can manually create a skeleton site, we will use Illustrator, but you can choose any other tools that are now the main thing - to understand the technique of creation.

First, set the size of the document.



Place the downloaded template mesh to the document.




Tip:

There are many patterns of nets that are available for download, but if you're interested in is to customize the settings and create an adaptive pattern, use responsify.it .
Step 5: Determination of blocks

Start by drawing a grid of blocks. Think about the information that you would like to present to its visitors, what should emphasize. Below is an example of a skeleton, which is widely used for software sites:



Sometimes, depending on the purpose and destination site that you develop, you can add more creative ideas in their work, but do not forget to save the information in the memory hierarchy. Here is an example of an unusual site for a technological framework of the company:



And here is a layout for your blog with advertising conveniently located containers and special instructions for the client:




Step 6: Determine the hierarchy of information and typography

Once you have placed containers, start slowly adding content to better structure the information. Usually the same: The information that you want to convey to the audience must be clear, even in black and white frame.

Using different font sizes in the beginning - a great way to distinguish between different levels of information.



Do not be afraid to experiment at this stage. Maybe when you're working on the framework in more detail, you will understand what its shortcomings.

Below you can see that added to the frame of the black boxes with definitions: this is done in order to show how the visual field have some value for the site:




Step 7: Drill using the grayscale

Using the full range of gray shades can help you determine the visual effect of your items without the aid of the color palette and can help you create designs in the future.




Step 8: Black and White layout

This step is optional, but you can try it. Add more details to your frame. At this point you can choose the font family and to determine their ideal size.




Step 9: Transfer of black and white frame in the layout of the site

As mentioned earlier, the reason why many people prefer to use Illustrator to create frameworks that can export files in the PSD with editable layers:





Export and start working on the layout. Here is a sample implementation of this site :
Conclusion

We hope that this article has inspired you to start experimenting! The main thing - do not be afraid to make mistakes until you find your ideal way to create frames.

Please do not hesitate to ask any questions in the comments, thank you for your attention!

According to the materials webdesign.tutsplus