Let’s clear up some common misconceptions first. Some designers, and even their clients, have a tendency to use wireframe, mockup, and prototype, interchangeably. It’s true that all three represent a conceptual or early stage representation of a design. Yet, the three are not the same thing and serve somewhat different purposes.

• A wireframe is a low-fidelity depiction of a design. It generally lacks detail, it is static, and while it may depict shape, it does not have substance.
• A mockup can provide a great deal of information about a design. It is generally a medium to high-fidelity depiction, but like a wireframe, it is also static.
• A prototype is a dynamic, mid-to-high fidelity representation of a design. It can be used to highlight certain features of a design. Some prototypes can be virtually indistinguishable, in terms of look and feel, from the proposed end product.

But they do have several things in common. They can be used to show a design’s current or proposed state. And they are generally used for requesting feedback. Prototypes don’t have to be attractive, but they must work well enough to show key design principles or features.

This can be readily accomplished by selecting the best tools for the job. You will find those tools below.

Figma

Figma is a browser-based application that gives you a wide array of tools for designing, wireframing, prototyping, and generating the code you need to get your web or mobile app design live quickly. It has excellent collaboration functionality, making it perfect for larger design teams that need right-up-until-the-moment updates.

After the recent Adobe purchase, nobody knows how Figma will be integrated into their suite of powerful tools. Nor if they’re planning on making any pricing or functionality changes. But what we know is that Figma is far and away the most popular tool on this page and that it gives you everything you could possibly need as a designer. Figma can truly do it all.

If you’re looking for Figma resources, you should take a look at our collection of free templates.

Adobe XD

Adobe XD is the perfect application for quickly creating animated prototypes, designing responsive web layouts, or building complex mobile applications. As well as having useful tools like repeat grid, voice design, and supporting multi-file formats (PSD, AI, AE, and more, it also allows you to install custom plugins giving you even more powerful features.

After Adobe purchased Figma in September this year, the future of Adobe XD is currently not clear. Despite that, Adobe XD may still be worth your time, it may be for you.

You should also take a look at our collections of Adobe XD tutorials and free Adobe XD templates.

Proto.io

If you have been searching for a mobile app prototyping tool that will enable you to build a mockup that feels real, make Proto.io your tool of choice. You can create richly-featured, interactive mockups in minutes without introducing a single line of code.

This tool allows you to test your mockup on any of the more popular mobile devices. Of even greater importance, you can faithfully emulate the gestures and transitions common to those devices that are so greatly appreciated by their users.

Pidoco

Its ease of use is one of the reasons behind Pidoco’s large user base, but this tool is primarily noted for its ability to support the type of collaborative environment that can make a difference.

Team members and other stakeholders can comment on prototypes and work together in real-time. They can edit a mockup based on ideas and feedback, knowing that Pidoco keeps a version history.

InVision

InVision just might be the most powerful prototyping, collaboration, and workflow platform on the market. An outstanding tool for small teams or individual designers who only need to collaborate with a client. InVision really shines when it comes to enabling smooth, quick collaboration for widely-dispersed teams.

InVision also maintains a version history of past iterations. No coding is needed to use this tool to its fullest capability. And as far as the quality’s concerned, the mockups can speak for themselves.

Marvelapp

Marvel is fast and easy. All you have to do is connect to your Dropbox account, create an interactive prototype in minutes with Marvel, and use Dropbox Paper syncing to iterate and update your design without lifting a finger.

You can quickly and easily share your ideas and test your designs with others through your Dropbox account. Creating and sharing interactive prototypes doesn’t get much easier than this.

UXPin

UXPin enables your team to create better and faster development-ready designs. This UI/UX tool is ideal for small-to-medium design teams, while its Design Systems solution addresses the needs of mid-to-large teams and organizations.

With UXPin, you can create interactive prototypes at any fidelity level you need, from design concept sharing to user testing. This design and prototyping platform will fully support your team collaboration activities as well.

HotGloo

Whether you are a project manager, or web or UX designer – HotGloo makes collaboration easy and project coordination a snap. Prototype ideas fast and easily, comment on your work, and let others comment – all in real-time. Export your work or test it on a mobile device.

Whether you are prototyping on your own or are part of a creative team, this is an excellent tool to work with.

Notism

Notism is a prototyping and collaboration tool whose true strength lies in its unique collaboration capabilities. Notism makes sharing your design efforts with team members remarkably easy, allowing you to streamline the design process from start to finish.

You can share notes, sketches, and images, annotate them on the fly, and do it all on video, a powerful feature that sets Notism apart as a useful and valuable UI and UX tool.

Overflow

With Overflow, designers can design, present, share and print their user flows to get valuable feedback, all in one place.

As a powerful cross-platform tool that integrates seamlessly with the most popular design tools, Overflow helps designers quickly turn their designs into playable user flow diagrams.

PowerMockup

PowerMockup is the ideal selection for the PowerPoint user. If you are such a user, your search may be over, as this feature-filled prototyping tool should meet your needs.

Since PowerMockup is a Microsoft PowerPoint addon, you can combine its features with all of the benefits PowerPoint offers, including templates.

Firefly

Inadequate project management can hurt a developer’s ability to deliver a quality product on time and within budget. Firefly can be exactly the UX and project management tool you need to keep your project on track, especially when you are engaged in rapid prototyping.

You can upload everything from app designs and UI ideas to entire web pages for review and annotation, and you can fully depend on this tool’s version control capability to effectively manage multiple design versions.

The above tools are characterized by their strong collaborative and project management capabilities, and the ability to produce mockups that closely resemble the real thing.

Several have all of the above features, while some are more specialized in their uses. If you want to add one of the best prototyping tools in the market to your design tool kit, you will find it here.

The post The 10 Best Wireframing & Prototyping Tools for UI & UX Design appeared first on Speckyboy Design Magazine.

Whether you use a whiteboard, pencil and paper, web-based tools, or UI design applications, effective wireframing and planning play a crucial role in the success of your product.

In addition to the many readily available wireframing tools, there are free wireframing templates available for UI applications like Photoshop, Illustrator, Figma, and Sketch.

We’ve curated a collection of free wireframing templates to make your job easier. These templates are customizable to fit your specific project requirements, allowing you to streamline the wireframing process and focus on defining the layout and functionality of your mobile app or web design project.

Web Design Wireframe Kits

These free web design wireframe kits can be used to plan a website’s layout, visualize the content structure, test website functionality, collaborate with team members, and save time during the design process.

Multi-Purpose Mobile UI Kit

These multi-purpose mobile UI kits can be used to quickly create mockups and prototypes, ensure design consistency, customize design elements, improve collaboration, and save time in the design process.

iOS & iPhone Wireframe Kits

These free iOS wireframe kits can be used to plan your mobile app’s layout, visualize content structure, test functionality, collaborate with team members, and, of course, save time in the build process.

Android & Material Wireframe Kits

These free wireframe templates and kits have been specifically designed for Android and the Material Design aesthetic. You can use them to ensure design consistency and test design elements.

UX Design Templates

These free UX templates and kits can provide a framework for creating user experiences, and they can be used to plan user flows and create prototypes.

Conclusion

Wireframing is an essential step in UI design, and these free wireframing templates can be a helpful resource for designers looking to streamline the design process and create effective and successful UI designs.

More Free UI Resources

The post 50+ Free Wireframe Templates for Mobile, Web & UX Design appeared first on Speckyboy Design Magazine.

Fortunately, there are some helpful tools available for responsive design, including the most basic and essential ones: pencil and paper. Specifically, sketchsheets for responsive web design can be incredibly useful.

We have compiled a collection of printable wireframing templates that you might find helpful when sketching your designs. These templates will provide a starting point and help you create a visually appealing and responsive website.

Sneakpeekit Responsive Sketchsheets

If you’re a logo designer, font creator, or web designer, you’ll find that Sneakpeekit offers an excellent free solution for all your sketchsheet needs. Their platform provides a variety of mockup templates to assist you in designing responsive websites.

Additionally, they offer grids that align with some of the most widely used grid systems and frameworks, including Bootstrap.

Responsive Web Design Sketchsheets by Jeremy Palford

Jeremy Palford offers sketchsheets for various device sizes, allowing you to create responsive designs that look great on any screen.

Whether you are an experienced UI designer or starting out, these responsive web design sketchsheets will help you create polished and effective websites.

Responsive Sketchsheets by ZURB

This versatile set of free sketchsheets provides both responsive and regular sheets, giving you the flexibility to choose the format that works for your design needs. If you’re designing for mobile devices, you can download the responsive sketchsheets and get started right away. Alternatively, the regular sheets are a perfect fit if you’re designing for desktop devices.

Moreover, these sketchsheets are not limited to standard design layouts. You can also use them to design off-canvas content, making them a versatile tool for any web designer.

Responsive Sketch Pad

The Responsive Sketch Pad is invaluable for generating cross-platform application ideas and visualizing design prototypes across multiple devices. Whether designing for desktop, tablet, or mobile, this sketch pad can help you create designs that look great on any screen size.

With its support for multiple device sizes, you can create designs that are optimized for each platform, ensuring that your application looks and performs its best no matter where it’s used.

Paper & Pencil

Sometimes the simplest tools are the most effective. If you’re looking for a straightforward way to sketch responsive designs, all you need is an A4 sheet of paper and some pencils. This humble tool is probably sitting right next to your computer screen, waiting to be used.

With just a pen or pencil, you can create sketches that show how your design will adapt to different screen device orientations and sizes. And since A4 paper is a standard size, you can easily print and share your sketches with your team or clients.

While there are many more complex tools available for responsive sketching, sometimes going back to basics is the best way to approach a problem. So next time you need to sketch a responsive design, grab an A4 sheet of paper and get to work!

The post 5 Printable Templates for Sketching Responsive Layouts appeared first on Speckyboy Design Magazine.

While many methods exist for creating a sitemap, we’re not focusing on that today. Instead, we’re exploring sitemaps that have been thoughtfully designed with beautiful aesthetics in mind. These sitemaps are not only functional, but they are visually appealing and showcase the importance of design in all aspects of web development.

So whether you’re looking for inspiration or just appreciate a beautifully crafted design, these examples of carefully designed sitemaps are sure to impress.

Mobile App Userflow

Designed by Hale Koksal

UX Workflow – Wireframe & Sitemap Creator

Fireart Studio Mobile Flowchart

Designed by Den Klenkov

UX Workflow Document Templates

Newscred Sitemap

Designed by Ed Moss

Skeleton Wireframing Kit

Yash Technology Sitemap

Designed by Aditya Ranade

Job Seeker User Flow

Designed by Sonali Banerji

Focus Lab User Flow

Designed by Bill Kenney

Cosmic User Flow

Designed by Eric Ressler

Sitemap For Student Guide

Designed by Janna Hagan

Crown & Mane Simplified Checkout Process

Designed by Michael Pons

Web App Information Architecture

Designed by Carine Teyrouz

Site Flow

Designed by Angie Herrera

Scase Userflow UX

Designed by Adam Kalin

Mobile Lo-Fi UX Wireframes

Designed by Michal Kulesza

User Flow

Designed by Mackenzie Child

IntelliMap Sitemap

Designed by John Menard

Website Flowchart

Designed by Eric Miller

Website Flowcharts Stencil

Designed by Eric Miller

Sitemap / Flowchart for the Web

Designed by Jane Zhu

Crown & Mane Application User Journey

Designed by Michael Pons

If you’re looking for wireframe templates, take a look at this article.

More Web Design Inspiration

The post 25 Beautifully Designed Sitemaps & User Flow Maps for Inspiration appeared first on Speckyboy Design Magazine.

That’s why we’re excited to offer you this fantastic free toolkit, containing everything you need to get started with wireframing. With this collection of wireframing tools, you can quickly and easily create mockups, sitemaps, UX flow charts, and maps for both web and mobile design.

The toolkit includes 21 mini web layout templates that cover almost all aspects and niches of web design, including eight mobile layout templates and three wireframing templates. All the files come in AI format, which can be edited and customized to fit your specific needs in Illustrator.

These templates have been created by VectorOpenStock.com and are free to use in both personal and commercial projects.

The Free Wireframe & Layouts Kit Preview

The Free Wireframe & Layouts Kit Download

Download The Free Wireframe & Layouts Kit

More Free UI Kits

• 50 Free Wireframe Kits
• 50 Free Web UI Kits
• 50 Free Mobile UI Kits
• 15 Free UI Kits for Bootstrap
• 20 Free UI Kits for Adobe XD
• 30 Free Material Design UI Kits
• 40 Free Figma Templates
• 20 Free UI Kits for Sketch
• Open Source Web UI Kits
• 50 Free HTML Web Templates

The post Free Web & Mobile Wireframe & Layout Kit (Illustrator AI) appeared first on Speckyboy Design Magazine.

Its popularity has soared in recent years. As a result, numerous resources that cater specifically to Sketch users have become available, which helps make the UI design process faster and more efficient.

This collection features some of the best free mobile UIs and wireframe kits available for Sketch App. They can be used as a starting point for your next mobile UI designs or as inspiration to fuel your creativity.

Mobile UI Kits for Sketch App

H1 Free Mobile UI Kit

The H1 Free Mobile UI Kit comes with an impressive number of elements that are sure to get your creative juices flowing. You’ll find 470 different elements spread out over 130 templates. You can use this kit for both Android and iOS devices.

Chameleon UI Kit

This fresh and stylish mobile UI kit includes more than 120 unique screens. The kit can be used with both Photoshop and Sketch and also comes with 15 unique themes, 70 icons, and hundreds of neatly organized components.

Fusion Free UI Kit for Sketch

The next kit on the list is a perfect choice for designing a shopping app. This template comes with 13 screens with layered and neatly organized elements that are easy to edit. Photoshop and Sketch formats are available.

Free Mobile eCommerce UI Kit for Sketch

Try this Mobile eCommerce UI kit if you need an elegant design for a shopping app or a mobile store. You’ll find eight different app pages and a web page to accompany the mobile app design.

Profile Mobile UI Collection

The Profile Mobile UI Collection is a set of 15 mobile screens that are fully customizable, well-organized, and designed with iOS devices in mind. The standout feature of this template collection is the flat design style.

Rodman Mobile UI Kit

Rodman is a gorgeous mobile UI Kit with a clean and light design. It comes with 80+ layouts in 7 categories and can be used to design any type of app.

Free Material UI Kit for Sketch

If you love Material Design, don’t miss this Material UI kit. Packed with various screens and icons, you’ll be able to knock out a mobile app design in no time with this kit.

Zoomie – Social Media Mobile App for Sketch

The Zoomie kit is another excellent choice if you’re working on a social media app design. This kit contains a grand total of 15 screens and features a modern design.

Music Mobile App Kit

This kit is the perfect starting point for mobile music-related apps. It comes with 30+ carefully designed mobile screens that will help you to prototype, design, and build any music-related app.

Relate – Clean & Simple UI Kit for Mobile

The Relate kit features a modern and minimal design with 45 unique templates, 19 categories, and more than 99 various elements. The template follows the material design best practices, so don’t miss it if you love material design.

Crypto Wallet Mobile App Concept Template

Consider this Crypto Wallet Mobile App template if you need to design a mobile wallet app. The template contains neatly organized files for the dashboard, the trading screen, and the currency trend.

Messagly Free UI Kit for Sketch

This UI kit is a perfect choice for a social messaging app. The template comes with 13 screens and dozens of unique elements to help you get started with your design.

Harmony Free UI Kit for Sketch

This UI kit was designed with a hiking app in mind. It features a clean and fresh design with over 10 iOS ready core screens designed in vector and based on symbols.

Mobile Wireframe Kits for Sketch App

Material Design Wireframe Kit v_02 for Sketch

This collection is perfect for any lover of Material Design. It contains an impressive number of more than 40 screens and the designers keep adding to it so don’t miss this one.

iPhone Wireframe Template for Sketch

If you need to design an iPhone app, this wireframe template is an excellent choice. The kit comes with everything you need for an app design, including screens, buttons, headers, alerts, input fields, and more.

Finished!

With so many fantastic Sketch UI kits and wireframes, you can quickly prototype and design any type of app. Use the kits in this collection as your starting point or simply as an inspiration for your next design project.

More Free UI Resources

• Free Figma UI Kits
• Free Mobile UI Kits
• Free Web UI Kits
• Free Adobe XD UI Kits
• Free Icon Fonts
• Free UI Icon Sets
• Open Source Web UI Kits
• Free HTML Web Templates
• Free Bootstrap UI Kits
• Free Bootstrap Themes
• Free Bootstrap Admin Themes
• Free Figma Dashboard Templates

The post 15+ Free Mobile UI & Wireframe Kits for Sketch App appeared first on Speckyboy Design Magazine.

This can be anything as simple as writing down words with arrows and create a visual workflow, to creating a series of thumbnails or storyboards to show the progression of an idea. When relating this to web design, developers will often use a method known as wireframing.

If you don’t know what a wireframe is, it’s basically a generalized mockup representing the layout of a website. There are some wireframe templates here. There are no definitive rules for this process, and that is why it is so effective and adaptable.

Some people will make quick paper sketches of simple shapes and scribbles for text to show elements and their general orientation to each other. Others prefer to create digital wireframes that can be more precise and contain more detail. As long as it succeeds in creating a foundation for your mind to flow off of and reference quickly, it’s doing its job.

There is a bit of a debate on whether wireframing is worth your time or not. As you have likely gathered from my previous statements, I find wireframing to be very much worth the time. That being said, there are a few things that should be considered and taken into account that make wireframing worth the effort.

Don’t be clingy, keep an opened mind

Some designers dislike wireframing because they feel it limits creativity and creates boundaries. You may put a lot of heart, thought, and time into the initial wireframe and don’t want your time to be wasted, and thus push the final design in a direction that works with your original concept.

To avoid this passive mental crutch, you need to create a separation between wireframe and final design. Know the wireframe is a nothing more than a reference point, and if you come up with a design that better suits the user experience, or will in anyway alter the site for the better, don’t be resistant to change. Your best idea is seldom your first.

Gauge your time

The overall purpose of a wireframe is to save time in the long run. There is nothing more frustrating than being happy with a final design, and then finding out you forgot to account for an extra set of text or a specific call to action. You then have to push things around, or redesign elements to accommodate. This is your chance to give yourself a visual checklist that minimizes that additional time wasted.

The question must then be asked, how much time is acceptable to spend on this mockup phase? Well, this changes depending on your situation and preference. If you are making a site for a client and have a very small time budget, you probably don’t want to spend more than 10-15 minutes so you have more time allotted to the more detailed art and design.

If you have more of a flexible timeframe or it is a personal project, it may be beneficial to flesh out your ideas a little more and even mockup multiple wireframes. Overall, this is something you will have to weigh for yourself on a case by case basis and find what suits your best interests.

Find your own flow

Like anything else you do on a regular basis, as you make a habit of wireframing, you will become better at it. The key to improving the efficiency and effectiveness of this process is for it to feel so second nature you start establishing a system that works. Maybe it is using a consistent naming convention for large amounts of labeling, or the use of quick symbols to represent elements that are unique but consistently used. My point is, do not be discouraged if you feel you are not fast enough. You can only get better, and will.

After getting used to this pre-planning mindset, you will likely start to connect the dots on ways “Drawing your map” can be applied to other aspects of your work. Using myself as an example, I am both a designer and front-end developer. Starting out skinning, with my first few websites I began to realize the majority of my time was wasted on backtracking due to something that initially seemed simple, but ended up using a CSS trick, and altered HTML.

Since then, whether it is for my own design or someone else’s, I always start by making a wireframe of my skinning process. Rather than overall design elements, I lay out my div structure, markup my common classes, and jot CSS notes for dimensions, main colors, or positioning.

This easily cuts my skinning time by a quarter or more, depending on the complexity of the site. I’ve gotten to the point where I can code out the HTML and CSS and have the skin 80% finished and flawless the first time I load it up in a browser. It took time to nail my system, and I keep adapting it, but you can apply the same concept to anything you do. You are your most valuable asset, make yourself evolve.

Your mind is a terrible thing to waste

Employers love to see your thought process and how you handle the entirety of a project. No matter if you are fresh out of college or just looking to upgrade your current career status, wireframes can be a great tool to have in your back pocket. It sends a really strong message when you can go into an interview with a few wireframes, a couple of digital designs mocks, and a final product.

Doing this, you can walk through the mentality behind one or two of your best pieces of work, rather than pulling up your two best sites and a few better than average ones in a browser. This plays on the simple principle of quality over quantity. If you explain the way you work, it separates the thinkers, from the drones.

With this idea in mind, be sure to save your wireframes and various design compositions, even if your final design ended up nothing like your original wireframe. Approaching projects with this kind of mentality, gives even more justification to wireframing. Now not only are you mocking up your thoughts for the immediate task at hand, but also making a personal investment that you can later utilize to market yourself and display how you can work a project in full, from start to finish.

This mindset also works off of the first two issues I brought up. If you feel that diverging from your original wireframe makes your original time and effort wasted, you are sadly mistaken. When referring to a portfolio, this simply shows that you are willing and able to adapt your own creativity. It also shows that you can prioritize the website’s quality over your own sense of perfection to ultimately produce the best possible end product.

Concluding

Overall, it does not really matter what I or anyone else tells you, the decision to wireframe is yours alone. Most designers tend to be very “right-brained”, so mapping out your ideas in a visual fashion will make it easier to channel your thoughts.

However, if you tend to be more calculating and work best from memory and written words, perhaps this would be more cumbersome than what you feel it is worth. If nothing else, I hope you can take away a different sense of what wireframing can be. A tool, that if properly used, can increase efficiency, make you a psychologically better designer, and assist in marketing yourself in the years to come.

The post Should You Wireframe a UI or Not? appeared first on Speckyboy Design Magazine.

But first, you might be wondering why the heck you should create a wireframe sketch of your web design. A wireframe sketch is effective in that:

• You can capture your creative spark and fluidly sketch out your design.
• You can work with your client without committing anything to code, thus saving yourself time and number of actual design revisions.
• You get a relatively quick sample that you can show the client and then work off of – think of is as an outline to an essay.

Basically, creating a wireframe sketch saves you time by reducing the number of revisions you’d need to do, and it helps you stay on track with your design by being a prototype you can work off of.

Hand-drawn Wireframe Sketches

A nice touch with this sketch are the visual cues – such as the play button with the triangle and circle – which make the otherwise-stripped-down sketch detailed. You know that the rectangle is a media player rather than just some content to be decided on later.

The above sketch uses highlighted numbers and zoom-ins nicely, which makes the entire sketch much cleaner and more readable. The column to the right of the sketch has all of the numbered text descriptions of each element, and the zoomed-in elements give more detail without cluttering up the main sketch.

A complex and detailed sketch that uses illustrations nicely by showing an example of what would be contained in a rectangle and square element. It doesn’t just rely on text or the client visualizing it.

Another nice use of illustrations. Despite the hand-drawn nature of the sketch, the details – the logo, a vivid splash image at the top – give a concrete prototype of what the final design will look like.

Another solid illustration example. The arrow-using descriptions on the sides effectively explain technical details, like the width of the page being the width of the browser window.

A nice grid design sketch. Using perpendicular lines that extend past the design reinforces the grid of the design, especially since hand-drawing a sketch can make a other-wise solid design appear loose and floating.

A clean and crisp sketch that shows a fairly simple web page design in great detail.

This design shows that you don’t have to be an artist to draw effective wireframe sketches. The squares are all warped, there’s not much artistic detail in the elements, and the text is crooked in places.

Despite all that, you get a clear sense of how the design will look like and what each element will be. Ultimately, it’s about creating a wireframe with your sketch, not a finished stylized design.

Another example of a grid design. Though the lines aren’t straight or there aren’t lines reinforcing the grid design, the elements are close enough together that you understand that the tables will be parallel to each other.

Digital Wireframe Sketches

A sketch of a mobile calendar. It’s not only detailed but wisely illustrates a pop-up when you select an element. This way, you can see how the design will function as well as how it will look.

This homepage design gives you a clear idea of how the big elements – image, block of text – will look like without wasting time on “lorem ipsum” text and sample images.

A grid design sketch that reinforces itself with vertical bars. You can see how each element will line up and where it’s located relative to other elements.

This spare bare-bones sketch shows that, like with the hand-drawn sketches, you don’t need to be a digital artist wiz to create an effective wireframe sketch. A few squares, rectangles, lines, and pieces of text are enough to show how the design will be.

Another example of a spare bare-bones sketch, this time showing a design that’s more complex. As long as the elements are where they need to be, different shades of grey are used to differentiate elements, and some simple text describes what each thing does (when needed), then you’re good to go.

The homepage wireframe sketch of a social network that was shown in the previous sketch (which was the main/activity screen).

Color is effectively used in this e-commerce sketch. The light blue illustrates what are buttons, and the rest of the rectangles in the sketch are either for text input or selectors.

This sketch almost-finalizes all the essential elements (like buttons) while not wasting time on colors, background, and other styling whoseawhatsits.

Shades of grey are used effectively here to differentiate images from the background, and the blocks of text give you a clear idea of how the real content and web page will look like.

This sketch goes so far as to style the text, buttons, and other elements while not wasting time on colors, the background, and sample images. This shows that by completing the 20% of elements that are most important – while ignoring styling the 80% that isn’t – you can get a almost-complete picture of the design with only a wireframe sketch.

Like with the above sketch, this wireframe sketch also focuses on styling only the 20% of essential elements while ignoring the rest. You get a very clear picture of what the final web page will look like without the sketch needing to add colors, backgrounds, and the rest.

Do You Create Web and Mobile Wireframe Sketches?

Over to you: What do you feel are the most effective reasons for wireframe sketching? Feel free to share them in the comments section below.

The post 20 Inspiring Examples of Web and Mobile Wireframe Sketches appeared first on Speckyboy Design Magazine.

So what exactly are wireframes? Wireframes are visual representations of your websites structure, a blueprint to help establish hierarchy. They are usually limited to shapes, forms, and text, and they rarely use any color. The primary function of any wireframe is to show your client how their site will be structured. Pure information, no bells, and no whistles… a blueprint.

When I started designing websites, I didn’t have much of a clue. I did what I thought looked nice, and hoped that one way or another the design would work. If changes came in, then I’d huff and puff and get on with it.

I’d start with a blank canvas and jump straight in, without giving a second thought to what the site should do, how the information would be presented, or even what color scheme it could use. Believe it or not, this went on for a long, long time.

Like anything else, web design is an ongoing process. With each mistake you make, and each project you take on, you learn a little more. I can guarantee that I make mistakes on each new project, but I try not to repeat those mistakes.

It was actually a client who introduced me to wireframes. They presented me with their site, all nicely mapped out. It seemed they knew more than me, but even that wasn’t enough to kickstart me into using wireframes. It wasn’t until I began to account for my project time, that I began to get to grips with wireframing. My workflow was shoddy. I needed to accomplish more with my time, and therefore make more money.

I think my misconception about wireframing was that it was time-consuming. Why bother creating more work? This, of course, couldn’t be further from the truth. Wireframes will save you time, over and over again. They’ll show your client how their site will be structured, and will also serve as a point of departure for your designs.

Photoshop doesn’t play nice with revisions.

Lets suppose you’re like the old me. You’ve jumped straight into Photoshop, and you have a beautiful home page designed. It’s ready to blow your client’s mind. You send it over, with a detailed description of what everything does, why you’ve used the colors you have, etc. Bill loves it, the only thing… he’d love to see the sidebar on the left instead of the right, and that set of super cool icons that you’ve toiled over all weekend need to go, he feels they just don’t fit in what he had in mind. He wanted something cleaner, less cluttered, different.

You see, there’s the problem, what Bill had in mind. OK, so Bill’s requests don’t suppose such a radical overhaul of the PSD but imagine you had to make these corrections across the board. You’d have to move every layer, graphic and icon, one by one, file by file. That creates a lot of work, work that extends your project time and reduces your overall income, and that’s not good.

How many ways can you skin a cat?

If you type wireframe software into Google, it throws back 2,420,000 results. That’s a lot of pages to work through. Where do you start?

You can never go wrong with pen and paper. Even if I plan on using software to create my wireframes, I still draw them first. Can’t draw? Neither can I, it really doesn’t matter. All you’re looking for at the moment are ideas. It’s a rough layout, not a work of art.

You’ll be amazed at how many you can churn out in a short space of time. The more, the better.

After I have a few down on paper, I begin to merge the best elements and structures of each version to form one SUPER wireframe. When I reach a stage where I’m happy with the initial ideas, then I’ll move over to my mac.

Rough or Smooth?

So what type of wireframe should I build? There are two main types, sketchy and digital. Do you want the outcome to be more informal, almost hand drawn (if not in fact hand drawn) or somewhat more sophisticated, cleaner?

There are those who say that sketchy wireframes give clients the confidence to criticize the layout. They feel that they are looking at something that is in the process of being created. It doesn’t have the appearance of a finished website, so they feel less inhibited. After all, we want feedback, right?

The more formal, cleaner look, can give the impression of a more finalized product, this can make it more difficult for some people to speak out.

Regardless of which system you use, there will always be exceptions to the rules, depending on the type of person your client is. My advice is to use whichever you feel comfortable with. Some workaholics even use both! They start out with a rougher, sketchy version and over time, refine it, making the elements cleaner, more precise and closer to a final product.

Throw me a bone!

Here’s a small selection of places and wireframe applications to try out your wireframing skills, most have trial versions.

• Balsamiq
• Mock Flow
• Pencil (FireFox)
• Hot Gloo
• Go Mockingbird
• Omnigraffle

I started off using Balsamiq Mockups. It’s a cracking little program. Its simple to use, intuitive and can get you up and running in no time. There are some downsides, but there always are. I highly recommend their trial version.

Balsamiq Mockups specializes in the creation of sketchy wireframes. It does it well, but after a while, I wanted something a little slicker. Being the Scrooge I am, I wanted to create my wireframes using means already at my disposal.
Illustrator! I can hear the gasps… But there’s no automation, there’s no drag and drop, there’s no online access, (dropbox)… No, there’s none of that, but there is complete control. I can reuse my elements once created, and I can work to the pixel if I choose. This isn’t exactly your hand drawn wireframe, the results are stunningly clean. Once you’ve got yourself a little library of elements, you’ll never look back.

But there’s no HTML output… There isn’t with pen and paper either, but it still works. If HTML is something you must have, then you can quickly set up some code and linkup your images. That’s too much like hard work for me. I’m old fashioned, an interactive PDF is good enough for me, and for the majority of my clients.

Horses for Courses

No matter which road you choose to go down, you’ll discover that working with wirefames is a great way to help your optimize your workflow. There are no right or wrong ways of doing it, just experiment. As long as you can communicate a visual site structure to your client, a structure that they are willing to sign off on, then you’re good to go. All the rest comes over time. No doubt in 6 months I’ll be using a different method myself.

Also, let’s not forget, any discussions that may occur later in the project with regards to layout can always be resolved by referring back to the wireframe. Which ever way you look at it, it’s a lifesaver, or at best a time and argument saver.

Next time you get a project in, try it with wireframes. You won’t regret it. You’ll present a professional image to your client, and you’ll be more confident when you actually open up Photoshop. What architect doesn’t present plans before building a house, would you hire one that didn’t?

Pen and paper, software, chalk, and blackboard, it’s all the same. Get it down, and get it approved!

Good luck.

The post Wireframes… Who Needs Them? appeared first on Speckyboy Design Magazine.

With a variety of useful navigation elements, including tabs, control buttons, and breadcrumbs, as well as input boxes, drop-downs, sliders, and progress bars, this kit has everything you need to create a polished and professional-looking website.

Plus, with forms for search, mailing lists, and logins, you can ensure that your website is functional as well as stylish. And best of all, this kit is available for free for both personal and commercial use. Thanks to our partners at MediaLoot for providing this fantastic resource.

You might also like: Free Colorful 3D UI Kit (Photoshop PSD).

Glossy 3d Web UI Kit Preview

Glossy 3d Web UI Kit Download

Download the Glossy 3D Web UI Kit

More Free UI Kits & Icon Sets

The post The Free Glossy 3D Web UI Kit (Photoshop PSD) appeared first on Speckyboy Design Magazine.