» »

Nasveti za dizajn spletnega servisa

Nasveti za dizajn spletnega servisa

«
1
2

roli ::

Trenutno delam spletni servis kjer lahko urejaš in dodajaš kratke zapiske. Ti zapiski so potem dostopni od kjerkoli ali pa jih lahko sinhroniziraš z aplikacijo za iphone (kasneje verjetno tudi WP7 in android). Rabim pa nekaj nasvetov kako dizanirati sam spletni del servisa.

Tukaj so dve slikici trenutnega dizajna (bi dal link vendar pa trenutno delam zadevo še na lokalnem serverju):

...


...



Prva slika je napaka ob loginu. Tukaj bi lahko zadevo še nekako okrasil pa se mi ne sanja kako. Druga je pa osnovni pogled. Tukaj rabim predvsem nasvet s čim zamenjati tiste tri gumbe ob vsakem noteu (samo dva sta v resnici gumba). Nekako mi ne pašejo sem. Kaki drugi nasveti tudi dobrodošli.
http://www.r00li.com
  • zavaroval slike: bluefish ()

HardFu ::

Nocem ti vzet poguma, ampak v cem pa je tole boljse od evernote?
Pa znebi se backgrounda (onih posevnih crt), prevec bode v oci.
http://codeable.io

technolog ::

Specializiraj se na slovenski prostor!

Design je še kar ok za vmesnik (po loginu), predstavitvena stran pa naj bo drugačna.

roli ::

Vedno je prostor za malce konkurence. Pa evernote ponuja še veliko več kot standardne textovne zapiske. Moja zadevica ponuja samo preproste zapiske in to je to. Tako pride malce manj komplicirano. No ja bomo videli kaj bo rekel trg.

Če dam enobarvno ozadje imam občtek, da bo zadeva izgledala preveč dolgočasno.

EDIT: Specializacija na slovenski prostor? Why? Nevem koliko profita bom mel od česa takega. Kaj dosti slovenskih kupcev aplikacij verjetno niti ni. Kasneje bi sicer lahko dodal še slovenski prevod.

Uvodno stran pa ne vem kako bi dal. Ravno to je eno bolj pomembnih vprašanj. Mora biti nekaj kar paše zraven tega izgleda.
http://www.r00li.com

Zgodovina sprememb…

  • spremenil: roli ()

technolog ::

Pa saj sem ti rekel, da je ok!

bluefish ::

Enobarvno ozadje bi bilo morda res dolgočasno, vendar mi trenutna varianta nekako ne sede.

Morda kaj v tem stilu, le da bi bilo ozadje svetlo sivo z malenkost temnejšimi črtami.

...

Zgodovina sprememb…

  • zavaroval slike: bluefish ()

technolog ::

Ja, taka ozadja so fajn. Ampak niso trivialna za CSS, ker se nikjer nič ne ponavlja po X ali Y koordinati.

MrBrdo ::

html5 canvas pa 3d rotacije? :D
MrBrdo

roli ::

Zaenkrat bi se HTML5 izogibal - iz preprostega razloga, da je podpora brskalnikov še bolj tako-tako. Ni nujno, da imajo vsi najnovejše verzije brskalnikov.

Sploh pa verjetno za ozadje malce preveč kompliciranja. Čeprav se verjetno kar strinjam, da trenutna zadeva ne paše tja. Bi bilo pa dobro dobiti nekaj kar se da implementirat z CSS. Sem pristaš lightweight strani, ki porabijo malo podakov, da se naložijo. Tako da - enobarvno ozadje bi se kar strinjal da odpade. Mogoče, če bi uporabil trenutno ozadje vendar bi imel malce debelejše črte?
http://www.r00li.com

MrBrdo ::

Ma ne pač to ozadje je velik preveč darkersko...
Pač mal poglej večje popularne strani, ki imajo podoben header menu kot ti. Če nisi največji genij v web designu potem ni nič narobe če malo skopiraš od koga, vsaj jaz tako mislim.
Ideje lahk probaš iz glave http://basecamphq.com/ google(tanov bar na vrhu je podoben) http://twitter.com/#!/WritersDigest

V glavnem te "črtice" ki jih maš ti so že zdavnaj pase... Zdaj so bolj popularna clean ozadja z zelo subtilnimi gradienti ali pa še boljše s kakšnimi preprostimi oblikami (tako kot na twitterju, ta slika sploh ni velika saj je pod oblakom skozi ista barva). Pa ne met črno ozadje... Edina stran ki jo poznam ki res vredu izpade z temnim ozadjem je http://www.heroku.com/ sam to ti tezko rata.

My 5 cents.
MrBrdo

technolog ::

rolihandrej, MrBrdo se je pošałił :)

Drugače pa jaz mislim, da je design sedaj tvoja namanjša skrb. Prioriteta je končan servis, design pusti za na koncu. Ker - če se boš preveč ubadal z designom, te bo vse minilo, še preden boš dobro začel.

roli ::

Trenutna skrb je dizajn. Servis je dejansko končan. Aplikacija dela, sinhronizira podatke s serverjem tako da to je nekje to. Porihtat moram še dizajn aplikacije, izpilit par bugov ter opozorila o napakah prenesti iz debuggerja v uporabniku prijazno obliko. in potem je to to. Potem se moram pa lotit dizajna. Dizajna za uvodno stran - tukaj se mi še vedno ne sanja kaj bi dal. Ter seveda popilit tole ozadje. Po tem moram pa porihtat še ikono aplikacije in to je nekje to.
http://www.r00li.com

technolog ::

Plan promocije maš?

roli ::

Ja - flikni na app store in upaj na najboljše :). Tako sem naredil do sedaj z vsemi svojimi aplikacijami in je delno delovalo. Z nekaj promocije bi bilo seveda bolje. Nažalost razen polimat link na par forumov in dat par promo kod kaj drugega niti ne morem naredit.

No ja sem preizkusil še dve možnosti - tokrat v bolj svetli obliki:

...


...

http://www.r00li.com

Zgodovina sprememb…

  • zavaroval slike: bluefish ()

blackbfm ::

nekaj na hitro:

...



čeprov tole za moje pojme še ni kaj dost lično, je pa precej boljše od originala:P listki so kar iz win7 vzeti

Zgodovina sprememb…

  • zavaroval slike: bluefish ()

MrBrdo ::

neprimerno bolše... pa nč se nism pošalil technolog, zakaj bi se?
MrBrdo

roli ::

Tile listki so sicer dobri. Samo spet zahtevajo precej komplikacije za implementacijo. Razen, če bi dal samo eno barvo in se znebil senc. Potem bi se pa dalo nekaj urediti. So mi pa všeč gumbi za urejanje.
http://www.r00li.com

Lion29 ::

sploh nic ne zakomplicirajo za implementacijo... dokaj simple... moram full pohvalit dizajn blackclw-ja...

bi pa dal en nasvet in sicer, da gumbke skrijes in prikazes le na mouseon eventu...

pa se nekaj v cem je point teh zapiskov? ...fajn bi bilo, da izpilis se ogranizacijo teh listkov (zdruzevanje v stacke, po tematiki, po kljucnih besedah, po datumu, ali se kaj)...

res me zanima kaj je point tega, oz. uporabnost... kdo je ciljna publika?
Founder and CTO @ Article-Fatctory.ai

technolog ::

Seveda zahtevajo taki listki komplikacijo... Dodatne 50kB in okrog tri dodatne requeste + request za BG in se počasi nabere. Ampak je vredno, po mojem mnenju.

MrBrdo: Šmajlija si zravn naredu :) In tud verjamem, da nisi 100% resno mislil, ker je html5 support bolj bog.

Aja, andrej, dej povej kok časa ti je vzel tale servis in kaj vse trenutno omogoča?

Zgodovina sprememb…

roli ::

Z raznim združevanjem se vsaj zaenkrat ne bom ukvarjal. Niti ni toliko uporabno in zadeve samo komplicira - vsaj po mojem mnenju. Kdo je ciljna publika - jaz. Dejansko imam po papirjih na mizi polno kratkih zapiskov, nekaj jih imam po mobitelu. In ko sem kje nikoli nimam vseh zapiskov s sabo. Tako lahko zapiske dodam na računalniku in preberem na mobitelu, ko sem kje drugje.

No sam note ni težko implementirat - senco pa je. No vem da CSS3 ima neke sence, bom malce preveril. Nisem z CSS3 še nič delal.

EDIT: Glede izdelave tega servisa. Sama aplikacija in kontrolerji, da se podatki priakzujejo na iOS je trajalo malce več kot en teden po kake dve urici na dan. Sam webservis s katerim aplikacija izmenjuje podatke pa dobra dva dni. Podatki se med napravo in spletno stranjo pošiljajo lepo z JSON, ki se ga da na iphoneu in PHPju zelo enostavno parsati. Trenutno omogoča sinhronizacijo - torej na napravi dodaš note in se ta note pojavi tudi na spletni strani (ali obratno). Če kjerkoli urediš note je ta note urejen tudi na drugi strani. Če note izbrišeš se seveda izbriše tudi drugje.
http://www.r00li.com

Zgodovina sprememb…

  • spremenil: roli ()

Lion29 ::

lol, senco se naredi simple ku pimple

@tehcnolog: 50kb?? se salis? 3 dodatne requeste?? od cesa le?
background je tiles... malenkost vecji od rolihovegaandreja...
tisti 2 ikonci in sivi robcek spodaj pa das v sprite...niti 1kb ne zasede...
senca je 1 vrstica v CSS, pozicioniranje gumbkov pa ene 3...
ce odstejes se CSS njegovih prejsnjih gumbkov si tam tam...

o kakih 50kb ti? :D
Founder and CTO @ Article-Fatctory.ai

roli ::

No ja sem implementiral zadevico. Ja shadow je enostaven sem videl.

...


Ikono za edit moram še malce porihtat :D.
http://www.r00li.com

Zgodovina sprememb…

  • zavaroval slike: bluefish ()

technolog ::

Računal sem, da daš tele listke kot sliko.

Kar za kak IE moraš imet.

Zgodovina sprememb…

Lion29 ::

technolog je izjavil:

Računal sem, da daš tele listke kot sliko.

Kar za kak IE moraš imet.



za ie6, ja, ce zelis sence... pa valda naredis gracefully degradation.... torej browserji ki podpirajo pokazejo, tisti ki pa ne, pac ne.... pa cetudi bi naredil sliko bi se moral res potrudit, da prides do 50kb :D

sicer je pa ta zadnja grafika (se) dalec od tiste predlagane ;)
Founder and CTO @ Article-Fatctory.ai

Zgodovina sprememb…

  • spremenil: Lion29 ()

technolog ::

Gradientov tudi ne bi šel glih z veseljem pisat za ie.

Lion29 ::

technolog je izjavil:

Gradientov tudi ne bi šel glih z veseljem pisat za ie.


ie ima filtre, z lahkoto naredis gradiente... sicer pa gradient za to je zelo majhen, manj kot 1kb, z rumenim ozadjem, ponavljanjem v X in bottom poravnavo... si zmagal...

sicer se vedno ne vem zakaj obsesija s to podporo dinzavrom... res ne..tisti, ki jih uporabljajo, si ne zasluzijo podpore...tudi niso ciljna publika...kolko sem razumel, je ciljna publika tista, ki uporablja smart phone (prodajal bo app)...


se pa bom vzdrzal in ne bom vec trolal v tej temi, sorry
Founder and CTO @ Article-Fatctory.ai

technolog ::

Ne, sej je krivda na moji strani, spregledal sem, da se da to stvar narediti s pure CSS3. :) In sem potem smatral 3 requeste - enega za heder listka, potem gradient, potem pa še bottom.

Je pa tale ta drugi design dosti boljši kot tisti prvi.

roli ::

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fdfdc9', endColorstr='#fdf9a2',GradientType=0 ); /* IE6-9 */

IE6 že ima podporo očitno. Tale gradient sem lepo spacal z preljubim gradient editorjem:
http://www.colorzilla.com/gradient-edit...
http://www.r00li.com

CodePsd ::

Jaz bi ti predlagal isto kot ti je že Lion29.
naredis gracefully degradation.... torej browserji ki podpirajo pokazejo, tisti ki pa ne, pac ne....

Če pa bi res rad imel sence vvseh browserjih pa ti predlagam, da uporabiš CSS3PIE. To je .htc skripta, ki omogoči podporo par najbolj pogostih dekoracij CSS3 v Internet Explorer 6-8. Poglej link, tam je tudi demo.
Razrez spletnih predlog(PSD v HTML) --> http://codepsd.si

Gandalfar ::

Za kompatibilnost se za nove aplikacije osredotoci na IE8 in FF4+

roli ::

Čim je treba čarati karkoli s CSS3 priporočam tole:
http://css3generator.com/

Lahko naredi magijo z nekaterimi zadevami. Plus poleg lepo piše tudi verzijo browserja, ki funkcijo podpira.

EDIT: Sedaj me muči samo še širina tehle okvirčkov. Dejansko je nastavljena na 25% vendar pa se namesto, da bi dobil na zaslonu 4 okvirčke tam pojavijo samo trije. Zaradi prekletega margina. Okvirčki imajo 20px levega margina in nažalost se potem vse skupaj razlomi. Kaka ideja kako se znebit tega?
http://www.r00li.com

Zgodovina sprememb…

  • spremenil: roli ()

technolog ::

Daj malo nižji procent oz. izračunaj število pikslov. Če je pa širina dinamična, potem moraš pa to računat z js.

Zgodovina sprememb…

roli ::

Vse je dinamično. Kakšna ideja kako to naredit z JS?
http://www.r00li.com

Lion29 ::

ne, ne in ne...tukaj nimas kaj uporabljat js, + tega, folk ima razlicne resolucije...

naredi recimo

float: left
width: 200px;
margin: 5px;
padding:8px;

in te ti bodo prilagajali listki glede na resolucijo

valda pa ne bos naredil, da tisti s full HD bi imeli 4 listke v eni vrstici? vsak dolg skoraj 500px?


in upsotveja novo nacelo za RESPONSIVE WEB DESIGN

Na Smashing magazine imas odlicen clanek
Founder and CTO @ Article-Fatctory.ai

MrBrdo ::

technolog: aja sem mislil da si govoril o mojem zadnjem postu, ne o tistem o 3d rotacijah v html5 :) tisto je bila šala ja. drugače je ravno nad tvojim postom še en moj post, sem mislil da si o tem govoril
MrBrdo

roli ::

@Lion29: Hvala za link.
Sem pa upošteval tvoj nasvet glede tega, da naj določim fiksno širino pa bo. Saj o tem sem že sam razmišljal. Samo malce lepše bi izgledalo, če bi bil zaslon od leve proti desni vedno zapolnjen z listki (količina le teh bi se seveda prilagajala resoluciji). Trenutno bom šel z fiksno širino, pa bom potem nekoč v prihodnosti spremenil na prilagajanje.
http://www.r00li.com

Lion29 ::

ce dolocis listkom fiksno sirino in jih floatas levo , se bodo prilagajali sami... seveda pa ne bodo vedno do roba
Founder and CTO @ Article-Fatctory.ai

technolog ::

ja, saj sem ti rekel, da js. Točno to, kar si želiš - variabilno število listov v vrstici, ki se po potrebi par piklsov razširijo, ravno toliko, da zapolnijo celo širino.

roli ::

@Lion29: Saj to imam že tako in tako nastavljeno. Všeč bi mi bilo, če bi bili vedno od roba do roba. Ampak kot sem že rekel, to lahko popravim enkrat v prihodnosti.
http://www.r00li.com

Zgodovina sprememb…

  • spremenil: roli ()

technolog ::

Deliš širino prostora z običajno širino listka. Dobiš recimo 5,23. Zaokrožiš na 5 in dobiš širino listka, da bo do roba.

Lion29 ::

ni lih tko simple ;)

upostevati moras padding containerja + actual sirino listkov (padding in border) in njihov margin... ko dobis stevilo listkov na vrstico (po tvoji formuli) in ce presega polno stevilo, zaokrozis navzdol (kot si predlagal) in ostanek v sirini delis s tem stevilom listkov in to vsakemu pol pristejes ;)
Founder and CTO @ Article-Fatctory.ai

technolog ::

To so tehnični detajli, pustmo to :)

Drgač pa ni nujno da zaokrožiš dol, še bolje je, če samo zaokrožiš, pa bodo listki enkrat manjši, enkrat večji, ampak v povprečju pa ravno nastavljena širina.

Pa ne pozabi updatat ob resizu windowa.

Zgodovina sprememb…

roli ::

Tukajle je moja trenutna prva stran:

...


Kak nasvet kako bi tole še malce popestril?

Drugače pa iskrena hvala vsem za pomoč pri dizajnu - še posebno tebi blackclw za tvoj odličen predlog! Vsekakor pa bom tukaj postal link do končega projekta in vam ponudil še par promo kod za iOS aplikacijo.
http://www.r00li.com

Zgodovina sprememb…

  • zavaroval slike: bluefish ()

technolog ::

Ena opcija je, da vzameš kak že narejen design, ali pa plačaš za template...

JayKay ::

malo boldaj naslov, neki simbol, podobno temu

...

Zgodovina sprememb…

  • zavaroval slike: bluefish ()

Lion29 ::

manjka cel kup stvari, da bi bilo vsecno... predvsem logo oz. celotna celostna podoba... kaksna ikonca tudi nebi skodla
Founder and CTO @ Article-Fatctory.ai

roli ::

Logota/ikone še ni bilo gor, ker ni bilo še ikone za aplikacijo. Včeraj sem potem še končal tudi to in malce posodobil stran.

Rezultat:

...


Sem preizkušal tudi ikono zraven samega napisa pa nekako ne izgleda pravilno.
http://www.r00li.com

Zgodovina sprememb…

  • zavaroval slike: bluefish ()

blackbfm ::

tekst ti gre preveč v rob..malo prostora pusti okol

roli ::

Takole. Stran je končana - rabi samo še nekaj malenkostnih popravkov pa še nekaj contenta na prvi strani.
http://r00li.com/webnotes/
oziroma
http://webnotes.r00li.com -> ko mi bo zadevo ratalo usposobit :D.
http://www.r00li.com

roli ::

Takole, aplikacijo je končno potrdil tudi apple. Tukajle je ena promo koda. Če kdo od tisith, ki so pomagali z nasveti rabi še kako kodo pa naj mi sporoči.

Koda:
AMLERHXHLK69
http://www.r00li.com
«
1
2


Vredno ogleda ...

TemaSporočilaOglediZadnje sporočilo
TemaSporočilaOglediZadnje sporočilo
!

Vse, kar ste si želeli vprašati o CSS, pa si niste upali. (strani: 1 2 3 423 24 25 26 )

Oddelek: Izdelava spletišč
1297328577 (52726) htmltroubles
»

Neznana napaka pri izdelavi spletne

Oddelek: Izdelava spletišč
443373 (2446) RockyS
»

Izdelava spletnih strani v Photoshopu

Oddelek: Izdelava spletišč
453845 (2893) DiTi
»

Kako postaviti ozadje v CSS-ju

Oddelek: Izdelava spletišč
314474 (4205) gnomee
»

Pomoč pri dizajnu (strani: 1 2 )

Oddelek: Izdelava spletišč
625514 (3934) Meizu

Več podobnih tem