07 / 01 / 2017

10 Tools I use for Web Design

10 Tools I use for Web Design

Assalamualaikum and hi. Kind of not sure if I use the right post title because I don't really know what to call them. Tools? I'm not sure. I am in the middle of designing a template so I just wanted to share what websites/applications/extensions I'm using while designing!

1. Real-time HTML Editor

10 Online Tools I'm using while Web Designing lol yes, I am currently listening to Shinchan's videos.

This website is the key to everything I swear. Been using this tool ever since I discover it. Sometimes I just randomly opening the browser tab and key in htmledit.squarefree.com without even realize I actually did.


2. ColorHexa

Picking on colors is so troublesome if you have to open Photoshop/ another browser tab just to pick on colors. So I searched for color picker in Chrome Extensions and after trying for like 6 extensions, ColorHexa fit me the most. I'll just need to click on the icon on my browser to get color hex code. I recently changed to Opera browser, Opera don't have as much extensions as Chrome but luckily, ColorHexa is available on Opera too!


3. v7 Notes

v7 notes

I use this extension for some copy and paste materials.


4. Photoscape


I use Photoscape on daily basis because it is the most ideal software for light photo editing (cropping, resizing, copy and past screenshots). Photoscape is the most simple and easy photos editor ever and the most important part is it don't take much time to load.


5. Codebeautify.org


I found that my template codes are very messy sejak dahulu kala lagi. So yesterday, I searched for CSS beautifier with odd keywords like 'css tidy' 'css clean' lol because I know it existed. Haven't use this code beautifier for my skin yet, but templates that come out after this will get neater! http://codebeautify.org/htmlviewer/ http://codebeautify.org/css-beautify-minify


6. Google Fonts

google fonts

Scrolling through Google Fonts have been my designing routine since font-face didn't work for me anymore. I swear I need to be very detail in searching for fonts. I will paste a paragraph of text to find the right font for body text, just like shown in the screen shot above. https://fonts.google.com


7. Cupcake Ipsum

cupcake ipsum

I get cute dummy text from this site. Dummy text are very useful for live preview purpose. http://www.cupcakeipsum.com


8. Photoshop CS6


I use Photoshop for more complicated photo editing work such as making blog header. I will feel a little bit bitter when I have to use Photoshop like ' alaaa ni kena guna photoshop' because I hate how long the software took to load.


9. Blogger Template Code Pane

blogger template code pane

I build the template by editing in the code pane, and live preview it for like 1000000 times. Sounds troublesome but don't worry, most of the styling part I use Real Live HTML Editor so I will get live preview right away.


10. Inspiration Posts

inspiration posts

This is not a tool but it is in the process. I love searching for inspiration posts for some inspiration on google. If I wanted to get smaller scope of posts, I will search for inspiration posts on Pinterest so that I will found Blogger who will fit my standards.

I hope that some of you will actually find these tools useful. Thank you so much for reading 🙂

  • no 3 tu macam mana gunaaaa.

    btw no 5 tu sumpah macam awesome!

    • Cara guna dia install je extension tu nanti tinggal letak je note dalam tu, nanti dia akan stay kat situ sampai bila-bila.

      Ha ah hyung no.5 tu awesome gila, ada banyak lagi features website tuu 🙂

  • wahh! Thank you for sharing this! It is a great post.
    Selalu tertanya tanya macam mana lah semua orang design template teringin sangat nak belajar 🙂


  • nadiah izzaty

    Nice nice and bestnyaaa boleh buat templat sendiri . =)

  • Ana Fatihah

    Seriusly, I’m really impress! 🙂


The blog writer


An ordinary girl with a lot of hobbies, using this blog to share every pieces of her life, I am Wana without Seoby, a Marketing student who is in love with the art of coding.

Read more about me




My Bloglist


© 2011-2017 WANASEOBY.COM