Sketching on Speckyboy Design Magazine https://speckyboy.com/topic/sketching/ Design News, Resources & Inspiration Sun, 17 Dec 2023 07:20:40 +0000 en-US hourly 1 20+ Incredible Photoshop Actions for Sketching Effects https://speckyboy.com/sketch-effects-photoshop-actions/ https://speckyboy.com/sketch-effects-photoshop-actions/#respond Thu, 05 Oct 2023 10:31:53 +0000 https://speckyboy.com/?p=117579 Streamline your workflow and transform your photos into beautiful sketches with ease using our collection of sketch effects Photoshop actions.

The post 20+ Incredible Photoshop Actions for Sketching Effects appeared first on Speckyboy Design Magazine.

]]>
Turning your photographs into sketches is a great way to add a unique artistic touch to your work. But how can you achieve this without having to manually draw every image? The answer is Photoshop actions.

Our collection of sketch effects Photoshop actions offers a variety of options to transform your photos into beautiful sketches. These actions take the guesswork out of the process and ensure that important aspects like light and shadow are accurately considered.

Whether you’re a photographer or graphic designer, our selection of sketching Photoshop actions will help speed up your post-production and workflow. These actions are incredibly useful and offer various customization options, allowing you to create a personalized and creative effect that showcases your unique style.

So why not take a look at our selection of sketch effects Photoshop actions today and add a unique touch to your photos? Transform your work into a beautiful piece of art with just a couple of clicks!


What are Sketching Effects

The sketch effect is a creative way to transform your photos into artwork that resembles hand-drawn sketches or pencil drawings. It adds an artistic touch to your images, making them appear as if a skilled illustrator created them.

To achieve the sketch effect, photographers often turn to Photoshop actions. They simplify the details and emphasize the outlines, creating a visual style reminiscent of traditional sketching techniques.

Whether you want to give a portrait a timeless and artistic feel or turn a scenic landscape into a hand-drawn masterpiece, these sketch actions can help you achieve that.

By using them thoughtfully, you can add a touch of artistry to your photos, making them more engaging and memorable for viewers of all ages. It’s a fantastic way to explore new dimensions of photography and express your artistic vision uniquely and captivatingly.

Sketching Effect Actions for Creatives

Sketch Portrait Photoshop Actions

The Sketch Portrait Photoshop Actions provide a sleek hand-drawn effect. The resulting image has a glossy look while still being realistic. It includes well-organized layers and serves as an excellent time-saver. It works best with black and white photos.

Sketch Portrait Photoshop Actions

Concept Sketch Photoshop Action

The Concept Sketch Photoshop Action is an engineer or architect’s delight! It makes it easy to turn any architectural drawing into a professional-looking sketch. The action set could be used for building interiors, exteriors, and product designs. It comes with hand-drawn brushes and textures, including 12 brushes and 18 patterns.

Concept Sketch Photoshop Action

Hand-Drawn Pencil Sketch Photoshop Action

The Pencil Sketch Photoshop Action can turn any portrait-style photo into a digital piece of art that appears as though it was hand-drawn. It works on objects as well, and you can select from 10 color presets. Everything can be applied with one click, and the result is fully layered and non-destructive.

Hand-Drawn Pencil Sketch Photoshop Action

Pencil Sketch Photoshop Actions

Next up in our collection is this set of Pencil Sketch Photoshop Actions. It includes 15 different actions that you can use to turn portraits into sketches. It comes with instructions, is non-destructive, has editable layers, and can be used for photos that will be used on both the web and print media.

Pencil Sketch Photoshop Actions

Da Vinci Sketch Photoshop Actions

The Da Vinci Sketch Photoshop action immediately turns any photo into a sepia-toned illustration that looks like it came out of Da Vinci’s sketchbooks. It works best with portraits and objects and creates finished photos that are layered so they can be customized further. It also comes with five pen color tones and ten color presets.

Da Vinci Sketch Photoshop Actions

Pencil Sketch 2 Photoshop Actions

The Pencil Sketch 2 Photoshop Action is another great way to quickly turn a photograph into a piece of digital art. You can edit the individual layers and use them for various purposes.

Pencil Sketch 2 Photoshop Actions

Architecture Sketch Art Photoshop Actions

Another option is the Architecture Sketch Art Photoshop Actions. This set comes with full layer control and is non-destructive, and it works for a wide range of photos like landscapes and portraits. This one-click action can be used for both the web and print as well.

Architecture Sketch Art Photoshop Actions

Pen Sketch Photoshop Action

Here’s another interesting choice to consider. The Pen Sketch Photoshop Action gives your photos the look of a hand-drawn sketch. What makes this stand out is how the action creates a crosshatch pattern for shading. It includes well-organized layers and complete instructions.

Pen Sketch Photoshop Action

Digital Sketch Photoshop Action

Another action you may consider is the Digital Sketch Photoshop Action. This one creates a digital sketch effect when added to your photos. It works best with portraits and has a softness to it that’s really compelling. It comes with ten color effects as well.

Digital Sketch Photoshop Action

Pencil Sketch 3 Photoshop Action

Here’s another interesting choice for creating a sketch from a photograph. This action set can be implemented with a single click, and the result is lovely. If you want to play with the available settings, however, you can do that, too. It has editable layers and can be used on a wide range of photos.

Pencil Sketch 3 Photoshop Action

Sketch Art Photoshop Actions

The Sketch Art Photoshop Actions work to create a soft sketch appearance on your photos. The result is a realistic-looking sketch that takes many cues from your original image. Even better, your original image layer remains unscathed, so you can always revert to it if need be.

Sketch Art Photoshop Actions

Color Sketch Photoshop Action

This action really sets itself apart from the pack. The Color Sketch Photoshop Action creates a professional-looking, colorful sketch from your photographs, and it accomplishes this using hatching and abstract effects.

Color Sketch Photoshop Action

High-Quality Pencil Sketch Photoshop Action

The High-Quality Pencil Sketch Photoshop Action is another easy way to create digital artwork from photos with a single click. It has a multitude of layers you can adjust and tweak. And in the end, you’ll wind up with a photo that looks as though it has cross-hatching, blending, and many more features of hand-drawn art.

High-Quality Pencil Sketch Photoshop Action

Portretum Sketch Drawing Photoshop Action

Portretum Sketch Drawing Photoshop Action is ideal for adding some flair to your portrait photography. This one-click action can be applied to any portrait and comes with the action file, brushes, ten color presets, graphic elements, and a user’s guide.

Portretum Sketch Drawing Photoshop Action

Sketch Photoshop Action Presets

You might also like to consider the Sketch Photoshop Action Presets. Apply this to a particular spot on your photo, and then play the action. It’ll turn that area into a sketch with all the subtle shading and details of a real hand-drawn piece of art. This action has fully editable layers as well.

Sketch Photoshop Action Presets

Sketch Art Smart Photoshop Action

You might also want to try the Sketch Art Smart Photoshop Action. With well-organized layers, you can customize this action to suit your specific needs and make selections regarding background, color, and more. It comes with ten brushes, five textures, and a quick start-up guide.

Sketch Art Smart Photoshop Action

AI Architecture Sketch Photoshop Actions

Here’s another great option if you’re looking to add some flair to architectural photos. This action turns your building photos into sketches with just a single click. It offers ten styles, relies on AI for best results, and is fully customizable to suit your specific needs. It even has an emphasized greenery action for highlighting foliage in your original photo.

AI Architecture Sketch Photoshop Actions

Cartoonize Photoshop Action

The Cartoonize Photoshop Action will turn any portrait-style photo into a digital painting. The result is an image that looks like a cartoon, and you can use the resulting image on the web and in print. Plus, the action is non-destructive.

Cartoonize Photoshop Action

Realistic Vintage Sketch Photoshop Action

Last in our collection is the Vintage Sketch Photoshop Action that turns any photo into a vintage-looking sketch. The result is a realistic-looking drawing that’s achievable with a single click. It comes with 15 color presets and a video tutorial that makes it easy to get this action working.

Realistic Vintage Sketch Photoshop Action

How to Install Photoshop Actions

  1. Download and unzip the action file
  2. Launch Photoshop
  3. Go to Window > Actions
  4. Select Load Actions from the menu and go to the folder where you saved the unzipped action file to select it
  5. The Action will now be installed
  6. To use the newly installed action, locate it in the Action panel
  7. Click the triangle to the left of the action name to see the list of available actions
  8. Click the action you want to play and press the play button at the bottom of the Actions panel

Conclusion

We hope you find our collection of Photoshop actions for turning any photo into a professional-looking sketch useful. These actions have been designed to streamline your workflow and reduce the time you spend on photo edits, making the process much quicker and almost effortless.

With our selection of sketch effects Photoshop actions, you can achieve a unique and artistic look that will elevate your photography to the next level. These actions are easy to use and offer a range of customization options to make your sketches truly personalized.

More Photoshop Action Collections

The post 20+ Incredible Photoshop Actions for Sketching Effects appeared first on Speckyboy Design Magazine.

]]>
https://speckyboy.com/sketch-effects-photoshop-actions/feed/ 0
5 Printable Templates for Sketching Responsive Layouts https://speckyboy.com/sketchsheets-for-responsive-web-design/ https://speckyboy.com/sketchsheets-for-responsive-web-design/#comments Thu, 10 Aug 2023 15:45:55 +0000 http://speckyboy.com/?p=35037 As mobile devices evolve, designing websites responsively has become necessary. However, unlike static or fixed websites, the fluidity and flexibility of responsive sites can make it challenging to convey design...

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

]]>
As mobile devices evolve, designing websites responsively has become necessary. However, unlike static or fixed websites, the fluidity and flexibility of responsive sites can make it challenging to convey design ideas visually.

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.

Sneakpeekit responsive sketchbooks

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 Web Design Sketchsheets by Jeremy Palford

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.

ZURB responsive sketchbooks

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.

Responsive Sketch Pad sketchbooks

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.

Paper & Pencil responsive sketchbooks


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.

]]>
https://speckyboy.com/sketchsheets-for-responsive-web-design/feed/ 3
20 Inspiring Examples of Sketching in Icon Design https://speckyboy.com/icon-sketching/ https://speckyboy.com/icon-sketching/#comments Fri, 04 Aug 2023 06:53:59 +0000 http://speckyboy.com/?p=43687 We have a collection of some of the most creative and inspiring examples of icon sketching by designers from all across the world.

The post 20 Inspiring Examples of Sketching in Icon Design appeared first on Speckyboy Design Magazine.

]]>
Sketching plays a vital role in the design process. In fact, the best UI designers prefer dedicating a significant amount of time to sketching with a pencil before transitioning to more sophisticated digital tools such as Photoshop or Illustrator.

When it comes to designing icons, sketching remains an indispensable tool in the designer’s arsenal. To inspire you, we have curated a collection of the most impressive examples of icon sketching from designers across the web.

Don’t hesitate to peruse this collection and let your creativity run wild as you sketch your ideas. Enjoy the process, and happy sketching!

You might also like these collections of inspirational UI design sketches or logo sketches.


Mobile App Icon Sketch Andrey Maxim

Mobile App Icon Sketch

MWood Logo Sketch Antonio Calvino

MWood Logo Sketch

Substrate Sketches Benjamin Oberemok

Substrate Sketches

Mobingi Sketching Phase Ramotion

Mobingi Sketching Phase

Sketching Rates Net logo Tony Bar

Sketching Rates Net logo

Brick City Pets Sketch Stevan Rodic

Brick City Pets Sketch

Icon Sketching Trevor Nielsen

Icon Sketching

Map on Hover Sketch Eddie Lobanovskiy

Map on Hover Sketch

iPhone App Icon Sketches Ramotion

iPhone App Icon Sketches

Cornerstone Sketches v1 Mike Rhode

Cornerstone Sketches v1

Vintage Camera Sketches Creative Mints

Vintage Camera Sketches

Postbox Pencil Sketches Mike Rohde

Postbox Pencil Sketches

App Store Icon Sketch Artua

App Store Icon Sketch

GoodNotes Icon in Process Eddie Lobanovskiy

GoodNotes Icon in Process

Mac App Icon Sketches Ramotion

Mac App Icon Sketches

Video Editor Icon Sketch Eddie Lobanovskiy

Video Editor Icon Sketch

iOS App Icons Sketches Jackie Tran

iOS App Icons Sketches

Cogsy Icon Sketches Loggia

Cogsy Icon Sketches

Icon Ideas Sketches Jackie Tran

Icon Ideas Sketches

Mobile App Icon Sketches Creative Mints

Mobile App Icon Sketches

The post 20 Inspiring Examples of Sketching in Icon Design appeared first on Speckyboy Design Magazine.

]]>
https://speckyboy.com/icon-sketching/feed/ 4
25 Inspiring Examples of Sketching in Logo Design https://speckyboy.com/inspiring-examples-logo-sketching/ https://speckyboy.com/inspiring-examples-logo-sketching/#comments Mon, 24 Jul 2023 13:32:14 +0000 http://speckyboy.com/?p=47055 We share some creative examples of the initial logo design process that will hopefully give you some inspiration for your next project.

The post 25 Inspiring Examples of Sketching in Logo Design appeared first on Speckyboy Design Magazine.

]]>
Whether you’re a graphic or UI designer, the first stage of any project – sketching your initial ideas on paper – is crucial. This step is often overlooked, but it’s essential for delving deep into your knowledge and imagination and bringing your creative ideas to life.

Watching the sketching process in action can be a thing of beauty, and today we’re excited to showcase some examples of the initial logo design process. These examples offer a glimpse into the early stages of the branding process and provide inspiration for your next project.

By exploring other designers’ sketches and brainstorming sessions, you can gain valuable insight into their creative processes and learn how they approach the challenges of logo design. This can be especially helpful if you’re feeling stuck or unsure of how to proceed with your own project.

So take a moment to appreciate the beauty of the initial logo design process, and let it inspire you to push the boundaries of your own imagination and creativity.

We have previously featured examples of icon design sketching and some UI sketching, just in case you want to check them as well.


The post 25 Inspiring Examples of Sketching in Logo Design appeared first on Speckyboy Design Magazine.

]]>
https://speckyboy.com/inspiring-examples-logo-sketching/feed/ 1
Sketchbooks – The Designer’s Cookbook https://speckyboy.com/sketchbooks-designer-cookbook/ https://speckyboy.com/sketchbooks-designer-cookbook/#comments Thu, 15 Jun 2023 06:10:17 +0000 http://speckyboy.com/?p=57471 As a food lover, I absolutely adore cookbooks. I have a ton of them – all filled with pages and pages of delicious recipes for me to try and experiment...

The post Sketchbooks – The Designer’s Cookbook appeared first on Speckyboy Design Magazine.

]]>
As a food lover, I absolutely adore cookbooks. I have a ton of them – all filled with pages and pages of delicious recipes for me to try and experiment with. Perhaps some of you do as well. My favorite part of a cookbook is the visuals – mouth-watering pictures of food heaven on perfectly arranged plates. It’s enough to send even the casual eater into foodie nirvana.

Most cookbooks I own have wide margins and extra pages in the back to make notes on. Because I’m a total cooking geek, I take full advantage of this feature, making notes of things I’ve tried, adjustments I’ve made to the measurements, different methods of arranging the dish, et cetera. Sometimes I’ll even print out photos I’ve taken of my dinner table to have as a reference.

My favorite method of recording information, though, is sketching. If there’s a complex dessert I have to make that requires a careful assembly, there’s no better way to figure it out than by drawing it. Making a sketch in my recipe allows me to keep a visual record in addition to a written one, so that I can produce an even better outcome next time. In this way, my cookbooks are almost like sketchbooks, and that’s exactly what I’m going to talk about today.

blueberry cake baking sketch sketchbook design
Pancakes by Zhenia Pikul




Sketchbooks – The Designer’s Cookbook

In my opinion, and I’m definitely not alone, designers don’t keep sketchbooks nearly often enough. A sketchbook is possibly the best way to keep track of your ideas and to document your thought process, but many designers – even those who went to school – are afraid of “ruining” a new sketchbook with their “bad” drawings.

This is a silly notion that needs to go away forever. Sketching in a design context is not – I repeat: not – about how well you can draw. It’s a tool to develop your brain. By sketching regularly, you can actually improve your ability to think critically and quickly call up creative solutions whenever you need them.

The earliest cookbooks were simply records of what wealthy, upper-class people ate. They were created not for the wealthy themselves, but for their kitchen staff. Modern recipe books used by chefs serve much the same purpose. They serve as a working guide to help cooks solve their diners’ main problem: they’re hungry and they want a delicious meal.

In this same way, a sketchbook is a visual reference for solving problems. Most cooks I know don’t follow the recipe exactly, and you don’t have to use everything you put down in your sketchbook. It’s simply a reference for you to use – just like a mood board, a wireframe, or a comp or draft.

logo food sketch sketchbook design
Sketchbook Doodles by Derek Clark

Share The Wealth

The days of the “secret recipe” are over. Recently, there’s been an explosion of celebrity chefs who have released their own cookbooks full of recipes developed on their television shows or in their restaurants. Scores of non-celebrity chefs and professional food bloggers are also eager to share what they know. In fact, even people who aren’t chefs, such as Gwenyth Paltrow or Martha Stewart, put out recipe books. Why? Because helping others improves your image.

Sharing what you know can put you in a position of authority, even if you’re not a so-called “expert.” It helps you stand out as someone who is looking to provide value and help people help themselves.

Look, I know how many designers feel about their drawing abilities. But as someone who’s hired designers in the past, I can’t tell you how awesome it is to find one who’s willing to share their sketches and expose the inner workings of their brains. Clients love to see your thought process. It makes them more likely to want to do business with you, rather than the next person.

Your sketches don’t have to be beautiful, and okay – you don’t have to share the ones that look like a kindergarten class had a riot across the page. But sketches that show the way you think are immensely valuable to clients. It helps them see how you will apply your brain to their own projects.

If all you ever share on your website are the polished, finished products in their annoyingly perfect glory, you’re missing out on connecting with people on a personal and intellectual level. Showing nothing but the finished product is dry and boring, and it doesn’t solve your clients’ problems. Your client isn’t paying you for work you did for someone else. They’re paying for the way you approach your designs – the way you think.

typographic design sketch sketchbook design
Sketchbook by Jady Salvatico

Having A Theme

Cookbooks often have a theme – desserts, vegetarian, etc. There are also single-subject cookbooks, dealing with things like pizza, pasta, bread, or any other singular dish. Then there are cookbooks that can instruct you on certain cooking techniques like baking, barbecuing, or cloning recipes for popular commercial foods you would find in a restaurant or grocery store.

It’s not necessary to include every single bit of information related to cooking in every cookbook. No one would ever need or want to buy more than one of them, for one thing. Also, a cookbook that comprehensive, if it existed, would probably be the size of your car.

When sketching and sharing your design “recipes,” it’s a tremendous benefit to pare down the theme of your sketches to whatever is relevant to your project. If you’re coming up with new ways to incorporate animated type in your mobile interface, it’s not really that enlightening if you have a pencil drawing of your dog randomly dropped in.

You don’t need to show every single sketch you do, nor does every sketch have to be inherently useful on its own. Rather, it’s the overall process of keeping records that’s important.

Don’t Forget To Process

If you do start keeping a regular sketchbook, it’s easy to get overwhelmed by the volume of sketches you’ll produce. As a formally trained illustrator, I’ve been keeping sketchbooks for many, many years. I don’t actually throw anything out, but I do have to occasionally put boxes of papers in deep storage because there’s just no room for them in my house.

My reference and inspiration folders are the same way. It’s important to constantly update your resources; if something is no longer useful, get rid of it. Clutter on your hard drive leads to clutter in your work.

The post Sketchbooks – The Designer’s Cookbook appeared first on Speckyboy Design Magazine.

]]>
https://speckyboy.com/sketchbooks-designer-cookbook/feed/ 5
Free Sketchy Decorative Elements Vector Pack https://speckyboy.com/sketchy-decorative-elements-awesome-free-vector-pack/ https://speckyboy.com/sketchy-decorative-elements-awesome-free-vector-pack/#comments Tue, 20 Sep 2022 23:00:53 +0000 http://speckyboy.com/?p=7575 The Sketchy Decorative Elements pack is perfect for use in various types of design projects. You're free to use this pack for personal and commercial projects.

The post Free Sketchy Decorative Elements Vector Pack appeared first on Speckyboy Design Magazine.

]]>
We’re thrilled to offer an exclusive vector freebie from StockGraphicDesigns.com – the Sketchy Decorative Elements vector pack. This pack includes all EPS files, a Photoshop brush set, PNG source files, and a small vector bonus template.

The Sketchy Decorative Elements pack is versatile and perfect for use in various types of design projects. And best of all, you’re free to use this pack in both personal and commercial projects.

Download this pack today and take your designs to the next level with these beautiful and unique elements.



Sketchy Decorative Elements Vector Preview

Vector Sketchy Decorative Elements

Vector Sketchy Decorative Elements Preview

Vector Sketchy Decorative Elements Download

The post Free Sketchy Decorative Elements Vector Pack appeared first on Speckyboy Design Magazine.

]]>
https://speckyboy.com/sketchy-decorative-elements-awesome-free-vector-pack/feed/ 2
20 Inspiring Examples of Web and Mobile Wireframe Sketches https://speckyboy.com/web-mobile-wireframe-sketch-examples/ https://speckyboy.com/web-mobile-wireframe-sketch-examples/#respond Fri, 29 Nov 2019 23:19:43 +0000 http://speckyboy.com/?p=13686 A wireframe sketch is the initial hand-drawn design process, using paper and pen/pencil, of what a website design will look like. And to help you get inspiration as well as...

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

]]>
A wireframe sketch is the initial hand-drawn design process, using paper and pen/pencil, of what a website design will look like. And to help you get inspiration as well as effective reference points, this article features 20 impressive web and mobile wireframe sketches.

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

sketch are the visual cues such as the play button with the triangle and circle 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.

sketch uses highlighted numbers and zoom-ins nicely Hand-drawn Wireframe Sketches

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 Hand-drawn Wireframe Sketches

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.

concrete prototype of what the final design will look like Hand-drawn Wireframe Sketches

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.

The arrow-using descriptions on the sides effectively explain technical details Hand-drawn Wireframe Sketches

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.

Using perpendicular lines that extend past the design reinforces the grid of the design

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.

clean and crisp sketch that shows a fairly simple web page Hand-drawn Wireframe Sketches

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

don't have to be an artist to draw effective wireframe Sketches

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 Hand-drawn Wireframe Sketches

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

 digital Wireframe A sketch of a mobile calendar

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 digital Wireframe Sketches

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.

 digital Wireframe A grid design sketch that reinforces itself with vertical bars

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.

you don't need to be a digital artist wiz to create an effective wireframe sketch

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.

 digital Wireframe this time showing a design that's more complex

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.

homepage wireframe sketch of a social network digital

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

 digital Wireframe Color is effectively used in this e-commerce sketch

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.

 digital Wireframe sketch almost-finalizes all the essential elements

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 Wireframe Sketches

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 digital Wireframe

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.

his wireframe sketch also focuses on styling only the 20% of essential elements

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.

]]>
https://speckyboy.com/web-mobile-wireframe-sketch-examples/feed/ 0