Search-Compass Webportal: Trying To Modernize The UI #1(Navigation-Menus)

[Deleted member 44219]

Hey there. So, I've of course, been posting these devlogs for a new Webportal that I'm working on called: 'Search-Compass'.

On one of these devlogs, I got told about the Design of Site and how it looked like it was in the 90's. In which I agreed and as of today, restarted the whole project to focus on it's Design. For the first part of the Design, was the two Navigation-Menus. The General-Stuff-Dock(GSD) and The Extra-Stuff-Dock(ESD). These are Navigation-Menus that can take you to other parts of the site or somewhere else on the WorldWideWeb.

So let's take a look with what I've began working on for this UI Re-design of the project:

There are some notable changes and differences you can see in this picture. Let me highlight them:

• The Background Image was removed in favour of a plain, Background
• The General-Stuff-Dock is attached to the very top instead of floating
• The Extra-Stuff-Dock is also attached to the left instead of floating
• The Font has been changed from Times New Roman to Verdana
• Objects like Buttons are rounded instead of square
• The Search-Bar is at the top instead of the bottom

Those are just a list of what you can see in the picture. I am of course, still working on trying to modernize the UI to better fit into the Modern Web. I've still got other things to add like the Featured Headlines Section, Photos & Videos Sections and tons more. As I said in the beginning of this post, I've had to restart the whole thing just for this re-design. I'm not too bothered but hey, at least I'll learn more in the long-run.

 

[/foogle]

Looks good.

 

[Page]

Needs more colouring into it but looking good. So what about sub-headings? you using Div?

 

[Ghost]

Small tip - if you want it to look modern, use 'flat colors'
You should avoid the borders (unless they're 1px & slightly darker than the button). I think this will help it look a little better.
I also recommend adding a bit more padding to those buttons so the text isn't right up against the edge 🙂

Looks like the start of a cool project! Good luck 🙂

 

[MrDangem]

Maybe by visiting some famous website, you'll get an idea of whats the latest and modern designs now.
It's a great way to learn new things and to read some of the graphic artist articles will help you a lot.

like for example: https://uxmovement.com

Why You Should Never Use Pure Black for Text or Backgrounds