How do you design your website interface?

Question

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?

Answer 1

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.

Answer 2

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.

Answer 3

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.

Answer 4

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..

Answer 5

What kind of illustrator do all of you recommend?
Can I have a look at some of your sketches that you have made?

Answer 6

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

Answer 7

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

Answer 8

pencil (design app) and also vectrlabs
https://www.sololearn.com/discuss/1479394/?ref=app

Answer 9

I agree that paper is good. But in many respects this is not clear to the customer.

Answer 10

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.😊😊

Answer 11

I offer You to add first all Your imges, buttons, texts etc.
Then start designing it with CSS or any framework ;D

Answer 12

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.

Answer 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

Answer 14

use namo webediter. it’s pretty good!

Answer 15

A pencil, an art sheet and wherever your imagination takes you. Then let CSS and Javascript do that magic!

Answer 16

Thanks for the good question and information 💗

Answer 17

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...!

Answer 18

JUST USE WORDPRESS 😋

Answer 19

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

Answer 20

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 ...