The landing page of the website draft will look like this: I will step through the creation process without providing too much detail. To show you the basic workflow of wireframing in Inkscape I will create a mockup for a very simple website that includes main navigation, a logo and some content elements. And the best is, you can manipulate the SVG DOM using JavaScript. You can even link multiple SVG documents using hyperlinks just the same way you do with websites. Moreover, it uses SVG as its image format, a W3C standard that can be displayed by any modern browser. You can draw practically anything you want since it is a full-blown vector graphics editor that can easily keep up with commercial tools like Adobe Illustrator.
One great thing about Inkscape is its flexibility. We will be creating the wireframes using Inkscape, a free and open source SVG editor available for Windows, Linux and OSX. It’s about laying out the basic parts like navigation, orientation, functional or content elements and deciding on how those parts should work together as a whole.
Most aspects of the visual appearance of your app/website like color palettes, icon design, typography or imagery do not matter at this stage of conceptualization.
It also gives you a feeling for what the building blocks of the UI are and provides a common basis when discussing with customers and colleagues.Īt this point of the project it’s not about going deep into detail but to stake out the broad outlines of the user interface. Creating a mockup of an application’s user interface encourages thinking about how people will eventually interact with your application. Sometimes people concentrate on the desired features of an application but neglect the presentation of those features to users. They allow for creating a simple prototype at a very early stage of development (actually before development kicks in). In this post I will show you how to create interactive wireframes the open source way using Inkscape and JavaScript. Wireframes are blueprints of how a website or other UIs of graphical applications will look.
0 kommentar(er)
