giorgiouboldi / ips-design Goto Github PK

At the moment on the website, the same button has different hover states. It would be better to have just one hover style for the same button for consistency. For the primary button, on hover the background color can change from #5C2946 to #2F1725. The text should remain white and should not have an outline on hover.

The padding on the left and the right of the images should be the same.

The text is very close to the thumbnail above it. Maybe making the padding a bit bigger on top could help.

In the initial design, the lines separating the journals were not attached to the vertical line on the left. And they were also aligned on the right with the divider at the top.

Initial design:

In the author page, maybe if the author only has content form IPS, it is not necessary to show the tab, since clicking it doesn't take the user anywhere and seems like a functional button. Also the Explore more link seems misaligned, it should be aligned to the right.

The lines and text should be aligned on the left

Also, would be nice to have all the ext on the left aligning left with the rest of the content (photos, dividers)

In the event detail page, the content on the right should be aligned to the right and the content on the left should be aligned on the left (arrows, text, images, dividers):

The elements on this page are not aligned to each other. Divider, text, image should all be aligned on the left in English (on the right in Arabic), that way also allowing for slightly bigger images and more space for text.
The font for the date and language is the system font.
The filter icon is pixelated.

When the menu is open, there is a strange white line that cuts through the top. Also here the "close" label is not necessary, but if you want to keep it, I think the font is used at the moment isn't Fedra. The scrolling of the menu goes in both directions but it should just be vertical.
It seems there is a space after the words "Journals", "Books", "Events" and "blogs" so they are misaligned to the center.

The focus state of the input fields could be styled to fit the brand. For example, on focus: just the color of the input field outline changes from grey to #5C2946
Similarly, the checkbox background color could also be #5C2946

Some links have the the default underline style on focus. This interferes with the other style of the link and shows 2 underlines simultaneously. One example of this (but not limited to), is the language selector. Other links have a second underline on hover. One solution could be to have Hover and Focus state be the same style. (some examples attached)

When the link already has an underline, it should simple change colors on hover without adding another underline effect

This hover effect is only on the first 2 lines of the title in the Books page

Pressed link color on Blogs page is not in brand. The color should go back to purple after it has been clicked:

The dividers should be the same color #E3E1DC and aligned on the left and right.

The behaviour of the sub-menu links have a few issues at the moment:

1. On hover, the dividers should not be affected, at the moment the bottom divider is being pushed down.
2. The section the user is on, so the "selected" link should have an purple underline overlapping with the divider (example below)

3. Hover effect of the link should be same as the above just changing the color of the text and underline to red
4. The focus state of the link can simply be the same as the hover effect. Right now there is a gray background forming around the text (screenshot from website below)

The arrows to browse the "Latest updates" may look nicer if they are directly aligned on the right edge of the image.

The button radius should remain consistent even for larger buttons. For example, in this page https://www.palestine-studies.org/en/node/1650057

It might be nice to have a message saying "There are no results for your search"... or something like that so that the user doesn't just see a blank area with no feedback.

In the "Our Journals" section, the date should be in a different text style -> Fedra Sans Book 14
(reference of initial design attached here too)

There are some extra dividers with no content in the article page. If there is no content there, then the dividers are not needed.

The logo seems a bit small and so does the menu icon and the "menu" label (which could even be removed altogether.

Same issue as the Desktop + the sub-menu bar should go full-width as per the initial design (attached)

• In the top area: the arrows are too close to the edges. The name of the journal and the volume are neither left aligned nor center aligned. It would be better to have them aligned to the center.

• The rest of the text and content can afford to take up more space on the left and right. Right now the padding is really large and eats up a lot of space. It makes the text in the article a bit hard to read.

• There is no Fedra Arabic Italic style, so it is being replaced by the system font in a forced Italic. In Arabic, the weight should remain the same as the corresponding text in English but the Italic should be removed.
• Letter spacing should be removed for all Arabic text styles as it creates unwanted divisions between the letters (namely h5, links and tags)

I'm uploading the redesign needed in the vision (there is a section with only the redesign)

• When the filters are open, the title of the page and a lot of the text in the page is cut on the left.
• The year slider doesn't work.
• The fact that there are more filters under the "apply" and "reset" buttons is a bit confusing.

The font style on the volume and date should be Fedra Sans Book 12 as per the initial design https://projects.invisionapp.com/d/main/default/#/console/16984241/356047881/preview

The font style in Journal explorer:
Name of the journal should be in Fedra Sans Normal 14 and the label "From the editor" in Fedra Sans Book Italic 14

Same for Mobile

here is how we can redesign the blog section:
https://projects.invisionapp.com/d/main?origin=v7#/console/16984241/426381330/preview?scrollOffset=13022
https://projects.invisionapp.com/d/main?origin=v7#/console/16984241/426381331/preview?scrollOffset=13022 (inside a specific blog)

"news" should be aligned with the logo

When the main menu slides open, it leaves a light purple margin on the right and on the bottom, with a small whit gap in the bottom right corner which gives a bit of a strange visual effect. Maybe it could be solved by removing the light purple margin from the page and have them menu open "on top" of the page.

The font for number of events found, location, and the label "Speakers" looks like it has been replaced by a system font.

The blog usually as we mentioned in our last meeting is sometimes belong to a blog series.
and we should display at the bottom of the blog page the option to view blogs related to the same blog series.

"Gorgio you asked me in the meeting to update the word document maybe this is easier for you please advice"

https://www.palestine-studies.org/en/node/1650146
this page is a news page of type special focus "this kind of news consists of many items"
books,blogs,articles ..etc

how can we display it??
you told me to display it a list "grid of 3 columns" but the problem is in the articles

The description text of the project should be Fedra Sans Book, 14 (see attached design)

The tabs in the About -> Governance should be aligned to the left with the rest of the content and the behaviour can be like the image attached. No hover state necessary for the already selected tab.

The dividers should always be same weight and same color. In the event detail page, one of the lines looks thicker

Maybe the search icon shouldn't have the underline on hover (similarly to the menu icon).

In the Journal Explorer page, it might be nice to have an underline on all the title instead of just at the bottom, to be consistent with the other links.