Hello

I am working on software that would allow me to post photos and articles on internet. I am about to finish it, but before I upload it somewhere I would like to ask your thoughts on it.

In general, what do you think of this design? I am not designer myself and I know that I cant come up with any professional look, which is why I thought I would ask your opinions on this.

What I want from my design is:
1) Easy to read
2) Understandable
3) Visitors wouldn't find anything that would disturb them
4) Design wouldn't be reason for users not to come back

Here's main views:
1) Site - although current screenshot looks more like forum specially because of this solved thing, I plan to use it as a site where I can write articles/blogs w/e which is reason why I minimally display username and time.

On this picture is just sample of it:



2) Gallery - it should be easy to use and navigation should be easy to understand. With thumbs view I am kinda unhappy because those thumbs look kinda ugly but I don know what to do. I thought greater contrast between thumbnail background (grey) and text below would work but it must fit with rest of theme. What's your suggestions here?


Image - I don know what to think of it other than photo details box and original size image download looks kinda ugly but I don't know wether I should move these to somewhere else or change they're look somehow. With that I would also like to hear your thoughts

I forgot to write description to this photo so I am just letting you know that it would appear below the attachment link. Would you recommend any other design?
Also not that hashtags are not visible on this screenshot but with just like normal posts they appear after the text (description).

Thanks in advance for your suggestions and ideas.

If you are not designer yourself.. i would recommend you hire someone professional in design or you can buy theme from themeforest

I have written this software myself so there's no place to buy themes for it. + I am not willing to pay. I am rather looking for ideas how I could improve it. Like what could be differrent and what not.

I've looked at what you have and I have some advice.

 

Your points- 3) Visitors wouldn't find anything that would disturb them

4) Design wouldn't be reason for users not to come back

 

In my opinion, you're failing on 3 and 4 because of two reasons. Firstly, you may be misunderstanding your own skillset. What you've built is technically impressive. I'm a design professional and I couldn't begin to start figuring out how to do what you have. But to repeat myself, I'm a design professional, not a programming professional which seems to be what you're aspiring to be.

 

Secondly, its your misunderstanding of your role combined with the "I am not willing to pay" attitude you have which will ultimately drive visitors away from what you've created. Your creation functions fine but looks like its from 2002. This is disturbing your visitors because we're not used to seeing something so antiquated, and secondly, the web isn't what it used to be. How many times have you found a poorly designed ecommerce site with great prices on something you're after but you've not purchased it because their site looks super antiquated, or you suspect it may be a scam...

 

I'm not saying people will have the same reaction to your creation, but internet users have come to expect more of even the most basic of services, and no amount of "add padding" or "use green" are going to dramatically change your layout to fix issues 3 and 4. You will need to make very good friends with a designer who may help you for free, or you'll have to pay a consultant if you want a full-on professional advice service.

 

I hope I'm not coming across as negative as that's not my intention, and I am sincere when I say what you've made is an ambitious project, but to turn it into a service people will use, you'll have to approach it from an objective standpoint, and that standpoint is that your site has plenty of room for improvement.

Edited August 13, 201412 yr by WilliamsGraphics

I am not planning to sell services therefore I dont have to fear being thought as scammer but what you said is true.

Let me ask something more specific: Is there anything wrong with placement? And if yes then what would move to where? And why does it look like 2002? because no nice gradient graphics are used?
1) How much would it add if I would replace textual links with icons?
2) How much would it give if I would make redesign earch box to be just 1 box with magnification glass icon in that box?
3) How much would it add if I would make header bar at top a little gradient or draw it other nice bacground image?
4) If I do (1), (2), (3) would it still look like year 2002?

And to adhere to your principles you're not going to even say in few sentences what's so wrong with it?

Edited August 13, 201412 yr by unix

I made a quick design in sketch, I think you could do with making some of the text bigger and also adding some contrast with different font weights to make the whole layout clearer. I've attached my design to show what I mean. Also I added some icons via Font Awesome, little things like that will make the experience intuitive and pleasant for users. The layout at the moment just seems too bunched together and could use some white/negative space.

Edited August 13, 201412 yr by mug2k

I have written this software myself so there's no place to buy themes for it. + I am not willing to pay. I am rather looking for ideas how I could improve it. Like what could be differrent and what not.

 

ok if you are not willing to hire anyone or buy themeforest theme.. you can look for some blog themes on themeforest and redesign your site according to that.. whatever platform your site is built on..you can surely take inspiration from some good themes sold on themeforest

 

on the whole the site looks pretty dated and needs total revamp.. as you asked there mentioning points.. everything needs polishing

 

i posted themeforest link .. so that u can atleast have a look.. (only looking at the live demos there wont cost u money) but i don't think u bothered to check it?

Edited August 14, 201412 yr by sash_oo7

Thanks mug2k, you've really went an extra mile, thanks. Btw I like the font for it looks clean and easy to read. What font and what size was it?

Edit: where would you place photo description bwtween the photo details and photo or after the details? I forgot to add that bjut just imagine if I would write few paragraphs of that raven, what would be best place for it?

sash_oo7 sorry I didn't look these, since it was my own custom software and I thought that since there's no themes available for that there's no point but I didn't think of just looking for ideas. Thanks for pointing it out again.

Edited August 14, 201412 yr by unix

My comments depend on whether you wanted to create the best website for the job or if you did it for the challenge and personal satisfaction of creating it from scratch. If it is the latter, great job, you must have learned a lot in the process. If the former, however, I agree with the other comments, it isn't a great design. Website users' expectations are set by the major websites we use every day - Facebook, BBC news, Amazon, Twitter, eBay etc etc - which set the bar incredibly high in terms of user experience and presentation.

Design is holistic, it is the coming together of hundreds of details to create a great end product, fit for the purpose it was intended. It should delight people who use it even though they aren't aware of the individual elements that make it so. It also implies the quality of the content - as has already been mentioned, people are suspicious of what is being offered when the presentation is poor. No amount of detailed replies on here about specific colours, fonts, backgrounds and layout can impart that skill, so if you really want a great design that is going to do justice to what you want to achieve I strongly suggest you use a CMS and a pro template. There are loads of free ones if you can't justify spending any money, and you can customise them with css to create something unique and personal to you. The functionality you require comes out of the box with any good CMS.

I wrote it for personal satisfaction. I plan to use it as a blog where I would write interesting things about computer stuff and webgallery to represent my photos to friends and wider public who are interested in photography. Altough I added multi user support so that when it later gets ready enough (both functionality and design) I could upload it to source forrge and make it feely available that users can download and install this software to they're server.

Currently I amlooking for enough good design that I would dare to upload it and share this link to friends (with out having to fear comments that "your site looks like some old year 2000" but rather hear that "in general it's ok but needs a little work here and there" ).

So yes I dont need that fancy look to win clients but just to keep those who are interested in content leaving just because the design makes in difficult to use.

I have to admit, I agree... my first thought was to move away from the picture, just because it is an old design... But the suggestions that you've gotten are great.. I would say to make the contrast between text colour and background colour smaller, and to make edges smoother in general. The design that mug2k posted is much more user friendly and appealing to the eye.... This is just from a marketers perspective... But less obvious contrast, more of a blending, is always nicer to look at.... But good idea! Well done

Thanks mug2k, you've really went an extra mile, thanks. Btw I like the font for it looks clean and easy to read. What font and what size was it?

 

Edit: where would you place photo description bwtween the photo details and photo or after the details? I forgot to add that bjut just imagine if I would write few paragraphs of that raven, what would be best place for it?

 

sash_oo7 sorry I didn't look these, since it was my own custom software and I thought that since there's no themes available for that there's no point but I didn't think of just looking for ideas. Thanks for pointing it out again.

 

I've added an updated design and another one with the font families, sizes and weights. If you could add the photo details when the user moves the mouse over the photo that would be a nice touch and change the opacity on the photo in the same instance. Also the photo 'description' works perfectly fine underneath the photo in my opinion. I'm still new to design so take my suggests with caution as I am clearly not a experienced professional like others on this forum. Obviously the design needs more colour and finesse but I think I've covered some of the basics and hopefully you can take some idea's from these and build on them.

Edited August 14, 201412 yr by mug2k

Here's what I think you could improve.

• The links in the top menu needs to be separated more. add some margin between the links. The text for the menu items is very long maybe you should considder icons instead.
• The search field looks wierd with black background and the round corners.
• Generally round cornes is not really the thing now.
• Add some more line-height and bigger font-sizes. You cen never get too much white space
• A little less value-contrast in the colors would please the eye. Brighten the black and the blue a bit.

Best of luck

 

EDIT: I almost forgot: the text-lines in the posts are a bit to long. You should max have around 65 characters/keystrokes in a line. A bit of padding for your paragraphs and headings would be nice.

Edited August 14, 201412 yr by Nillervision

Thanks mug2k, I have already brought confusion as I see lol. Categories: My site Private photos is not path as you marked it with >. But 3 categories My site, private, photos where My site is for articles/blogs as shown on first image. Altough I have no real idea how to represent paths. Forexample if you click on pets it will display "Categories: photos > pets" meaning that pets is subgallery of photos. Then on My site there are subsites sub1 and sub2 and when you click either one of them you will see "Categories: My site > sub1 My site > sub2 " which should be understood as you are currently viewing either sub1 or sub2 and the parent of these are My site. The concept is taken from forums - each forum can contain n subforums and m topics.

 

The idea of mousehover for details sure looks clean but here are the drawbacks 1)how do you right click the image to set it as wallpaper or save as? 2) how do you generate mouse hover with phone? Due to that I would ask which is better, keeping it between image and description or after the description?

 

Thanks Nillervision for your tips

Generally round cornes is not really the thing now.

Did you mean that it looks better without or just that they dotn add anything?

A bit of padding for your paragraphs and headings would be nice.

You mean more space between heading and first paragraph? I thought that I might even have it toomuch.

 

For contrast I thought that black on white would be easy to read. But now I have seen more than one suggestion no to have it too strong. Thanks again for these tips.

You could make the details appear when the user clicks the left mouse button (add a 'click for details' instruction somewhere) and that way you can still have the right mouse button options. With regard to the mobile layout you could make a set of different styles specific to the mobiles instead of using the same options for all devices.

 

Thanks mug2k, I have already brought confusion as I see lol. Categories: My site Private photos is not path as you marked it with >. But 3 categories My site, private, photos where My site is for articles/blogs as shown on first image. Altough I have no real idea how to represent paths. Forexample if you click on pets it will display "Categories: photos > pets" meaning that pets is subgallery of photos. Then on My site there are subsites sub1 and sub2 and when you click either one of them you will see "Categories: My site > sub1 My site > sub2 " which should be understood as you are currently viewing either sub1 or sub2 and the parent of these are My site. The concept is taken from forums - each forum can contain n subforums and m topics.

The idea of mousehover for details sure looks clean but here are the drawbacks 1)how do you right click the image to set it as wallpaper or save as? 2) how do you generate mouse hover with phone? Due to that I would ask which is better, keeping it between image and description or after the description?

Btw mug2k how does "Open Sans Bold" at 14px look so different on your screenshot?

 

In my firefox it looks like this:

Btw mug2k how does "Open Sans Bold" at 14px look so different on your screenshot?

 

In my firefox it looks like this:

 

I'm not really sure, maybe the program I use renders the fonts better than your browser, I don't have any expertise in that area hopefully somebody else might know more about this.

 

Edit: There is no Open Sans Bold 14px in my screenshot, just Light and Regular.

Edited August 14, 201412 yr by mug2k

Tested light also but didn't notice difference with eye.

 

Thanks Nillervision for your tipsDid you mean that it looks better without or just that they dotn add anything?You mean more space between heading and first paragraph? I thought that I might even have it toomuch.

 

You're welcome. I was refering to padding or margin left and right. The body text is to close to the borders. and the lines are to long. take some time to study design on websites with similar concepts. UI design is really mostly about knowing the "universal" design conventions rather than having artistic skills:

• Group similar elements and content using the Gestalt principles
• Learn the nature of colours and how to combine them, Use the colour wheel, complementary colours etc. to create contrast and bring life to the elements. This tool is a great help
• Consistency and simplicity is very important. Limit the amount of typefaces and effects to a minimum
• Learn the principles for layout "the grid" the rule of thirds" etc.

mug2k, this is how your font suggestions look like:

IE is a bit hard to read:


Firefox looks fine:


Due to typo in CSS h2 on these screenshots are actually not 24px however they're smaller by only few px.

Questions to wider audience:
Is navigation bar understandable to average user or should it look different? Would you use different words to say what bold texts say? Any suggestions how it could look better?

Currently viewing: My site > sub1 > sub1_1 - is path to current category

 

Other categories: sub1_2 - the other categories at same level

 

Subcategories under this category: - child categories

Basically the idea is:

cat1

cat2

cat3

+cat3.1

++cat3.1.1

++cat3.1.2

++cat3.1.3

+cat3.2

+cat3.3

cat4

 

if you are currently in 3.1 then you would see:
Currently viewing: cat3 > cat3.1

Other categories: cat3.2 cat3.3

Subcategories under this category:

cat3.1.1

cat3.1.2

cat3.1.3