How do you design your website interface? | Sololearn: Learn to code for FREE!
New course! Every coder should learn Generative AI!
Try a free lesson
+ 146

How do you design your website interface?

How do you fellow sololearner design your website interface? All this time I have been using the following method but I feel there's more efficient way to do it. my previous method 1. Sketch the design on a piece of paper pros: fast cons: ugly, hard to identify the flow of the system, make my room messy. 2. Sketch the design on publisher pros: clean design, do not eat up my room space. cons: hard to identify the flow of the system, slow 3. design a template page that act as the base design. pros: fastest compare to other method, clean design, do not eat up my room space. cons: Sometimes I end up repeating the design phase multiple times. any suggestion is much appreciated. if you are using a software, what is the name of the software and is it paid or free?

30th Aug 2018, 2:53 AM
Muhd Adam Mohd
Muhd Adam Mohd - avatar
149 Answers
+ 103
It depends on the project, I can design the website on a paper and sometimes I can make it in Illustrator to get a whole idea of the layout I'm gonna make. But I do this if it's needed, my "good programmer approach" is to copy&paste anything i need from the Bootstrap < Components section.
30th Aug 2018, 4:28 AM
Maz - avatar
+ 53
Steps are that I follow to design & build website. * Project goal + audience target. * inspiring from similar type or like of websites. * plan and sketch on paper to note. *Colors & fonts. * Design & Develop the website. That's it. I think, anyone can develop website but without design, planning impossible. Design is the heart of website.
31st Aug 2018, 4:40 PM
Golamrabbi Azad
Golamrabbi Azad - avatar
+ 34
Paper is good to check for understanding with the product manager or client and for free-form notes. As you get more experienced, you'll also have a pretty good idea of what kind of components will go into making all of those things happen, so you will be able to block out your code into sections (initially with comments), then flesh it out with copied and tweaked code from various sources. At that point, it's faster to make the real thing than to go through the whole effort of creating a full fledged demo or mockup in between.
30th Aug 2018, 5:40 AM
Janning⭐ - avatar
+ 28
steps to develop a classic web design 1] using pen or pencil, start on paper design where you draw all the items you imagine is necessary 2] draw your paper design on photoshop or illustrator where you create buttons, icons, banners, navigation links in very professional way 3] now code your web design as possible look as your photoshop or illustrator design using front end technology such as html,css,bootstrap or foundation framework...then you are ready to go with back end technology such as php,java, c# and databases..
31st Aug 2018, 4:51 PM
Andrew Ting Mai Zau
Andrew Ting Mai Zau - avatar
+ 24
What kind of illustrator do all of you recommend? Can I have a look at some of your sketches that you have made?
30th Aug 2018, 6:00 AM
Muhd Adam Mohd
Muhd Adam Mohd - avatar
+ 24
Assalamu Alaikum Brother. What I will suggest is according to the requirement of the client or (the project) identify the industry or a type of website for ex: is it a e-commerce website, business services website, freelance portal, health services, app launch, landing page, news portal etc Once you are done, visit themeforest for some inspiration, and without even drawing anything you will be able to decide on the blocks. Keep the themeforest tab open in another window, and start coding your blocks as per the layout of your choice of the theme from the themeforest you can just do 'Alt+Tab' to switch between the Windows In this way, you can start coding directly without even having to sketch *** Just don't copy as is, themeforest themes are sold at a high cost, and if you are mere copying them, then that's kind of piracy ( Plagiarism infact) as a programmer, it is our duty to respect the hardwork done by others so we can browse the internet for inspiration and not for copying
31st Aug 2018, 4:37 PM
Zubair Khan
Zubair Khan - avatar
+ 19
Janning⭐ Марина Виноградова Sumith G suppose we are working in a average size dev team then what would be the complete workflow of the design components from inception to deployment also how its determined how much freedom we have in going crazy with cool effects animation and stuffs looking for an indepth answer, very Good question brought up by Muhd Adam please tag me in your answers coz this thread will be spammed a lot and I wouldnt follow this thread
31st Aug 2018, 4:49 PM
Morpheus - avatar
+ 18
pencil (design app) and also vectrlabs
30th Aug 2018, 11:44 AM
prakash@softvars - avatar
+ 16
I agree that paper is good. But in many respects this is not clear to the customer.
30th Aug 2018, 9:44 PM
Radion Bikieiev
Radion Bikieiev - avatar
+ 14
Paper is a good friend of programmers. U can design your website on paper. If u dont like paper try some illustrator. But It's up to you. Only u know what is best for you.😊😊
30th Aug 2018, 5:11 AM
patos - avatar
+ 13
I offer You to add first all Your imges, buttons, texts etc. Then start designing it with CSS or any framework ;D
30th Aug 2018, 8:54 PM
+ 13
In company I work designer creater a template of web page. and posts it to Invision. in invision we can work with seeral another people. it is like a work space. but Adobe Assets I like nuch more for stability. Every tool works excently.
31st Aug 2018, 3:26 PM
Марина Виноградова
Марина Виноградова - avatar
+ 13
I drew conceptualized the web structure in my mind through imagination and visualization. then I put it on paper till I looks like what I want. the u look for a similar template with what I want. if there is none I use cas to style my own
2nd Sep 2018, 10:44 AM
OLANIYI Babarinde Isola
OLANIYI Babarinde Isola - avatar
+ 12
use namo webediter. it’s pretty good!
31st Aug 2018, 8:00 AM
손준혁 - avatar
+ 11
A pencil, an art sheet and wherever your imagination takes you. Then let CSS and Javascript do that magic!
31st Aug 2018, 4:12 PM
Avi Takiyar
Avi Takiyar - avatar
+ 11
Thanks for the good question and information 💗
31st Aug 2018, 9:19 PM
NimWing Yuan
NimWing Yuan - avatar
+ 10
Build the content in html → Think how your content looks like → Create a dream template → Modify it more if you want → Complete It Interface = Simple , Creative , Lively look {The funny think is i didn't designed a website like this😉😉} Or Use a wysiwyg editor...!
31st Aug 2018, 3:49 PM
Joshua Raison
Joshua Raison - avatar
+ 9
30th Aug 2018, 2:53 PM
Slim Jxmmi
+ 9
I like to do the main sketch and navigation paths first. I love to use white board markers to write on glass. First of all, I design and improve the navigation. I usually leave the design (make it pretty) for the last step
31st Aug 2018, 4:54 PM
Paulo Pepeleascov
Paulo Pepeleascov - avatar
+ 9
now a days psd to html and css is on tranding so i think it was very helpful... 1st design a sketch on ps and than use html and css ...
31st Aug 2018, 5:25 PM
Ahmad Mughal
Ahmad Mughal - avatar