Notely

Notely 0.1.2 in Google Web Store

Mon, 09 Dec 2013 23:00:00 +0000

In this version I have focused on adding the possibility to capture a page with notes as an image that you can share with others. Notly will capture the entire page not only the visible part and open the result as a PNG in a new tab. Then it’s up to you to print, save it or share it as you wish. Other than that I have focused on some usability improvements and bugs.

Change log:

Add links to github project in options page - enhancement
Change the archive icon to the one used on notely.github.io - bug, cosmetic
Modal overlay don’t work - bug
Export notes by taking screen shot of entire page using captureVisibleTab - enhancement
Images in getting started miss responsive class - bug
Add spinner while capturing screen - enhancement
Add pagination to the blog on notely.github.io - enhancement
Add back link in options page when you have navigated into a page - enhancement
Add success alert when you have imported JSON in the import view - enhancement
Responsive class lacks on tables in options view - bug

Tools that will help you early in the design phase

Fri, 29 Nov 2013 12:00:00 +0000

I thought I would write a series of posts about tips and tricks I use in my design process. I will cover the design process itself but also a lot of tools and methods I use to produce the right artifacts in order to take me to the next level in the design process. This first article will be about the early stages of the design process.

So I don’t know about you but at least before I do any design there are a few things I try to do in all my projects and that is setting some kind of context around the design area. I try to collect as much information as input for the design as possible. I love working with e.g. personas. But persona creation can be very time consuming. Especially if you are serious about how they are created and use deep interviews as the method for collecting the data to build them.

In many project I sadly don’t have time to do personas in a proper way. Then wen I get the assignment or when I start my own projects I try to start of with what I call a brain dump. A brain dump is exactly what it sounds like. I try to just dump every thing that comes up in my mind regarding the design subject on paper. What that would be differs a lot based on the project at hand of course. But some things I try to think about is. Value proposition (USPs), Minimum Valuable Product (MVP - which features needs to be included as bare minimum), Target/User Group, Technology at hand, product/feature life cycle, etc.

For the product/feature life cycle I try to think about it as a marriage and its different phases.

Discovery - How the users find out about the product
Dating - First time usage and experience
Marriage - How to make the users become loyal
Divorce - How to win back users if they start to use another product
End of life - What strategy to use in order to make it live longer. Enhancing to old product or develop a new

I used to write down all of this on paper, but recently I have found a fantastic tool that makes it so easy to just dump what ever pops up in your mind in no specific order or structure. Then you can easily rearrange and structure your thoughts using drag and drop afterwards. The tool is called XMind and is a free mind mapping tool. Now I use XMind all the time. I think it’s so powerful. To view/create mind maps on iPad I use a tool called Mindo. It supports importing exporting XMind format also so it’s perfect when I’m on the move away from my computer.

When it comes to visualizing your first ideas some people go directly for graphic design tools like Photoshop, etc. I don’t think that is such a good idea. I order to get the right kind of feedback early on I think it’s better to create basic sketches, maybe even hand drawn on paper. If you go to close to final product from day one I think the discussions will be more focused on e.g. on how the branding should be applied and other questions about shape and color. Although I think that is important in order to create a stunning user experience, I think first what you want feed back on is the concept it self. Not so much the graphical presentation.

To create these first concept visualizations I tend to make a lot of sketch mock-ups. Often I draw on paper but sometimes it’s important to be able to create mock-ups that you can interact with. In order to do this I use a bunch of different tools except from pen and paper. I will try to list the one I like best.

When it comes to designing mobile apps I actually use an iPhone/iPad app to create clickable mockups. The first one is Popapp that makes it possible to draw mock-ups on paper and then take photos of the drawing that later are turned into clickable mock-ups. Another way of doing this which I use quite a lot is to use my favorite mock-up tool Omnigraffle to create clickable pdf files which I then upload to my iPhone/iPad using Dropbox. If you don’t use Dropbox yet I suggest you check it out.

The reason why I like Omnigraffle so much is that you can create all types of mock-ups, everything from sketch to pixel perfect. You also have stencils with prebuilt assets that you can share with anybody. You even have a store, Graffletopia, where you can buy or download free stencils. One alternative to Omnigraffle could be Balsamiq Mockups. The big difference is first the price but also the capabilities to generate pixel perfect design and drawing your own shapes. In Omnigraffle you can do all that but in Balsamic you need to stick to what you have. I have tried a bunch of other tools but these are the ones I use all the time.

When it comes to web concepts I almost only use Omnigraffle because of its ability to export clickable html mockups. Basically what it does is to export every page in the document as an image map with clickable regions. This makes it possible to really easy create mock-up web pages that gives you a very good feeling of how the final result will be. I use it a lot together with Notely (of course :-) to collect notes and feedback.

Even if I prefer doing sketches early on in the design process over pixel-perfect design, I think it’s important to be able to get feedback on the graphical presentation. In order to get feedback I usually do mood-boards with images/screenshots which I think represents the style I have in mind for the final result. When you have a mood-board you can get feedback and change direction without even having to design anything yourself. To create mood-boards I have found the nice service Pinterest. With Pinterest you can create and share mood-boards of your own, both public and private boards. You can also search and find other users public boards, that you can reuse directly without any fuzz. I like it a lot!

Basically this how I start the design process and the tools I use. If you have any comments of feedback you would like to share with me feel free to write a comment below. I definitely would like to know what you all use and if you find this tips useful. If so stay tuned for more useful tips in next post in the series.

Notely 0.1.1 in Google Web Store

Mon, 11 Nov 2013 23:00:00 +0000

I just uploaded a new version of Notely to Google Web Store. No new major feature. I just contained some fixes and improved import/export and house keeping functionality.

Change log:

Notes should be turned on by default when installing notely bug
Notetaking should be default on when installing Notely bug
Add support to clear whole data base of notes enhancement
Adds links to issues and wiki to notely.github.io enhancement cosmetic
Add support to export whole data base to back it up enhancement
Add support to clear one page enhancement
Update README.md to contain relevant information enhancement
Add space between note and delete button in popup cosmetic

Jekyll + Github Pages gives us Notely Blog

Wed, 06 Nov 2013 12:00:00 +0000

Hello World Notely Blog! This is the first post in the new blog. I thought I would write a little bit about my experience of building blogs on different platforms. This blog is build using Jekyll and hosted on Github Pages. Normally I build blogs based on Wordpress, but during the process of making this blog I found out that there are some similarities but also big differences in building a blog using this two very different technologies. First of all Jekyll use ruby and markdown to create static pages and Wordpress use php and a database to create dynamic pages. In this post I will try to highlight the differences and give some nice suggestions of framework to use.

Recently I have been doing some Wordpress sites. A developer portal and a blog for the company I work at. When we decided to build those sites on Wordpress we looked at making the development suck a little bit less. Therefore we looked at writing our theme using OOP based on php 5.4 and using a template engine for rendering pages and posts. Looking back I can’t think or doing it another way. So now when I was looking in to making a blog for Notely I was pleased to see a similar solution at least from a templating point of view.

Let’s start by talking a little bit more about the php stuff. I have recently been forced to do some php projects again. I switched to Node.js for a lot of my other projects, but now I had to use php again, mainly because of the hosting solution. To make that transition suck a little bit less I looked around for good php framework and found some good ones in order to get a proper MVC pattern. As as substitute of Express, I found Slim and Silex micro-frameworks for building REST-style applications for the controller part. For rendering views I used Twig and for models I have tried different ORM-frameworks, e.g. PHPActiverecord. I think with these framework php development wasn’t so bad actually.

Now when the task was to develop some new Wordpress sites I hoped I could use some of the nice frameworks. The controller and model part is of course the core of Wordpress itself and the way you extend or implement specific functionality is by implementing your own theme, plug-ins and widgets. So I couldn’t really find use of Slim or Silex. If you ever have tried to build a Wordpress theme the official way you know it’s a nightmare. A lot of the work is done by poking around in various template files and using global functions to register hooks for your custom functionality. Man it sucks big time. So the proper way to go about it is of course to try to get it more OOP by encapsulating the code in your own classes. I started to do that but I still ended up mixing html in my php code which is not nice either. Because I have used Twig to separate html from php I ended up looking for a solution to use Twig with Wordpress and found Timber. With Timber writing Wordpress themes was a joy. I was using composer for handling dev-dependencies and Timber as a bridge between DB and the templates making really good code/presentation separation.

Now looking at Github Pages as hosting for Notely I was a little bit skeptic about not having some kind of server side technology to create dynamic pages. Then I found out about Jekyll and the possibility to generate a blog using static pages. More then that I found out about Jekylls templating language Liquid. Which is very similar to Twig which made me happy. Because I have been using Twig in some of the previous projects I felt the learning curve was really small and I was up to speed really quick. The result is this, the Notely blog built using Jekyll and hosted on Github Pages.

Let me know if you have some more experience of some of the above mentioned php frameworks or of Jekyll or Github Pages. Otherwise stay tuned for other related writings or updates regarding the development of Notely.

Release of Notely 0.1

Mon, 28 Oct 2013 12:00:00 +0000

The simplest way of taking notes on any web page directly from within your browser.

Features:

Click any part of any web page and notes to it.
The note will be saved even if you leave the page or close the browser.
Control visibility of notes, hide them if you don’t want to see them
Move notes around the page with drag and drop
Manage all notes in a convenient archive page
Export all notes related to one page
Import all notes related to one page
and more to come