Please ensure Javascript is enabled for purposes of website accessibility

How To Use Pastel

One of our favorite tools to use when working on a design or website is Pastel. A time-saving tool for providing design & content feedback! Keep reading to find out how we use this tool to make your vision come to life!

Share This Post

What is Pastel?

Pastel is a website feedback tool that helps streamline design, layout, and functionality. It’s easy to view in any browser and allows for commenting throughout the entire website development experience.

Visit their website to dive into all the features or keep reading to learn how CurlyHost will use this communication tool with you and your project!

How do you use Pastel?

I’m so glad that you asked! The Curly Crew has pulled together a step-by-step guide on how we use this tool to navigate and pivot through projects. If you have additional questions – feel free to reach out. We look forward to collaborating with you!

View Your Wireframe or Website In Pastel

When your wireframe or website is ready for review, CurlyHost will send you a link that will open your site inside the Pastel editing window.

Note For Reviewing Wireframes:
If you are reviewing a wireframe (which is an image-based design that comes before the build-out phase of your website) You will only need to create a login, which we will go over in the following step.

Note For Reviewing Websites:
Before the link is opened, there may be an alert window that pops up asking for login information. Enter the login details provided by CurlyHost and you will be redirected to the website view inside Pastel. (This additional login is an extra level of protection for your website.)

Create A Login

Now that you can view your website or wireframe in Pastel – you will need to create a log-in. This allows you to make comments – and notifies the CurlyHost team who is commenting on a site (which is helpful, especially when multiple people are leaving edits to a website).

How do I create a login?

To do so – click anywhere on the site, which will open a pop-up asking for a name and email. Once that information is entered you will be set to leave comments!

Browse Website Pages In Pastel

Once logged in, you’ll be brought to the homepage of your site inside the Pastel editor.

Please Note:
The first view brings you to the full page view in comment mode. To turn comment mode off and browse your site use the following instructions.

At the bottom center of the browser window, there is a toggle for changing which mode of the editor you are in. Slide the toggle to the left to enter ‘Browse’ mode. From here you will be able to navigate the main menu, click buttons, and follow links.

Leave Comments

To Leave A Comment...
Addressing a change you would like made to the website, make sure you are in ‘Comment’ mode by sliding the toggle to the right.

Once you are in ‘Comment’ mode, you will be able to highlight items on the site by hovering your cursor over them. To leave a comment, hover over the item/section so that it is highlighted.

Once the item has a blue dotted line around it, click to open a comment box.

How to post a comment:

In the box, you can type any comments, edits, or questions about your website. Once you start to type, a blue button will appear to ‘Post Comment’. When you are done typing click that button to add your note to the list.

View Comments

To view comments in Pastel, open the left sidebar by clicking on the ‘Comments’ button in the bottom left corner of your screen.

Here you will be able to see the list of comments you leave and any questions from CurlyHost.

Please Note:
New comments that you have not viewed will be marked with a pink flag. See ‘Edit Text in Pastel’ for more information.

Add Attachments To A Comment

Sometimes it may be helpful to add attachments, (such as a document you would like linked in text or an image you would like to switch out). Adding the file directly to the comment is very helpful for the feedback process. To add an attachment, click on the gray paperclip in the bottom right corner of the comment box.

This will open the files on your computer where you can choose your attachment.

If you want to add a file to a comment you have already posted, see ‘View Comments’ listed above, and find the comment you want to edit. Click on the comment and find the ‘Add a Reply’ box at the bottom.

Leave a comment and use the paperclip on the right to attach the file. This will list the file in a nested reply under the original comment.

Edit Text In Pastel

For text changes in Pastel, you can edit textboxes directly with your new content. This will record the changes in Pastel, but will not change the content on the actual website. Using the text editor in Pastel makes it easy for the developer to copy and paste your new content.

Please Note:
It is best to edit content one full paragraph at a time this way in order to avoid overlapping changes.

To edit text, make sure you are in ‘Comment’ mode shown in step ‘Leave Comments’ above. Hover over the text you want to edit until the blue lines appear around it.

*Make sure you highlight the text only.
For example, the image on the left highlights the text only, while the image on the right highlights the entire button.

Pastel Guide | Text Edit

Once you have the text-only highlighted, you will see an option appear above the comment box that says ‘Change this text’.

Pastel Guide | Change Text

Click this to open the text editor and change the text inside the Pastel editor.

Before:

After:

Once you have the text edited the way you want it, click ‘Save changes’ at the top of the screen.

Note:
Once the changes have been saved, the text will return to the pre-edited version, but the changes will be recorded as a comment in pastel. To double-check your edits, you can open the comment and use the before/after toggle to check your changes.

Review New Comments

If you have new comments to review, you will see a pink notification at the bottom of the comments bar.

Open the comments bar to view new comments. You will see new comments marked with a pink flag to the right of the comment. Click on the comment to read it. Once it has been opened, the pink flag will disappear.

Reply To A Comment

To reply to a comment, open the comment sidebar as in step ‘View Comments’ and click on the comment you want to reply to.

At the bottom of the comment, there is an input box to type your message. You can also add an attachment with the gray paperclip on the right side of the box.

Track Comments For Workflow

Pastel is an efficient way for CurlyHost to collaborate with clients and make sure we are meeting your expectations. As we work together, CurlyHost will mark comments ‘Resolved’ that have been completed and need no further clarification or ‘In Progress’ if the task needs additional items.

You can view resolved comments by using the toggle at the top of the comment list and clicking on ‘Resolved’.

If we have a question or leave a reply to a comment, that will be on the ‘Active’ column and you will receive a pink notification. Click on the comment to view and reply as needed.

Now that you know how it works, let’s get started on your next project! Find out more about the Curly Process or reach out to get started!

Subscribe To Our Newsletter

Stay in the Curly Loop!

More Guides To Explore

How To Maintain Your WordPress Website

How often do you tune up your car? You know, that really expensive piece of equipment you rely on daily to get you all the important places you need to go? Websites are kind of like cars. When they’re working, we tend to forget about them but when they break we’re left stranded.

Read More »