In business, time is money. As a web designer, I help you save time and make money. One of my primary services is creating mockups for finished websites. With these incredible tools, I can show my web design clients what their website looks like on different devices. I can help you ensure that your formatting, information, and pictures look the way they should so that you can leave the best first impression on every virtual visitor.
In the past, we had to rely on Photoshop tricks and lengthy processes to achieve these results. Pulling screenshots one-by-one, putting them into Photoshop, and combining the different screens and versions is a thing of the past now that we’ve found mockup generators. Through both free and paid websites, we can create mockups simply by adding in your website’s URL.
Mockup generators take the hassle out of the process, and image-based mockup generators for graphic designers have changed the way we approach website changes and updates. We can use them to show off your designs, templates, pages, and pictures in different settings to see what looks best. They’re a useful tool in helping you create stunning, high-resolution, and high-quality images. Combine several different elements to create complex, attractive designs
Image-based mockup generators for graphic designers
These are good if you have a design that you would like to show how they will look on the screen.
Product mockups
For product mockups, some of the best free options are mockuper.net, mockupworld.com, and smartmockups.com.
Mockuper.net offers many different options to play with. This is one of the best free options for product mockups. There are several virtual options to test, like Apple display sizes, mobile phones, tablets, and smartwatch displays. But they have plenty of print options to experiment with, as well. The print options are ideal if you’re looking to have business cards, posters, office supplies, or exhibit displays made. Confirming that your design choices look good before you put in your order can help you save time, money, and frustration.
Next, we have mockupworld.com. This option gives you a great way to showcase your creative designs. There are lots of options and products available to choose from. From books and packaging to iPhones and posters, they’ve got it covered. They also offer fashion and apparel options, signs, billboards, and much more. This is an excellent resource for all designers.
Finally, the free source smartmockups.com is a mockup haven just waiting to be explored! Digital mockups, print mockups, apparel mockups, and countless others are easy to find and explore. You can spend hours just browsing through the 185 different cosmetics, food, and beverage packaging options. There are also more than 400 apparel options, including things like tee shirts, hoodies, and tank tops.
And the home décor accessories include things like mugs, pillows, and plenty of other choices that will inspire both designers and non-designers alike. This is truly a fun, creative, and easy-to-use service! The free version gives you 200 free mockups using their basic features. After that, you may want to consider an upgrade or switch to another free mockup generator.
Website prototype
Now that we’ve covered product mockups, let’s talk about website prototypes.
The Invision app has been a tremendous resource for many website and business owners. There are limited free options, and one of the most useful is that it can be used not only to show a simple screenshot image, but also a full page of the website. You can scroll through and get the full feeling and effect of your website at each stage.
This is a fun and easy way to ensure that it all aligns with what your ideal target customer is looking for. All you need is the right size of the image to upload, and the app takes care of the next steps. You can even add links to it. While there is a paid version with more advanced features and options, I use the free version, and I’ve found that it’s good enough for my web design business needs. I use the FREE version and it is good enough for my webdesign business.
URL based webdesign mockup generators
Last but not least, we have URL-based web design mockup generators. These are ideal for a certain type of client.
If you already have your website up and running or you’re diving into the development stage, this may be the best option for you. I primarily use these to create portfolio images and showcase new website designs. For these tasks, the following websites are tremendously valuable: techsini.com, ami.responsivedesign.is, magicmockups.com, shotsnapp.com, and screenpeek.io.
Techsini.com is a free and easy-to-use option. You just plug in the website’s existing URL, and the website shows up on the different devices you’re using. This may not sound like a big deal or like much can change, but I find that some of the features make it easy to identify inconsistencies or pieces of formatting that need to be tweaked. I like that each device could show me a different page of the same website, I can scroll through as needed, and I can eliminate some of the displays if I need to or want to see how it looks without them.
While the website is pulled up, I can also choose different colored backgrounds and angle options to see if there’s a small design tweak that will make a big difference. You can also move the devices around and make different arrangements, which I’ve found is useful in testing websites of different kinds. The only negatives: the background is not always big enough, and it would be helpful if there were more clear space at the top and bottom. But for a free mockup generator, there are small complaints.
Another excellent free option is ami.responsivedesign.is. For a long time, this was my website mockup generator of choice. One of the reasons for this is that I like the way you can move the different devices to a different location. The screen scrolling is easy and smooth. The only negative here is that there isn’t much clear space on the top of the screen for a nice screenshot. This can be a bit of a challenge depending on the design of your website.
Magicmockups.com is the last fully free option on the list. They offer a great selection of stock photos of different digital devices, and they’ve recently added the URL option, which is nice! Just plug in your URL, and it’ll appear at an angle or straight on the device. One of the best things about this option is that you don’t need to take a screenshot but download a high res image instead.
One of the newest tools in the mockup generator space is shotsnapp.com. This is the first one on the list that isn’t completely free. There is a 14-day free trial available, but that’s less time than most people will need it for, and it doesn’t give you the same features as the paid version. This app offers some impressive features that allow you to change the size of the background, change the background color, and add a drop shadow.
This option is ideal if you’re concerned with all of the tiny details that go into building and managing your website. For example, you can choose if you want your browser mockup to display as Safari, Chrome, or just a plain window, or you can choose which color iPhone you want to display.
Last on our list is screenpeek.io. While this one does offer a free version, the free options are strictly limited. You can input your URL, but the free version shows only a website on an iPhone. All of the other options are paid features. It has only Mac devices, no PC or Android options available. This seems like an odd choice to me, but maybe they picked this highly-specific niche for a reason. But the paid version is a bit more expansive, and the one-time payment right now is only $12, so it may be an option worth investigating.
ONE TIME PAYMENT RIGHT NOW IS $12. REALLY WORTH IT!
Do you have a mockup generator that you currently use or have tried in the past and liked a lot? If so, please let me know so I can add them to my list! I’d love to hear from you and keep up-to-date on market changes. Contact me!
Sometime just surfing along the web I find treasures that are very useful and time-savers, when working on a project. Graphic design is time consuming and not just to find the creative idea and make it to a great visual, but also how to present, sell it to the client…
I am participating in many different Facebook groups for WordPress web designer. WordPress help and share is one of this great group. Today somebody posted this link looking for help to implement it on her WordPress website. http://gudh.github.io/ihover/dist/ This…
Over the years, single-page website design has become trendy and popular. They’re often visually appealing and impressively designed with large images and lots of information added on a single, easy-to-navigate page. A single-page website design is clean, easy, and modern. These are a few reasons that so many people choose them. But there’s one thing that many of these website builders and managers aren’t considering: the SEO (search engine optimization) aspect of these web pages.
To put it simply, I’ll ask you to stop for a moment and consider this: can you fit all of your business and service information onto one page? And does it look organized when you do? Think about all of the information that you have to share with your target clients or customers. You may have contact information, packages, prices, photo galleries, testimonials, frequently asked questions, the business’s history, blog posts, and more content to share.
Even if your content categories start out small, they’re likely to increase over time. You may be fine starting with one picture, a product description, and some contact information. But as your business grows, you may want to include blog posts, news related to your business or industry, additional services and products, and each of the content areas we described above, too. How can you comfortably fit all of this on one page? And if you do, will it ever be as optimized? The outlook isn’t so good for the answers to either of these questions.
Could your business benefit from a single-page website?
Ask these questions:
Do I have a few products or services to offer and limited content?
Do you have a simple brand story to tell?
Do you want your customer to get through your website fast?
Are your visitors searching for you mostly from mobile?
Do you have a limited budget?
Advantage of a Single-Page Website
Before we talk about when and why a multi-page website might be better, let’s consider some of the positives of using a single-page website. For one thing, single-page websites offer a better mobile experience because they download faster. They also tend to be easy to navigate due to their design and the fact that we’re all so used to scrolling through web pages on our phones these days. But that’s not all.
A single page makes it easy to guide your visitors’ eyes where you want them to be. They’ll be able to scroll through all of your content at once and you won’t have to worry that they’ll click elsewhere and get distracted or confused. These things also make it easy to target one specific audience, so if you have a really narrowed down niche, the single page design may actually be better for you and your business.
All of the information you want the virtual visitor to have can be easily presented when you use the right layout. And from there, the site will guide your visitors through each aspect of your business as they scroll. For certain businesses, this can be a very sleek, modern, and efficient way to present your information. And there’s even one SEO consideration that works out to your benefit in this situation.
With a single-page website, you can only target one specific keyword. If you only have one service, you only need that one keyword, and you may be just fine with a single-page website. And since there are no other pages to compete with, all of your backlinks go to the single page and give you a higher authority ranking. But it’s not all upsides with a single-page website. Let’s talk about some of the problems you may run into:
Since users will always land at the top of the same page instead of having different options based on their search, it’s important to make sure they can easily find what they’re looking for. Otherwise, they’ll simply close the page and move on. There are no other pages for them to search through if they can’t find the information that they need on the landing page. Sharing your website also gets a bit trickier. You might ask a former client or customer to share your package information, testimonials, or contact information on social media. But if you only have one page, they can only share that one page. This makes it harder for them to direct people to what they want them to see.
And as you may have guessed, single-page websites are normally less detailed. There simply isn’t enough space to share all of the detailed content you have. Forcing all of your content onto one page can make it look cluttered and unorganized. This is distracting for visitors and can also be disappointing. If they’re looking for more detailed explanations of your services and other information, it may be buried under other content or missing from the page entirely.
If you offer a common, easy-to-understand, and singular service, many of these issues aren’t things that you’d have to worry about. You likely have minimal content to share, your target customers already understand you – a one-page website is fine. But keep in mind that even if your business is straight-forward, single-page websites are missing a key content piece: blog posts. There’s nowhere to put them, and not having a blog section could be hurting your website’s SEO ranking. Consistently adding new content helps maintain your ranking.
Single Keyword vs. Multiple Keywords
We talk about this SEO-friendly copywriting strategy all the time, but what’s the problem with having a single keyword? If you have one service or one product, single-page websites with a single keyword are fine. But how many businesses these days have just one service or one product? More complex businesses with multiple services or product offers would benefit more from having a multi-page website that allows for the use of different keywords on different pages.
Each different service can have its own keyword-filled page and rank separately. This factor alone may be enough to help you decide what kind of website you need. If you want to be searchable through multiple different keywords, you’re better off with a multi-page website. This type of website incorporates different keywords and attracts a variety of visitors. But again, if you only have one service or product offering, then you should consider a single-page website instead. Just make sure that you are choosing a single-page website for the right reasons. Don’t let the desire to be trendy overpower your business’s goals.
The Many SEO Benefits of Choosing a Multi-Page Website
We’ve discussed some of the many SEO benefits of a multi-page website above, but here’s the bottom line; with multi-page websites, you can:
Dedicate a separate page for each service or product and rank those pages separately, potentially drawing in a much wider audience
Each page can include detailed information about a different aspect of the business; there’s no need to shorten or cut out content for lack of space
Others can share just one of your website’s pages on social media, and visitors know exactly what to expect when they click on that link
The download time is faster for shorter individual pages, and with the multi-page option, you can be more detailed about your services and other information, adding additional pages any time you need to
You can interlink the different pages to guide your visitors and show them all of your assets, instead of leaving it to them to scroll aimlessly through the one page
If you’re still not sure which type of website is right for your business, reach out to me so we can chat! You can also schedule a free 20-minute consultation so we can discuss single vs. multi-page websites, as well as other ways we can make your website better.
A moodboard in the web design process is a really powerful element to communicate feelings and information that can be hard to describe. It allows a new client to show what images, colors, graphics or typefaces she likes without searching for hours and hours and downloading or sending the URLs or images.
Part of the web design process
The process of how we design websites is changing all the time. There was a time when we did not have to worry about the different browser sizes because there were only desktop monitors and that was all. Not any more.
I have been using moodboard for a while, but not Pinterest. I should say I was ignorant of the usefulness of Pinterest. Nowadays I use it to begin most of my web design projects.
What is a moodboard?
A moodboard is a collage of different design elements, colors, examples, patterns, images, or any inspirational elements. It is practical but mostly inspirational for both clients and designers. A board does not have any actual design elements of the new website but would establish the color scheme, the tone of the site.
Examples of moodboards
Both of these were created for the same client after she showed me her Pinterest board. There were two distinct styles I could separate. To make sure I use the one that she liked the most, I created two images for her to chose from. One with the airy light seaside theme and the other using earthy colors and warmer elements.
I also included some practical elements like button designs and typefaces so I save time in the future design process and we do not have to come back to choose the fonts again. Can you see how this can help in the creative process?
It also saves a lot of time because I already know what color palette she expects to see. Check out the final website to see the finished project. wendyhyattwellness.com
It is a fun way to start a web design process
As a web designer, it is really a fun and helpful way to start working on a new website. It gives a ton of inspirations and helps to understand what the client is actually looking for. The style the sense and the feeling she will be happy to see on her own site.
Conclusion
Mood boards are inherently valuable to the web design process to help start defining a general visual language and start getting an idea of what a client likes or dislikes. In our experience, it pays to give this piece of process more attention than it often receives. By spending the effort to make your mood boards more detailed, substantial, and designed, you’ll build a stronger foundation, gather better feedback, and better position the whole project.
Do you quickly want to edit an image for your business blog post, but you do not have any app or software to do it. Don’t worry. WP has a tool that lot of people don’t know about. There is not a lot you can do with it, but sometimes that is enough. It can:
Crop images
Scale image size down
Rotate images
Flip images horizontaly or vertically
Most people need the scaling feature, so the images are not huge and download slow, but cropped or scaled to the correct size and download fast.
Edit an image in WP is simple
Let’s take a look at how to properly scale an image in WordPress.
3. Give Your Image a Title
Step by step process of image editing
Add the image to the Media Library.
After added, click to the Eidt Media button at the bottom of the image.
Top editing icons from left to right: Crop, Rotate right, Rotate Left, Flip vertically, Flip horizontally, Undo and Redo.
Image scaling is done with changing the image size in the Dimension area at the right sitebar.
You need to make a selection on the image before the crop icon shows up.
Crop or scale first before inserting the image into the blog post. If you do it after it was inserted into the post, and change the image later, it might not show up correctly.
The image editing tool in WP does not allow drawing or adding text to an image. It is really just very basic.
Most future business owners know that they need a website to show that they exist. So they hire a local web designer to build an awesome looking site. A good web designer will have a discovery period when they ask a lot of questions about target customers, current marketing materials.
After a couple of weeks, the website is finished. Done. It looks awesome.
They paid about $5,000 for it, and wait a couple of month to see result. But there is no result. Nobody find and visit the website. So it doesn’t bring in any sales.
So why did the website fail?
There are many small parts needed to build a successful local business. Things like recognizing what clients actually want, how to talk to them, how much to charge, what to sell, and how to sell it in a way that the client wants. And let’s not forget that you also need to figure out where the potential clients are, how to find them, how to present the service, or product to them.
All of these require time and commitment to find out.
These are not things that a website designer can figure out on their own. They do their best to create you an effective website, but you already need a deep understanding of your customers to help develop a website which will really boost and elevate your business.
Once I had a client who knew she needed a website for her business, but when we had the discovery session, she could not tell me how she was going make money off of her site. It was a great idea but was not developed completely, so I referred her to a business coach first, before starting on the website project.
How can you build a website without experience?
There are many different easy to do, DIY website builders out there, some of which you might have heard about already.
I have experience with a couple of them, but not all. Website builders are great for small business owners just starting up and have no budget to hire a website designer for a real custom website. The website templates are nicely designed and can be customized to specific businesses with the addition of images and text.
Even when you’re just starting out, you need a great looking website, otherwise you lose customers. People judge the website and make an assumption of the business based on what they see. So a good looking website is a must but is does not have to cost an arm and a leg.
If you are a little techy and willing to learn, there are plenty of tutorials on YouTube how to work with these templates.
What do you need before building a website?
Instead of focusing your energy on the website, focus on more critical tasks:
Get to know your potential customers to understand what problem they really need solved (it might be very different what you thought of before)
Listen what they are really saying and not what you want to hear
Develop your service offer based upon this information
Start promoting your service which will teach you how to communicate with your market, how to convince them to use your product, and so on
Start making money by running your business
A good website works only if your business works.
I am not saying that you do not need web designer, you will later, when you know your business and customers and when you can allocate a budget for a real custom website.
Skincare Studio approached Turek Design to re-design their website. Their website was full of broken images, links and didn’t flow very well. This was in contrast to the beauty facility that they have in downtown Hopkinton, MA. We completed this spa website design in 4 weeks. We recommended buying a domain name with location info in it, as skincare studio was already taken. We used the colors of their logo – purple and lavender – for all the elements of their website.
Their website homepage features the owner and the main spa services in addition to the variety of quality product she carries. The spa website design process was focused on using the bright, clean photos and product images and an easy and fast online booking feature.
After completing the spa website design, SkinCare Studio works with Turek Design for maintaining the website.
To provide the best experiences, we use technologies like cookies to store and/or access device information. Consenting to these technologies will allow us to process data such as browsing behavior or unique IDs on this site. Not consenting or withdrawing consent, may adversely affect certain features and functions.
Functional
Always active
The technical storage or access is strictly necessary for the legitimate purpose of enabling the use of a specific service explicitly requested by the subscriber or user, or for the sole purpose of carrying out the transmission of a communication over an electronic communications network.
Preferences
The technical storage or access is necessary for the legitimate purpose of storing preferences that are not requested by the subscriber or user.
Statistics
The technical storage or access that is used exclusively for statistical purposes.The technical storage or access that is used exclusively for anonymous statistical purposes. Without a subpoena, voluntary compliance on the part of your Internet Service Provider, or additional records from a third party, information stored or retrieved for this purpose alone cannot usually be used to identify you.
Marketing
The technical storage or access is required to create user profiles to send advertising, or to track the user on a website or across several websites for similar marketing purposes.
