A big factor of creating a website that has your vision fills your needs, and is something you are excited about is… communication! With 650+ completed websites you can imagine that the Curlyhost team has talked a LOT about what works and what doesn’t. And for a while now we have loved working with Pastel as our communication tool.
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 experience.
How do you use it?
I’m so glad that you asked! I have pulled together a step-by-step guide on how we have used 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!
1. View Your Site (or wireframe) in Pastel
2. Create a Login
3. ‘Browse’ your Website in Pastel
4. Leave Comments
5. View Comments
6. Add Attachments to a Comment
7. Edit Text in Pastel
8. Review New Comments
9. Reply to a Comment
10. Track Comments for Workflow
1. VIEW YOUR SITE (OR WIREFRAME) IN PASTEL
When your site (or wireframe) is ready for review, CurlyHost will send you a link that will open your site inside the Pastel editing window.
* Please Note: 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.)
(If you are viewing a wireframe – which is an image-based design – 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.)
2. 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).
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!
3. ‘BROWSE’ YOUR WEBSITE IN PASTEL
Once logged in, you’ll be brought to the home page 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.
4. 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.
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.
5. 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.
New comments that you have not viewed will be marked with a pink flag. See step 7 ‘Edit Text in Pastel’ for more information.
6. 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 step 5. ‘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.
7. 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 4 ‘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.
Once you have the text-only highlighted, you will see an option appear above the comment box that says ‘Change this text.’
Click this to open the text editor and change the text inside the Pastel editor.
Once you have the text edited the way you want it, click ‘Save changes’ at the top of the screen.
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.
8. 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.
9. REPLY TO A COMMENT
To reply to a comment, open the comment sidebar as in step 5 ‘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.
10. 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.
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!