How to create a website for your business in just 10 min

Share Button

Create your new business website fast and easy! Go to Ninjamock.com and claim your Free or Pro Account to follow the tutorial on how to create a website for your business in just 10 min. In case you wish to download and reuse this project for your own website, it is available from our Gallery. It is fun and easy and you do not have to be very technical skilled. Follow a long and you will be proud of your result!

 

how_to_create_a_website_for_your_business  how_to_create_a_website_for_your_business_2

 

 

 

 

 

 

 

 

 

What is a wireframe?

A wireframe is a drawing of how you want, in this case, your business website to look and how users are supposed to click through it. You use a wireframe for yourself to get clear about where you want text, images, navigation etc. to be positioned on your page. You also use it to get clear about the user flow of your website. How are your customers supposed to navigate through your website? This means that you will gain an overview of all the pages that will make up your finished website.

 

Why should I  bother to create a wireframe drawing?

Creating a wireframe, like we do in this tutorial, allows you to get very specific about how you want the design of your business webpage. This forces you to think about the user experience early in the process. But why not just go to a designer or programmer to begin with and let them figure it out, you may think? Well Whether you contact a designer or programmer physically or online, they will need some sort of specification from you. They will need to know what you want. And if you are too abstract and do not know exactly yourself what it is that you want, the process is going to be a lot more expensive, than if you had a finished wireframe that you could just hand over. In the later case, this would make it possible for a designer and programmer to give you a price up front and you would be able to choose the best offer presented. With this method you will avoid surprises both in terms of the finished product and the price. Changing a website that is already coded is a lot more time consuming hence expensive, than changing a wireframe drawing. Should the designer or programmer have any comments on your wireframe, you can easily edit it together. Trough NinjaMock you can invite them to edit your website project. This means that you can discuss and agree on what is going to be created, before starting. Getting the functionality and the user flow of your business website right the first time, will make the process pleasant for all parties involved. It will save you time and money and you make sure that you get the business website that you want. So let’s get started and show you how to create a website for you business in no time!

 

How to create a website for your business in just 10 min (1)

In this first part of the 3 step tutorial we will show you the business website that we are going to create. And we will show how to create the front page of our website. Follow along and you will have your own website in no time!

 

How to create a website for your business in just 10 min (2)

Continuing where we left of in part 1, we will create our service or product page. Hang in there you are almost at the finish line!

How to create a website for your business in just 10 min (3)

Finally we will create our “about us” page and link all our pages together to a finished wireframe.

Congratulations. You now have a finished website wireframe!

You are as close to the real thing as one can be. You now know exactly what you want your website to look like and how it should be linked together. This gives you the opportunity to make a good deal with a programmer and designer, as your wireframe works as a blueprint for what they need to create. This means that your website will be up running in no time!

 

If you want to start a business, These post may also be of interest to you: Use wireframing to go from idea to business fast. and Imagination and action – The magic ingredients in entrepreneurship

 

Start designing your business website!

how_to_create_a_website_for_your_business

 

Happy Creating

The NinjaMock Team

Share Button

How to create a shopping app in just 10 min!

Share Button

Follow this 3 step tutorial on how to create a shopping app and you will have a finished app in no time!

how_to_create_a_shopping_app_1

 

The fastest process of creating an app is to:1) create a wireframe for your shopping app. A wireframe is a drawing of how you want your shopping app to look in terms of images, text, navigation etc. It also shows how you want users to navigate through different pages of your app. This is what we are producing in this 3 step tutorial. 2) The next step for you is to take this wireframe to a web designer and programmer. Having your wireframe gives them a very clear understanding of the end product that you want. This clarity makes their job easier by saving them time. For you time saved on programming and design saves you money. It is a win-win situation. You can find web designers for logo and web layout on platforms such as 99designs.com and programmers on platforms such as freelancer.com, toptal.com or gigster.com. 3) Enjoy your new shopping app!

To follow along the tutorial, create your own NinjaMock account and start designing! We offer both FREE and PRO accounts depending on your needs. It is fast an easy. If you just want to use this shopping app project as your template and add additional pages to make it fit your business. Go to our Gallery page, download and import the project to your own account.

 

How to create a shopping app in 10 min. (1)

In the first part of the “how to create a shopping app”, we are showing you all the pages that makes up the finished app. After this we are going to create the pages step by step. Follow along in your own pace and you will soon have your shopping app.

 

How to create a shopping app in 10 min. (2)

In the second part of the tutorial we are continuing where we left. We are creating additional app pages. Hang in, your are almost there!

 

How to create a shopping app in 10 min. (3)

In the final and last part of the tutorial we are creating our final pages. Finally. We are showing you have to link all the pages together and you will have a finished shopping app wireframe. Congratulations!

 

Congratulations on your Shopping App wireframe!

You are now as close to a finished shopping app as anyone can be. You can now export it as a PDF and upload it on one of the platforms mentioned earlier, along with your design wishes. You can also give your selected web designer and programmer access to your project directly in NinjaMock via a link. Moreover, It is possible to export a project as a HTML coding file, which may make the job easier for your programmer to save even more time.

Using a wireframe tool like NinjaMock ensures that you become clear about how your shopping app should look like and how users should be able to navigate through it. It gives you the best conditions for making a good deal and saves you time and money during the next state of developing the shopping app. For inspiration about wireframes in relation to starting a company, you may also read the article Dreamers who Do.

 

Start designing your shopping app today!

how_to_create_a_shopping_app.jpeg

Happy creating,

The Ninjamock Team

 

Share Button

Using wireframing to cut costs and improve processes

Share Button

This is a surprisingly contentious debate, and an important one that determines where the development budget gets spent. Nonetheless, let’s take a few moments to make sure we’re all on the same page before we get into the ‘meat’ of it.

What is wireframing?

A wireframe is a sketch or visual depiction of what a web page or mobile app will look like. They are sometimes called ‘screen blueprints’ or ‘page schematics’ as well. They are used to establish the core elements of a web page’s visual design and functionality – to set down what it will look like and what it will do. It can then be passed on to the designers, developers, copy writers, customers and anyone else involved in the project.

Wireframing, then, is the process of building your wireframe. It means establishing the core functions of your website, the way these functions will be displayed, and the basics of how the user will interact with the site in general. It is (or rather it can be) the first step in virtually all the core processes of website design – visual design, UE, SEO and even organising the actual text.

What does wireframing achieve?

At its core, the process of wireframing is about saving time, effort and expense.

As they say, a picture is worth 1000 words. What wireframes really achieve is getting all of your creative and business stakeholders ‘on the same page’ at the very beginning of a project.

Whether this is achieved by getting them all together to produce the initial wireframe (preferable) or simply having a meeting where they are presented with a completed wireframe before they begin thinking about the project in detail (still quite useful), the process can virtually eliminate the wasted effort that results when your ‘UE guy’ starts working on something inherently incompatible with the template your web designer is producing, and neither of their concepts support the text your marketing team wrote.

It is always worth a small investment of time and effort to get everyone in the same room and brainstorming together, even if you can only spare a few hours. Then they are all actually working on the same project, rather than 4 different, incompatible visions.

When is the right time to wireframe?

Simply put, the sooner the better. Every project should start with a low resolution wire frame, even if it is drawn on the proverbial ‘back of a serviette’. As soon as you get the idea for an app, web page or just about anything else that is both visual and interactive, you need to start wireframing. It will not only help to ‘ground’ your ideas in practical, visual terms, it will establish a core idea which all other work can be made in accordance with, or which can be changed to fit necessity in a way that all the other stakeholders can quickly be made aware of.


When is the right time to stop wireframing?

Here there are 2 schools of thought. Some processes stop wireframing as soon as the coders or UE specialists start producing prototypes and mock-ups. Others keep making updated wireframes to distribute to the rest of the team all the way up until the site or app is coded and put to bed. In either case, keep using wireframes until the issues they represent are decided and finalised.

Who needs to have access to (and input on) these wireframes?

Just about everyone on your project!

Access to the latest wireframe is vital to anyone working on the project, so they can avoid wasting time on features that won’t work, or won’t work the way they had envisioned.

As to the ability to modify wireframes, if you have very large teams, you might do better to only give specific team leaders the ability to alter wireframes or generate new versions. Even then, consider having all modification be made in a meeting with all available stakeholders, so as not to ruin the work of an entire team by making changes they were not aware of.

The more the individuals or teams involved in different aspects of your project actively collaborate, the more efficient your project will become. The more you test, review feedback and make iterations as a group, the better the final product.


How do wireframes impact your process?

Wireframes serve to focus all of your efforts on the same deliverables. They let you test different approaches rapidly, and generate nearly immediate feedback. In the end, the time and effort you invest in wireframing will be repaid several times, especially on larger or more involved projects.

What could skipping wireframes entirely cost you?

The short answer is, as always, ‘that depends on what you are working on’. Realistically, though, we’ve been in the business long enough to give you a real answer, based on averaging the various projects we’ve been involved with over the years.

Wireframing is typically 5-6% of your total development budget. However, it enhances the effectiveness of almost every other aspect of your work. For example: On average the final costs for coding are 60% less for well wireframed projects. RFC (Request For Change) costs typically drop by 80%.

What that means for you is that even if it were to cost 3-4 TIMES what it really does to wireframe, you’d be saving time and money by doing it.

Making the most of a limited wireframe budget

There are a few tips and tricks we can present for doing good wireframing, even if the bean-counters don’t appreciate its real importance:

  • Choose a wireframe tool that is easy to use, or one that you already know how to use well. This will save you time getting up to speed.
  • Create multiple variations, especially early on. This will let you eliminate unworkable arrangements quickly.
  • Get key stakeholders involved early, and incorporate their feedback into new versions.
  • Conduct user testing to determine if your wireframe will be usable by your intended audience or market.
  • Generate new iterations for the wireframe until all key stakeholders are satisfied (or resigned to compromise).
  • Make sure you won’t have to go ‘back to the drawing board’ after design or coding has started.

 

Share Button

NinjaMock. Most interesting features

Share Button

 

In this article we describe the most interesting features and what makes NinjaMock better than other applications for wireframing and prototyping.

Click picture to view video

Full free version

We all love free apps, especially if they are good free apps 😉 So we decided to make NinjaMock free for non-commercial use, forever. This distinguishes us positively compared to competitors who limit their free versions or only supply time limited trials. We decided not to impose any restrictions on the functionality of our editor. The free version is available for all: an unlimited number of pages in the projects, export to PDF, HTML and PNG, support comments, use master pages, full real time collaboration, etc.

We can afford the luxury for two reasons. Firstly, we don’t have an investor and therefore we have the freedom to decide what to do. Secondly, thanks to a competent approach of building applications that support our infrastructure, our project costs are low.

Paper style

Paper style

We believe that efficient prototyping must be done as wireframes.  It’s inefficient to begin prototyping with realistic elements and high-fidelity design. Having years of design and development experience, we’ve handcrafted the most optimal and efficient prototyping process for you.

We master the intricacies of the process – from sketchy prototyping to the final design. As a result, we have reached a zen-perfection in creating to-the-point “paper” prototypes.

Elements

We support the following platforms:

Wireframe platforms

Custom controls used in the creation of prototypes are done as vectors, but this is not a surprise these days. But there is an interesting feature: All items are made in NinjaMock. We provide basic vector tools needed when prototyping, such as a rectangle, ellipse, line, polygon, polyline, Bezier curves, and a pencil to draw by hand.

What this means for you is that if you are missing an item or icons, you can easily draw it yourself.

 

Click picture to view video

 

Change zoom

We have implemented a unique technology for rendering using HTML5 canvas, which allows us to make fully functional zoom.

Real time collaboration

Collaboration is natural when you work with wireframes. And this has always been a part of NinjaMock. Now we have upgraded this feature so you can share the canvas and in real time add, change and review your project in your group.

So invite people to you project and get rid of emails, screenshots and a lot of waiting. As you see, collaboration in real time is made Ninja easy. You will benefit by completing your work even faster.

Comments

Google Docs has, in particular, a great function – Comment. Therefore, when developing similar functionality in NinjaMock, we learned by example from Google Docs. As a result, we now have an intuitive and familiar way of commenting in all prototypes – with support to responses of comments, comments status changes, as well as e-mail notifications.

Additionally, we added the ability to attach status of individual pages in your project (In progress, Completed, Approved). This allows you to easily determine how close to completion your design is.

Wireframes

And on the project overview page you can see the status of each of your projects:

Mockup overview

Sharing

In NinjaMock you can send your prototype to your client (or somebody else) to get review and feedback. You only need to open access of you the project (by clicking on the share) and send a link. And then we went a little further, with the generated QR-code, you can run the prototype application directly on your device and see how it will work.

Share your mockup
Scan the QR code – it’s real 😉

The important point is that you can choose status, and which pages that will be available for viewing. For example, you can send only completed, but yet approved pages.

Exports and navigation on paper

We noticed that many design teams had their office walls covered with printed pages and prototypes of the final design. Some teams use them for inspiration, and some discuss and write notes directly on the wall.

Real life wireframing

NinjaMock have the ability to export to PDF and PNG, with the ability to print the comments and links on the page. We call it “paper navigation” including a footnote, with the page number on which the link leads to:

 

Grouping wireframes

Organization of pages and projects

In complex projects, there is a need for streamlining pages – for example, group them logically (registration page, edit the profile page of the village, etc.), or simply to display a set of states of a page (the normal state, the same page, second stage with a dialogue dialog box, etc.).

Many of our competitors allow you to create a page tree. We talked with many designers and few were able to explain what it meant when one page is a subsidiary of another – everyone understands it differently. Instead, we decided to use a familiar experience of using PowerPoint, showing thumbnails of pages for faster and easier navigation.

You can logically organize your project by creating groups of pages. You can can create an unlimited number of groups.

Rearranging mockups

For projects in NinjaMock we reproduced the experience of working with files on your computer: Projects can be grouped into folders, folders can be dragged to other folders, etc. It is your own file system in the cloud!

Team

NinjaMock has a built team management for organizations. Administrators can add and delete users, and assign them different roles and rights. You can choose one of three roles (Administrator, Designer, Reviewer). As an administrator, you have full control of your projects. They are stored and maintained with the company account and so you never again have to fear losing your projects.

This is just a small list of what can NinjaMock. If you want to know more of the application – go to the site and start prototyping www.ninjamock.com!

Tells us what you think

What do you think of NinjaMock? Leave us a comment, or email us at ninjas@ninjamock.com

Share Button